Gratis · Tanpa daftar · Mendukung file .mmd

Editor diagram keadaan Mermaid

Diagram keadaan memperlihatkan keadaan apa saja yang bisa dialami sesuatu dan apa yang memindahkannya dari satu keadaan ke keadaan lain. Cocok ketika pokoknya punya daur hidup — sebuah pesanan, sebuah faktur, sebuah langganan — dan pertanyaan menariknya adalah perpindahan mana yang diperbolehkan. Kalau Anda menguraikan langkah yang harus dikerjakan, bukan keadaan untuk ditempati, yang Anda perlukan adalah diagram alir.

Buka ini di editor →Baca panduan

Daur hidup sebuah pesanan daring

Inilah kasus di mana mesin keadaan memang layak dipakai: setelah pengiriman ada tiga akhir yang saling meniadakan, dan dua di antaranya kembali ke belakang. Perhatikan bahwa setiap pengenal keadaan dideklarasikan dengan `state "Label" as id`. Dalam bahasa Indonesia itu bukan gaya-gayaan melainkan keharusan, karena alasan yang dijelaskan di bagian kesalahan.

stateDiagram-v2
    direction LR

    state "Draf" as draf
    state "Menunggu pembayaran" as menungguBayar
    state "Siap dikirim" as siapKirim
    state "Dalam pengiriman" as dalamKirim
    state "Sudah diterima" as diterima
    state "Pengembalian diajukan" as pengembalian

    [*] --> draf
    draf --> menungguBayar: dipesan
    menungguBayar --> siapKirim: pembayaran diterima
    menungguBayar --> [*]: kedaluwarsa setelah 24 jam
    siapKirim --> dalamKirim: diambil kurir
    dalamKirim --> diterima: ditandatangani penerima
    diterima --> pengembalian: dalam masa pengembalian
    pengembalian --> menungguBayar: dana dikembalikan
    diterima --> [*]: masa pengembalian lewat

Buka ini di editor

Contoh yang dibahas

1. Mesin keadaan terkecil

`[*]` adalah titik masuk sekaligus titik keluar: yang mana bergantung pada sisi mana dari panah ia berada. Inilah rangka minimum yang layak digambar.

stateDiagram-v2
    [*] --> Aktif
    Aktif --> Ditutup
    Ditutup --> [*]

Buka di editor

2. Perpindahan yang punya nama

Teks setelah titik dua menyebut peristiwa yang memicu perpindahan. Itulah bagian yang membuat diagramnya berguna: tanpa itu Anda hanya punya daftar keadaan dan tidak punya aturan apa pun.

stateDiagram-v2
    [*] --> BelumDibayar
    BelumDibayar --> SudahDibayar: penagihan berhasil
    BelumDibayar --> Kedaluwarsa: melewati tenggat
    SudahDibayar --> Dikirim: keluar dari gudang
    Dikirim --> Diterima: ditandatangani penerima
    Diterima --> [*]
    Kedaluwarsa --> [*]

Buka di editor

3. Label yang enak dibaca dengan pengenal yang aman

Dalam bahasa Indonesia hampir tidak ada nama keadaan yang muat dalam satu kata, dan spasi di dalam pengenal merusaknya diam-diam. `state "Label" as id` menyelesaikannya sekali untuk selamanya: labelnya enak dibaca, pengenalnya aman.

stateDiagram-v2
    state "Menunggu pembayaran" as menungguBayar
    state "Siap untuk dikirim" as siapKirim
    state "Sedang dalam perjalanan" as dalamPerjalanan

    [*] --> menungguBayar
    menungguBayar --> siapKirim: pembayaran dikonfirmasi
    siapKirim --> dalamPerjalanan: diambil kurir
    dalamPerjalanan --> [*]

Buka di editor

4. Keadaan majemuk dan titik pilihan

Keadaan majemuk memuat mesin keadaannya sendiri: pakailah ketika satu tahap punya kehidupan internal yang berarti. `<<choice>>` adalah percabangan bersyarat, dan harus dideklarasikan sebelum perpindahan yang memakainya.

stateDiagram-v2
    state pemeriksaan <<choice>>

    [*] --> SedangDiproses

    state SedangDiproses {
        [*] --> Pengambilan
        Pengambilan --> Pengemasan: barang sudah diambil
        Pengemasan --> [*]
    }

    SedangDiproses --> pemeriksaan
    pemeriksaan --> Lolos: lulus kendali mutu
    pemeriksaan --> Cacat: ditemukan cacat
    Lolos --> [*]
    Cacat --> [*]

Buka di editor

5. Kawasan yang berjalan bersamaan

Dua tanda hubung pada baris tersendiri membagi keadaan majemuk menjadi kawasan yang aktif serentak. Inilah satu-satunya hal yang bisa dilakukan diagram keadaan dan benar-benar tidak bisa dilakukan diagram alir.

stateDiagram-v2
    [*] --> Pendaftaran

    state Pendaftaran {
        [*] --> SurelBelumTerverifikasi
        SurelBelumTerverifikasi --> SurelTerverifikasi: tautan diklik
        --
        [*] --> ProfilKosong
        ProfilKosong --> ProfilLengkap: formulir dikirim
    }

    Pendaftaran --> Aktif: keduanya selesai
    Aktif --> [*]

Buka di editor

Ringkasan sintaks diagram keadaan

Pakailah `stateDiagram-v2`, bukan `stateDiagram`. Keduanya tergambar, tetapi v2 adalah mesin tata letak yang masih dikembangkan dan menangani keadaan majemuk serta paralel dengan jelas lebih baik.

Sintaks	Arti
stateDiagram-v2	Membuka diagram. `stateDiagram` masih jalan tetapi memakai tata letak lama.
[*] --> A	Keadaan awal — titik masuk.
A --> [*]	Keadaan akhir.
A --> B	Perpindahan tanpa nama.
A --> B: peristiwa	Perpindahan berlabel peristiwa yang memicunya.
state "Label" as id	Label yang enak dibaca dengan pengenal tanpa spasi.
state A { ... }	Keadaan majemuk, dengan mesinnya sendiri di dalamnya.
--	Di dalam keadaan majemuk, ia membaginya menjadi kawasan paralel.
state x <<choice>>	Titik percabangan bersyarat.
state f <<fork>> / <<join>>	Memecah menjadi perpindahan paralel lalu menyatukannya kembali.
note right of A: teks	Menambahkan catatan. Ada juga `note left of`.
direction LR	Menata mesin dari kiri ke kanan alih-alih dari atas ke bawah.

Enam kesalahan yang merusak diagram keadaan

Direproduksi pada Mermaid 11.12.2. Empat yang pertama menghentikan penggambaran. Dua yang terakhir lebih buruk: keduanya tergambar tanpa berkedip dan mengembalikan diagram yang tidak berarti seperti yang Anda tulis.

Yang Anda lihat

Tergambar, tetapi satu keadaan menjadi beberapa kotak

Mengapa

Ada spasi di dalam pengenal keadaan. Dalam bahasa Indonesia inilah kesalahan yang paling mudah dibuat, karena hampir tidak ada nama keadaan kita yang muat dalam satu kata. Mermaid tidak menolaknya, dan juga tidak memperlakukan sisanya sebagai keterangan: ia membuat satu kotak terpisah untuk setiap kata. Terukur dengan membaca pengenal yang dihasilkan — `[*] --> Menunggu pembayaran` menghasilkan dua keadaan, `Menunggu` dan `pembayaran`, dan hanya yang pertama tersambung ke panah; sisanya menggantung tanpa sambungan. Diagramnya melebar diam-diam. Mekanisme keterangan itu memang ada, tetapi ia menuntut titik dua: `menungguBayar: menunggu dana masuk`.

Solusi

Deklarasikan keadaan dengan `state "Label" as id` dan selalu rujuk melalui pengenalnya.

Salah

stateDiagram-v2
    [*] --> Menunggu pembayaran
    Menunggu pembayaran --> Ditutup

Benar

stateDiagram-v2
    state "Menunggu pembayaran" as menungguBayar
    [*] --> menungguBayar
    menungguBayar --> Ditutup

Yang Anda lihat

Parse error yang berakhir dengan: got 'INVALID'

Mengapa

Ada tanda hubung di dalam pengenal keadaan. Nama bertanda hubung terpikir dengan sendirinya ketika ingin menghindari spasi — `sedang-diproses`, `pra-disetujui` — tetapi tanda hubung terbaca sebagai awal panah perpindahan.

Solusi

Pakai satu kata atau garis bawah untuk pengenalnya, dan taruh teks yang enak dibaca di label berkutip.

Salah

stateDiagram-v2
    [*] --> sedang-diproses
    sedang-diproses --> Ditutup

Benar

stateDiagram-v2
    state "Sedang diproses" as sedangDiproses
    [*] --> sedangDiproses
    sedangDiproses --> Ditutup

Yang Anda lihat

Parse error di dalam keadaan majemuk

Mengapa

Keadaan majemuk yang dibuka dengan `{` dan tidak pernah ditutup. Kurung kurawal penutup harus berada pada baris tersendiri.

Solusi

Tutup bloknya.

Salah

stateDiagram-v2
    [*] --> Luar
    state Luar {
        [*] --> Dalam

Benar

stateDiagram-v2
    [*] --> Luar
    state Luar {
        [*] --> Dalam
    }

Yang Anda lihat

Lexical error on line N. Unrecognized text.

Mengapa

Pemisah kawasan paralel ditulis dengan jumlah tanda hubung yang keliru. Di dalam keadaan majemuk, pada baris tersendiri, jumlahnya tepat dua. Tiga tanda hubung adalah token yang sama sekali berbeda.

Solusi

Pakai tepat `--`.

Salah

stateDiagram-v2
    state Keduanya {
        [*] --> A
        ---
        [*] --> B
    }

Benar

stateDiagram-v2
    state Keduanya {
        [*] --> A
        --
        [*] --> B
    }

Yang Anda lihat

Parse error on line 1 yang berakhir dengan: got 'ID'

Mengapa

Akhiran versi yang tidak ada. Yang ada hanya `stateDiagram` dan `stateDiagram-v2`, tidak ada yang lain: `-v3` gugur di baris pertama.

Solusi

Pakai `stateDiagram-v2`.

Salah

stateDiagram-v3
    [*] --> Draf

Benar

stateDiagram-v2
    [*] --> Draf

Yang Anda lihat

Tergambar, tetapi titik pilihan digambar sebagai keadaan biasa

Mengapa

Deklarasi `<<choice>>` datang setelah perpindahan yang memakainya. Mermaid membuat keadaan begitu ia pertama kali menemuinya, dan stereotipe yang ditambahkan belakangan tidak mengubah yang sudah terbentuk.

Solusi

Deklarasikan keadaan semu sebelum perpindahan yang merujuknya.

Salah

stateDiagram-v2
    [*] --> pemeriksaan
    pemeriksaan --> Lolos
    pemeriksaan --> Cacat
    state pemeriksaan <<choice>>

Benar

stateDiagram-v2
    state pemeriksaan <<choice>>
    [*] --> pemeriksaan
    pemeriksaan --> Lolos
    pemeriksaan --> Cacat

Catatan tentang penggambaran

Diukur pada Mermaid 11.12.2, versi yang dipakai situs ini.

Di sinilah spasi dalam pengenal gagal tanpa suara

Perbandingan antarjenis layak diketahui, karena kelalaian yang sama dihukum dengan sangat berbeda. Pada diagram alir, spasi di dalam pengenal simpul menghasilkan Parse error dan Anda langsung tahu. Pada diagram keadaan, tidak ada apa-apa: diagramnya tergambar dan satu keadaan menjadi satu kotak per kata. Terukur: `[*] --> Menunggu pembayaran` yang disusul `Menunggu pembayaran --> Dibatalkan` keluar selebar 256 piksel dengan tiga kotak — `Menunggu`, `pembayaran`, dan `Dibatalkan` — padahal Anda memaksudkan dua. Itulah bedanya kesalahan yang memberi tahu dengan kesalahan yang membisu. Karena dalam bahasa Indonesia hampir tidak ada nama keadaan yang muat dalam satu kata, satu-satunya pertahanan yang nyata adalah menulis `state "…" as id` sebagai kebiasaan.

Tinggi bertambah sekitar 114 piksel per keadaan

Terukur: tiga keadaan memberi viewBox sekitar 91×348, empat puluh keadaan memberi 100×4566 — kira-kira 114 piksel per keadaan. Seperti pada diagram alir, lebarnya nyaris tidak bergerak: mesin keadaan tumbuh ke bawah. Kalau daur hidupnya panjang dan sedikit bercabang, menaruh `direction LR` di dalam diagram adalah penyelesaian yang lazim.

stateDiagram maupun stateDiagram-v2 sama-sama tergambar — dan justru itu jebakannya

Sering terbaca bahwa «tanpa `stateDiagram-v2` tidak ada yang tergambar». Pada 11.12.2 itu tidak benar: kedua kata kunci tergambar tanpa kesalahan. Yang berbeda adalah mutu tata letaknya, terutama pada keadaan majemuk dan paralel, dan ketika memakai yang lama tidak ada peringatan apa pun yang muncul. Kalau sebuah keadaan majemuk terlihat berdesakan atau panahnya memutar dengan aneh, lihat dulu dengan kata kunci mana Anda membuka diagramnya sebelum mulai menulis ulang.

Label berupa HTML, jadi ekspor PNG menggambar ulang

Seperti pada diagram alir, kelas, dan ER, label keadaan pun digambar di dalam `<foreignObject>` pada SVG. Karena peramban menolak merasterkannya ke atas kanvas, ekspor PNG situs ini lebih dulu menggambar ulang diagramnya dengan label teks SVG biasa. PNG-nya keluar benar dan berukuran penuh; tata hurufnya sedikit sekali berbeda dari yang di layar.

Tema mengubah warna, tidak pernah mengubah geometri

Tema terang dan gelap menghasilkan viewBox yang sama untuk sumber yang sama, jadi mesin keadaan tidak tertata ulang ketika temanya berganti.

Kapan diagram lain lebih cocok

Kalau label Anda berupa tindakan — periksa, kirim, coba lagi — Anda sedang menguraikan proses dan bukan daur hidup, dan pilihan yang jujur adalah diagram alir. Tandanya paling jelas ketika Anda tidak bisa menjawab pertanyaan «benda yang sedang berada dalam keadaan ini apa?».

Kalau beberapa komponen masing-masing punya daur hidup sendiri dan yang menarik justru interaksinya, satu diagram keadaan per komponen ditambah satu diagram urutan untuk interaksinya mengalahkan satu mesin raksasa tunggal.

Kalau setiap keadaan tersambung ke setiap keadaan lain, diagramnya akan jadi kusut bagaimanapun Anda menggambarnya. Biasanya itu berarti hal-hal yang Anda daftarkan sebagai keadaan sebenarnya adalah penanda yang bebas berpadu; kalau begitu, tabel kombinasi yang sah mengatakan jauh lebih banyak daripada sebuah gambar.

Jenis diagram lain

Ditulis oleh Dominik Malsch · Terakhir diperbarui: 8 September 2026

Buka editor →