Membuat Flowchart Online
Tulis satu langkah per baris dan flowchart-nya tergambar sendiri. Baris yang diakhiri tanda tanya menjadi percabangan ya/tidak. Unduh PNG atau SVG tanpa perlu daftar.
Akhiri sebuah baris dengan ? untuk membuat titik keputusan. Pada baris tepat di bawahnya, tulis Ya: langkah atau Tidak: langkah untuk percabangannya, dan tulis nama langkah setelah -> untuk menyambungkannya ke langkah tersebut.
Langkah berikutnya
Cara membuat flowchart dari teks
- Tulis langkah-langkah proses Anda di kotak di atas, satu per baris. Baris pertama digambar sebagai awal dan baris terakhir sebagai akhir.
- Akhiri sebuah langkah dengan tanda tanya bila di titik itu perlu diambil keputusan. Langkah itu menjadi belah ketupat dengan panah Ya dan Tidak.
- Jika satu cabang punya tugas sendiri, tulis "Ya: tugas" atau "Tidak: tugas" pada baris tepat di bawah pertanyaan.
- Pilih arah, lalu unduh diagram yang sudah jadi sebagai PNG atau SVG.
Untuk membuat sketsa proses bersama tim
Sebagai Associate Amazon, saya memperoleh penghasilan dari pembelian yang memenuhi syarat.
Aturan untuk keputusan
Anda tidak perlu menguasai sintaks diagram apa pun. Ada empat aturan, dan tombol contoh memperlihatkan masing-masing aturan dalam praktik.
- Cabang yang tidak Anda tulis lanjut ke baris berikutnya. Di bawah "Apakah stok tersedia?", menulis hanya "Tidak: Beri tahu pembeli" membuat panah Ya menuju baris berikutnya.
- Cabang Ya kembali menyatu dengan jalur utama. Langkah baru seperti "Ya: Bawa payung" digambar lalu berlanjut ke baris berikutnya. Langkah baru pada cabang Tidak berhenti di situ.
- Memakai nama langkah yang sudah ada akan menyambung ke langkah itu. "Tidak: Tampilkan pesan galat -> Masukkan kata sandi" menampilkan galat lalu kembali ke langkah "Masukkan kata sandi". Namanya harus sama persis.
- Tanpa baris cabang sama sekali, Ya menuju baris berikutnya dan Tidak kembali ke langkah sebelumnya, cocok untuk alur "ulangi sampai lolos" seperti "Apakah pengujian lolos?".
Untuk merangkai beberapa langkah dalam satu cabang, hubungkan dengan panah: "Tidak: Beri tahu pembeli -> Kirim pengembalian dana -> Batalkan pesanan".
Kegunaannya
- Mendokumentasikan proses: penanganan pesanan toko online, pengembalian dana, atau persetujuan pengajuan lebih mudah diikuti sebagai satu gambar daripada paragraf panjang. Tempelkan ke dokumen serah terima, SOP, atau wiki tim.
- Laporan dan tugas kuliah: gambarkan algoritma, prosedur praktikum, atau perjalanan pengguna, lalu masukkan ke Word, Google Docs, atau slide. PNG-nya berlatar putih, jadi tampil rapi di halaman.
- Perencanaan dan pengembangan: buat sketsa alur masuk akun, pembayaran QRIS, atau pendaftaran yang bercabang menurut kondisi, lalu bagikan sebelum rapat.
- Daftar kegiatan sehari-hari: persiapan mudik Lebaran, pindahan rumah, atau urutan mengatasi keluhan pelanggan bekerja dengan cara yang sama.
Bagaimana simbolnya digambar
Kotak bersudut membulat adalah awal dan akhir, persegi panjang adalah tugas, belah ketupat adalah keputusan dengan pintu keluar Ya dan Tidak, dan panah menunjukkan arah alur. Hanya simbol yang paling umum yang dipakai, supaya siapa pun bisa membaca hasilnya. Konvensi ini sama dengan yang diajarkan di mata pelajaran Informatika dan mata kuliah algoritma di Indonesia, tempat diagram alir sering menjadi latihan pertama sebelum menulis kode. Untuk langkah yang banyak, "Dari kiri ke kanan" cocok untuk slide lebar, sedangkan "Dari atas ke bawah" cocok untuk dokumen dan layar ponsel.
Standar internasional untuk simbol dan konvensi diagram alir adalah ISO 5807:1985. Edisi pertamanya terbit pada Februari 1985 dan terakhir ditinjau serta dikonfirmasi pada 2019, jadi masih berlaku. Untuk arah, Mermaid mendukung lima orientasi: TB dan TD (dari atas ke bawah), BT (dari bawah ke atas), LR (dari kiri ke kanan), dan RL (dari kanan ke kiri). Tombol di atas mencakup dua yang paling umum, TD dan LR; untuk orientasi lainnya, ubah baris pertama di tab kode Mermaid.
Menulis kode Mermaid langsung
Buka tab "Kode Mermaid" dan langkah-langkah Anda dikonversi ke sintaks Mermaid. Mermaid adalah format teks terbuka untuk diagram, dan menyunting kodenya memungkinkan Anda menyetel bentuk kotak dan label panah dengan lebih leluasa. Kotak yang sama juga menggambar diagram sekuens (sequenceDiagram), yang memperlihatkan pesan antara orang dan sistem, serta diagram Gantt (gantt) untuk jadwal. Mulailah dari tombol contoh lalu ganti nama dan tanggalnya.
Jika kodenya ada kesalahan, pesan di atas pratinjau memberi tahu baris mana yang perlu diperiksa, dan diagram terakhir yang valid tetap tampil dalam keadaan pudar supaya bisa dibandingkan saat memperbaiki. Teks dan kode Anda tersimpan otomatis di peramban ini, jadi tetap ada saat Anda kembali, dan tidak pernah dikirim ke server.
Mermaid adalah proyek berlisensi MIT yang repositori publiknya dibuat pada November 2014. Per Oktober 2026 proyek itu memiliki lebih dari 90.000 bintang di GitHub, dan pada 2019 memenangkan JS Open Source Awards dalam kategori "The most exciting use of technology". GitHub merender Mermaid di dalam berkas Markdown sejak 14 Februari 2022, jadi kode yang Anda rapikan di sini bisa ditempel ke blok kode mermaid dan akan tampil sebagai diagram yang sama di sebuah README atau issue. Situs ini memakai Mermaid 11.17.2 (rilis 25 Agustus 2026); sintaks yang ditambahkan di versi berikutnya mungkin tidak tergambar di sini.
Sumber
- ISO. ISO 5807:1985 Information processing: Documentation symbols and conventions for data, program and system flowcharts. Terbit 1985, dikonfirmasi 2019.
- Mermaid. Flowcharts Syntax; About Mermaid; mermaid-js/mermaid (MIT); rilis 11.17.2, 2026.
- GitHub Blog. Include diagrams in your Markdown files with Mermaid, 14 Februari 2022. Semuanya diperiksa pada 9 Oktober 2026.
Pertanyaan umum
Apakah perlu daftar akun atau memasang aplikasi?
Tidak. Langsung dipakai tanpa akun, dan unduhan PNG dan SVG-nya tanpa tanda air.
Bagaimana cara membuat percabangan ya/tidak?
Akhiri baris dengan tanda tanya dan baris itu menjadi belah ketupat. Pada baris di bawahnya, tulis "Ya: langkah" dan "Tidak: langkah" untuk menambahkan cabang.
Cocok untuk tugas diagram alir di kuliah atau mata pelajaran Informatika?
Cocok. Simbolnya mengikuti konvensi ISO 5807 yang dipakai di mata kuliah algoritma dan pelajaran Informatika: awal dan akhir membulat, tugas dalam persegi panjang, keputusan dalam belah ketupat. Unduh PNG-nya lalu tempel ke laporan.
Bisa dipakai untuk SOP atau alur persetujuan di kantor?
Bisa. Tulis setiap langkah satu baris, beri tanda tanya pada langkah yang butuh keputusan, misalnya "Apakah disetujui atasan?", lalu bagikan PNG-nya ke tim atau tempel di dokumen SOP.
Apakah bisa dipakai di HP?
Bisa, berjalan di peramban ponsel. Untuk diagram yang panjang, arah "Dari atas ke bawah" lebih mudah dibaca di layar sempit.