Gratis · Tanpa daftar · Mendukung file .mmd

Editor diagram alir Mermaid

Diagram alir memperlihatkan bagaimana sebuah proses berjalan: langkah apa saja yang ada, di mana ia bercabang, dan di mana cabang-cabang itu bertemu kembali. Cocok ketika yang jadi pokok adalah urutan keputusan — sebuah rilis, jalur sebuah permintaan, alur persetujuan. Kalau pokoknya siapa berbicara dengan siapa dan kapan, diagram urutan lebih tepat.

Buka ini di editor →Baca panduan

Alur rilis dengan dua jalur kegagalan

Hampir semua diagram alir di situs ini berangkat dari bentuk ini: satu jalur mulus yang lurus, dengan belah ketupat keputusan yang bercabang darinya. Perhatikan tanda kutip pada simpul kedua dari belakang. Mengutip tanda kurung di dalam label itu wajib, dan melupakannya adalah kesalahan yang paling sering terjadi.

flowchart TD
    Push[Push ke main] --> Lint[Analisis statis dan tipe]
    Lint --> Uji{Pengujian lolos}
    Uji -->|Tidak| Beritahu[Beri tahu pembuat commit]
    Uji -->|Ya| Build[Bangun image]
    Build --> Pindai{Pemindaian keamanan bersih}
    Pindai -->|Tidak| Tahan["Tahan rilis (tinjau manual)"]
    Pindai -->|Ya| Rilis[Terapkan ke produksi]
    Rilis --> UjiCepat[Uji asap]
    UjiCepat --> Selesai[Rilis selesai]

Buka ini di editor

Contoh yang dibahas

1. Diagram alir terkecil

Dua simpul dan satu panah. `TD` berjalan dari atas ke bawah, `LR` dari kiri ke kanan; diagram yang lebih lebar daripada tinggi hampir selalu lebih enak dibaca dengan `LR`.

flowchart TD
    Terima[Terima permintaan] --> Balas[Kirim balasan]

Buka di editor

2. Percabangan berlabel

Kurung kurawal menggambar belah ketupat. Teks di antara garis tegak memberi label pada garis penghubung, bukan pada simpul. Pembedaan ini muncul lagi di bagian kesalahan di bawah.

flowchart TD
    Mulai[Terima permintaan] --> Auth{Token sah}
    Auth -->|Ya| Proses[Jalankan penangan]
    Auth -->|Tidak| Tolak[Kembalikan 401]
    Proses --> Sukses[Kembalikan 200]

Buka di editor

3. Biarkan bentuk berbicara

Bentuk adalah cara termurah menambahkan informasi ke diagram alir. Ujung membulat menandai awal dan akhir, belah ketupat menandai keputusan, silinder menandai tempat penyimpanan data.

flowchart LR
    Mulai([Mulai pekerjaan]) --> Baca[(Baca dari Postgres)]
    Baca --> AdaBaris{Ada baris baru}
    AdaBaris -->|Tidak| Henti([Berhenti tanpa perubahan])
    AdaBaris -->|Ya| Ubah[/Ubah datanya/]
    Ubah --> Tulis[(Tulis ke S3)]
    Tulis --> Henti

Buka di editor

4. Subgraf untuk mengelompokkan menurut penanggung jawab

Subgraf memasukkan simpul-simpul yang berkaitan ke dalam satu bingkai. Paling berguna untuk mengelompokkan menurut penanggung jawab, bukan menurut tahap: begitu terlihat tim atau layanan mana yang menangani apa, titik serah terima langsung menonjol.

flowchart TD
    subgraph klien [Peramban]
        UI[Kirim formulir]
    end
    subgraph api [Layanan pesanan]
        Periksa[Periksa masukan]
        Simpan[Simpan pesanan]
    end
    subgraph async [Pekerjaan latar]
        Surel[Kirim surel konfirmasi]
        Faktur[Buat faktur]
    end
    UI --> Periksa
    Periksa --> Simpan
    Simpan --> Surel
    Simpan --> Faktur

Buka di editor

5. Perulangan coba-ulang dengan batas atas

Diagram alir menangani perulangan dengan baik. Perulangan coba-ulang justru kasus di mana ia benar-benar berguna, karena dari gambarnya langsung terlihat apakah perulangan itu punya jalan keluar yang nyata.

flowchart TD
    Kirim[Kirim webhook] --> Hasil{Menerima 2xx}
    Hasil -->|Ya| Berhasil[Tandai terkirim]
    Hasil -->|Tidak| Percobaan{Kurang dari 5 percobaan}
    Percobaan -->|Ya| Tunggu[Tunggu eksponensial]
    Tunggu --> Kirim
    Percobaan -->|Tidak| Antrean[Masukkan ke antrean gagal]

Buka di editor

Ringkasan sintaks diagram alir

Semua di sini khusus untuk diagram alir. Terutama panahnya: panah tidak berpindah ke jenis lain. Tanda `->>` dari diagram urutan di sini adalah kesalahan sintaks.

Sintaks	Arti
flowchart TD	Dari atas ke bawah. `TB` sama saja. Arah baca yang lazim untuk sebuah proses.
flowchart LR	Dari kiri ke kanan. Ada juga `RL`. Untuk alur yang lebar dan dangkal.
A[Teks]	Persegi panjang — langkah biasa.
A(Teks)	Persegi panjang bersudut tumpul.
A([Teks])	Bentuk stadion — lazimnya awal atau akhir.
A[(Teks)]	Silinder — tempat penyimpanan data.
A{Teks}	Belah ketupat — keputusan.
A[/Teks/]	Jajar genjang — masukan atau keluaran.
A --> B	Panah.
A --- B	Garis tanpa mata panah.
A -.-> B	Panah putus-putus — lazimnya asinkron atau opsional.
A ==> B	Panah tebal — lazimnya jalur utama.
A -->\|teks\| B	Garis penghubung berlabel. Kalau ada tanda kurung, perlu tanda kutip.
A["Teks (berkurung)"]	Label dalam tanda kutip — perlu untuk tanda kurung, tanda kutip, dan setiap karakter yang terbaca sebagai sintaks bentuk.
subgraph nama [Judul] ... end	Mengelompokkan simpul dalam bingkai. Ditutup dengan `end`.
%% komentar	Baris komentar. Tidak digambar.

Enam kesalahan yang benar-benar merusak diagram alir

Semuanya direproduksi pada mesin yang dipakai situs ini (Mermaid 11.12.2). Tempel versi yang salah ke editor, Anda akan mendapat persis kesalahan yang dijelaskan; versi yang sudah diperbaiki tergambar. Cara tercepat membaca kesalahan Mermaid adalah melihat bagian akhirnya: setelah kata `got` tertulis token tempat pengurai tersangkut.

Yang Anda lihat

Parse error yang berakhir dengan: got 'PS'

Mengapa

Ada kurung buka di dalam label berkurung siku. Tanda kurung biasa adalah sintaks bentuk — `A(teks)` berarti simpul bersudut tumpul — jadi kurung telanjang di dalam kurung siku terbaca sebagai awal bentuk baru.

Solusi

Bungkus seluruh label dengan tanda kutip ganda. Di dalam tanda kutip, semuanya dihitung sebagai teks.

Salah

flowchart TD
    A[Coba lagi (maksimal 5 kali)] --> B[Selesai]

Benar

flowchart TD
    A["Coba lagi (maksimal 5 kali)"] --> B[Selesai]

Yang Anda lihat

Parse error pada baris tempat Anda memberi nama simpul

Mengapa

Ada spasi di dalam pengenal simpul. Dalam bahasa Indonesia ini sulit dihindari, karena nama yang wajar hampir selalu terdiri atas beberapa kata: «layanan autentikasi», «basis data pengguna». Pengenal adalah token sebelum panah, dan spasi memotongnya sehingga tersisa kata yang tidak punya tempat.

Solusi

Beri simpul itu pengenal satu kata dan taruh teks yang enak dibaca di label. Boleh juga digabung seperti `layananAuth`; yang penting tidak ada spasi.

Salah

flowchart TD
    layanan autentikasi --> basis data pengguna

Benar

flowchart TD
    auth[Layanan autentikasi] --> db[(Basis data pengguna)]

Yang Anda lihat

Parse error yang berakhir dengan: got 'end'

Mengapa

Anda memakai `end` sebagai pengenal simpul. Huruf kecil `end` menutup sebuah subgraf, jadi pengurai melihat akhir blok di tempat ia menunggu sebuah simpul. Ini lebih sering terjadi daripada yang disangka: mengikuti contoh berbahasa Inggris, simpul terakhir jadi bernama `end` walaupun sisanya berbahasa Indonesia.

Solusi

Tulis dengan huruf besar atau beri simpul itu pengenal lain lalu pindahkan katanya ke label. `Selesai` tidak menimbulkan masalah apa pun.

Salah

flowchart TD
    Mulai[Mulai] --> end

Benar

flowchart TD
    Mulai[Mulai] --> Selesai[Sudah selesai]

Yang Anda lihat

Parse error pada label garis penghubung di antara garis tegak

Mengapa

Ada tanda kurung di dalam label garis penghubung. Teks di antara `|…|` tunduk pada batasan yang sama dengan label simpul: di sana pun tanda kurung adalah sintaks, bukan teks.

Solusi

Bungkus label garis penghubung dengan tanda kutip juga.

Salah

flowchart TD
    A -->|ya (selalu)| B

Benar

flowchart TD
    A -->|"ya (selalu)"| B

Yang Anda lihat

Parse error yang berakhir dengan: got 'STR'

Mengapa

Ada tanda kutip ganda lurus di dalam label simpul. Pengurai menganggapnya sebagai awal sebuah string, lalu menemui kurung siku label di tempat ia menunggu tanda kutip penutup.

Solusi

Bungkus seluruh label dengan tanda kutip lurus lalu pakai tanda kutip tunggal di dalamnya, atau tulis karakternya sebagai entitas HTML #quot;.

Salah

flowchart TD
    A[Dia bilang "setuju"] --> B[Selesai]

Benar

flowchart TD
    A["Dia bilang 'setuju'"] --> B[Selesai]

Yang Anda lihat

Lexical error on line 1. Unrecognized text.

Mengapa

Arahnya tidak sah. Diagram alir hanya menerima TB, TD, BT, LR, dan RL; selain itu gugur pada analisis leksikal sebelum satu simpul pun terbaca. Karena itu kesalahannya menunjuk baris 1, bukan letak salah ketiknya.

Solusi

Pakai salah satu dari kelima itu. TD dan LR menutupi hampir semua kebutuhan.

Salah

flowchart ATASBAWAH
    A --> B

Benar

flowchart TD
    A --> B

Catatan tentang penggambaran

Tidak ada satu pun di sini yang disalin dari dokumentasi: semuanya diukur pada Mermaid 11.12.2, versi yang dipakai situs ini. Inilah perilaku yang mulai penting begitu diagramnya bukan lagi mainan.

Label bahasa Indonesia termasuk yang terlebar di situs ini

Makna yang sama dengan `A[Payment received] --> B[Ship the order]`, yang terukur 204 piksel, dalam bahasa Indonesia menjadi 228 piksel — nomor dua terlebar dari semua bahasa yang diukur di sini, hanya kalah dari bahasa Belanda. Penyebabnya bukan akar kata yang panjang melainkan pengimbuhan: awalan dan akhiran seperti me-, pe-, -kan, dan -an membuat satu kata tumbuh beberapa suku. Praktisnya, Anda menyentuh batas pemenggalan 276 piksel lebih cepat daripada yang disangka dari contoh berbahasa Inggris.

Label hanya berpindah baris pada spasi

Terukur: label simpul melebar sampai batas 276 piksel viewBox, lalu berpindah baris dan tumbuh ke atas sekitar 24 piksel per baris. Pemenggalan hanya terjadi pada spasi, jadi satu kata panjang tidak pernah dipenggal. Untungnya bahasa Indonesia jarang membentuk kata majemuk yang ditulis serangkai sepanjang bahasa Belanda atau Jerman, sehingga masalah ini praktis tidak muncul — kata berimbuhan terpanjang pun masih jauh di bawah batas itu.

Tinggi bertambah sekitar 105 piksel per simpul, lebarnya nyaris berhenti

Pada diagram dari atas ke bawah, tiga simpul memberi viewBox sekitar 126×278. Pada empat puluh simpul angkanya menjadi 135×4126: lebarnya bertambah 9 piksel, tingginya berlipat lima belas kali. Diagram yang panjang adalah pita sempit yang tidak muat di layar mana pun. Untuk itulah tombol pemusatan di pratinjau ada. Kalau sudah berlebihan, beralih ke `flowchart LR` sering memangkas rasio sisinya hampir setengah.

Ekspor PNG dulu rusak karena label berupa HTML

Label diagram alir digambar sebagai HTML sungguhan di dalam `<foreignObject>` pada SVG. Itulah sebabnya `<br>` dan sedikit Markdown berfungsi di dalam label. Karena alasan yang sama, peramban menolak melukis SVG ini ke atas kanvas: ekspor PNG situs ini cukup lama diam-diam mengembalikan berkas SVG. Sekarang, sebelum diekspor, diagramnya digambar ulang memakai label teks SVG biasa dan PNG-nya keluar benar. Harganya, tata huruf pada PNG hasil ekspor sedikit sekali berbeda dari yang di layar.

Tema mengubah warna, tidak pernah mengubah geometri

Diagram yang sama digambar pada tema terang dan tema gelap menghasilkan viewBox yang identik. Berganti tema tidak menata ulang apa pun dan tidak membuat label meluber dari kotaknya. Yang terlihat janggal pada tema gelap sama janggalnya pada tema terang.

Kapan diagram lain lebih cocok

Kalau intinya siapa mengirim apa kepada siapa, dan urutan waktu lebih berbobot daripada percabangan, diagram urutan lebih enak dibaca dan tetap enak dibaca ketika ia membesar. Diagram alir dengan enam pihak yang ditulis sebagai nama simpul sebenarnya adalah diagram urutan yang belum mengakuinya.

Kalau yang Anda uraikan bukan sebuah prosedur melainkan keadaan-keadaan yang bisa dialami sesuatu, pakailah diagram keadaan. Membedakannya mudah: kalau label simpulnya berupa keadaan seperti «pesanan menunggu» atau «pesanan terkirim», itu mesin keadaan; kalau berupa tindakan seperti «periksa masukan» atau «kirim surel», itu diagram alir.

Lewat empat puluh simpul, sejujurnya, tidak ada diagram yang bisa menyelamatkan keadaan. Entah Anda memecahnya menjadi beberapa diagram yang berbagi satu titik masuk, atau Anda menerima bahwa yang hendak Anda ceritakan terlalu rumit untuk muat dalam satu gambar. Itu sendiri pun sebuah informasi yang berguna.

Jenis diagram lain

Ditulis oleh Dominik Malsch · Terakhir diperbarui: 8 September 2026

Buka editor →