Gratis · Tanpa daftar · Mendukung file .mmd

Editor diagram urutan Mermaid

Diagram urutan memperlihatkan siapa berbicara dengan siapa dan dalam urutan apa. Cocok ketika yang penting adalah pertukaran pesan antara beberapa pihak — autentikasi, pembayaran, integrasi antarlayanan. Kalau pesertanya hanya satu dan yang penting percabangannya, diagram alir mengatakan hal yang sama dengan lebih sedikit gangguan.

Buka ini di editor →Baca panduan

Pembayaran kode QR lewat dompet digital

Nilai diagram ini ada pada blok `alt`: ia memperlihatkan bahwa transaksi punya dua akhir yang berbeda, dan bahwa pedagang mengetahui hasilnya bukan dari pembeli melainkan dari penyelenggara switching. Perhatikan juga panah terakhir yang kembali secara asinkron, terpisah dari layar pembeli. Justru itulah yang ditampakkan diagram urutan dan disembunyikan diagram alir.

sequenceDiagram
    autonumber
    participant P as Pembeli
    participant T as Toko
    participant S as Penyelenggara switching
    participant D as Penerbit dompet

    P->>T: Konfirmasi pesanan
    T->>S: Minta kode QR pembayaran
    S-->>T: Kode QR dan nomor transaksi
    T-->>P: Tampilkan kode QR
    P->>D: Pindai dan setujui di aplikasi

    alt Saldo cukup dan dalam batas harian
        D->>S: Pendebetan berhasil
        S-->>T: Pemberitahuan dana masuk
        T->>T: Tandai pesanan sudah dibayar
    else Saldo kurang atau melewati batas
        D->>S: Transaksi ditolak
        S-->>T: Pemberitahuan gagal
        T->>T: Biarkan pesanan menunggu
    end

    T-->>P: Tampilkan halaman hasil

Buka ini di editor

Contoh yang dibahas

1. Dua peserta dan satu pesan

`->>` adalah panah bermata penuh, artinya sebuah pemanggilan. `-->>` putus-putus dan berarti jawaban. Pasangan ini cukup untuk sebagian besar diagram.

sequenceDiagram
    Klien->>API: Buat pesanan
    API-->>Klien: 201 Created

Buka di editor

2. Alias untuk nama yang panjang

`participant X as Nama panjang` memberi pengenal pendek untuk diketik dan nama yang enak dibaca untuk dibaca. Mendeklarasikan peserta di awal juga menetapkan urutan kolomnya; tanpa deklarasi, urutan ditentukan kemunculan pertama.

sequenceDiagram
    participant B as Peramban
    participant L as Layanan pesanan
    participant G as Layanan gudang

    B->>L: POST /pesanan
    L->>G: Cadangkan barang
    G-->>L: Pencadangan dikonfirmasi
    L-->>B: 201 Created

Buka di editor

3. Pengaktifan dan pemanggilan diri sendiri

`activate` dan `deactivate` menggambar batang yang menunjukkan peserta sedang bekerja. Akhiran `+` dan `-` pada panah melakukan hal yang sama dengan ketikan lebih sedikit. Panah dari peserta ke dirinya sendiri berarti pekerjaan internal.

sequenceDiagram
    participant A as API
    participant D as Basis data

    Klien->>+A: GET /faktur/42
    A->>+D: SELECT faktur
    D-->>-A: Baris ditemukan
    A->>A: Hitung PPN
    A-->>-Klien: 200 OK

Buka di editor

4. Alternatif, opsi, dan perulangan

`alt`/`else` adalah jalur yang saling meniadakan, `opt` adalah blok yang boleh tidak terjadi, dan `loop` adalah pengulangan. Ketiganya ditutup dengan `end`, dan melupakannya adalah kesalahan tersering pada jenis ini.

sequenceDiagram
    participant P as Pengguna
    participant A as API
    participant S as Layanan surel

    P->>A: Ajukan pendaftaran
    alt Alamat sudah terdaftar
        A-->>P: 409 Conflict
    else Alamat masih kosong
        A-->>P: 201 Created
        A->>S: Kirim surel verifikasi
        loop Maksimal 3 percobaan
            S->>S: Ulangi bila pengiriman gagal
        end
    end
    opt Pengguna bersedia menerima buletin
        A->>S: Tambahkan ke daftar
    end

Buka di editor

5. Catatan dan pemrosesan paralel

`par` memperlihatkan cabang yang berjalan bersamaan, sesuatu yang hanya bisa disiratkan diagram alir tetapi tidak pernah dinyatakannya. Catatan adalah tempat yang tepat untuk rincian yang tidak muat di label pesan.

sequenceDiagram
    participant L as Layanan pesanan
    participant F as Penagihan
    participant K as Logistik

    Note over L: Pesanan sudah lunas

    par Beri tahu penagihan
        L->>F: Terbitkan faktur
        F-->>L: Faktur 2026/0431
    and Beri tahu logistik
        L->>K: Siapkan pengiriman
        K-->>L: Nomor resi dibuat
    end

    Note over F,K: Masing-masing berjalan dengan iramanya sendiri

Buka di editor

Ringkasan sintaks diagram urutan

Yang perlu diingat adalah panahnya, dan panah itu hanya milik jenis ini: `-->` dari diagram alir di sini berarti lain, dan `->>` dari sini adalah kesalahan di diagram kelas.

Sintaks	Arti
sequenceDiagram	Membuka diagram. Peka huruf besar-kecil: `sequencediagram` tidak jalan.
participant A	Mendeklarasikan peserta dan menetapkan posisinya.
participant A as Nama	Pengenal pendek dengan nama yang enak dibaca.
actor A	Seperti participant, tetapi menggambar figur orang.
A->>B: teks	Pesan bermata penuh — sebuah pemanggilan.
A-->>B: teks	Garis putus-putus — sebuah jawaban.
A-)B: teks	Mata panah terbuka — pesan asinkron.
A->>A: teks	Peserta memanggil dirinya sendiri.
activate A / deactivate A	Menandai rentang waktu A sedang bekerja.
A->>+B: / B-->>-A:	Hal yang sama dalam bentuk singkat, langsung pada panahnya.
alt syarat ... else ... end	Jalur yang saling meniadakan.
opt syarat ... end	Blok yang boleh tidak terjadi.
loop teks ... end	Pengulangan.
par ... and ... end	Cabang yang berjalan bersamaan.
Note over A,B: teks	Catatan di atas satu peserta atau lebih. Ada juga `Note left of` dan `Note right of`.
autonumber	Menomori pesan secara otomatis.

Enam kesalahan yang merusak diagram urutan

Direproduksi pada Mermaid 11.12.2. Yang pertama jauh paling sering terjadi, dan pesannya termasuk yang paling buruk dalam menunjukkan letak masalah.

Yang Anda lihat

Parse error yang menunjuk baris terakhir diagram

Mengapa

Ada blok yang dibuka dan tidak pernah ditutup. `alt`, `opt`, `loop`, dan `par` masing-masing menuntut `end`-nya sendiri. Mermaid melaporkan kesalahan di tempat masukannya habis, jadi nomor barisnya menunjuk akhir berkas dan bukan blok yang menganga. Dengan dua blok bersarang, ini benar-benar sulit ditemukan.

Solusi

Hitung blok yang dibuka dan `end` yang sudah Anda tulis. Kalau kesalahannya menunjuk baris terakhir, hampir selalu inilah sebabnya.

Salah

sequenceDiagram
    Klien->>API: Permintaan
    alt Semua beres
        API-->>Klien: 200 OK

Benar

sequenceDiagram
    Klien->>API: Permintaan
    alt Semua beres
        API-->>Klien: 200 OK
    end

Yang Anda lihat

No diagram type detected matching given configuration

Mengapa

Huruf besar-kecil kata kuncinya salah. `sequenceDiagram` jalan; `sequencediagram` dan `SequenceDiagram` tidak. Mermaid peka huruf besar-kecil pada semua kata kuncinya.

Solusi

Huruf D besar, sisanya kecil.

Salah

sequencediagram
    Klien->>API: Halo

Benar

sequenceDiagram
    Klien->>API: Halo

Yang Anda lihat

Tergambar, tetapi pesannya keluar tanpa teks

Mengapa

Tidak ada teks setelah titik dua. Terukur: Mermaid tidak menolaknya — ia menggambar pesannya dengan label kosong, dan panahnya tinggal tanpa penjelasan. Yang benar-benar gagal adalah menghilangkan titik duanya sama sekali: `Klien->>API` saja memberi `Expecting 'TXT', got 'NEWLINE'`. Jadi titik duanya wajib dan teksnya tidak, persis kebalikan dari dugaan.

Solusi

Tulis sesuatu setelah titik dua, satu kata pun jadi. Panah tanpa label hampir tidak pernah yang Anda maksudkan.

Salah

sequenceDiagram
    Klien->>API:
    API-->>Klien: 200

Benar

sequenceDiagram
    Klien->>API: Buat pesanan
    API-->>Klien: 200

Yang Anda lihat

Parse error setelah `alt` dengan syarat yang panjang

Mengapa

Ada pindah baris di dalam syarat blok. Syarat `alt`, `opt`, atau `loop` harus muat dalam satu baris; kalau Anda potong, separuh keduanya ditafsirkan sebagai pesan dan tidak cocok ke mana pun.

Solusi

Pertahankan syaratnya dalam satu baris. Kalau terlalu panjang, ringkas dan pindahkan rinciannya ke catatan.

Salah

sequenceDiagram
    alt Pembeli punya saldo yang
    mencukupi di rekeningnya
        A-->>B: OK
    end

Benar

sequenceDiagram
    alt Saldo pembeli mencukupi
        A-->>B: OK
    end
    Note over A,B: Saldo diuji terhadap batas harian

Yang Anda lihat

Tergambar, tetapi muncul peserta yang tidak Anda deklarasikan

Mengapa

Salah ketik pada nama peserta. Mermaid membuat peserta begitu ia pertama kali menemui namanya, jadi `Pengiriman` dan `Pengirman` adalah dua kolom terpisah dan tidak ada yang memperingatkan. Dalam bahasa Indonesia, kata berimbuhan yang panjang adalah sumber tersering: makin panjang katanya, makin gampang satu huruf bergeser.

Solusi

Deklarasikan peserta dengan `participant` di awal. Itu tidak mencegah salah ketik, tetapi memperlihatkan nama mana yang benar, dan kolom berlebih langsung terlihat.

Salah

sequenceDiagram
    Pesanan->>Pengiriman: Siapkan paket
    Pengirman-->>Pesanan: Paket siap

Benar

sequenceDiagram
    participant P as Pesanan
    participant K as Pengiriman
    P->>K: Siapkan paket
    K-->>P: Paket siap

Yang Anda lihat

Tergambar, tetapi urutan kolomnya bukan yang Anda maksud

Mengapa

Anda tidak mendeklarasikan pesertanya. Tanpa deklarasi, urutan ditentukan kemunculan pertama tiap nama, jadi satu pesan yang ditambahkan di bagian atas diagram bisa menata ulang seluruh kolom dan membuat panah saling menyilang. Diagramnya tetap benar, tetapi jauh lebih sulit dibaca.

Solusi

Deklarasikan semua peserta di bagian kepala, dalam urutan yang Anda inginkan.

Salah

sequenceDiagram
    Bank-->>Switching: Berhasil didebet
    Pembeli->>Toko: Konfirmasi pesanan
    Toko->>Switching: Buat transaksi

Benar

sequenceDiagram
    participant Pembeli
    participant Toko
    participant Switching
    participant Bank
    Pembeli->>Toko: Konfirmasi pesanan
    Toko->>Switching: Buat transaksi
    Switching->>Bank: Teruskan
    Bank-->>Switching: Berhasil didebet

Catatan tentang penggambaran

Diukur pada Mermaid 11.12.2, versi yang dipakai situs ini. Diagram urutan berperilaku berbeda dari yang lain dalam dua hal yang konkret.

Lebarnya ditentukan peserta, bukan pesan

Terukur: dua peserta memberi viewBox selebar 450 piksel, enam peserta memberi 1250, jadi sekitar 200 piksel untuk setiap kolom tambahan, terlepas dari isi pesannya. Pesan hanya menambah tinggi, sekitar 46 piksel per pesan. Dengan satu catatan: kalau label pesan lebih lebar daripada lebar minimum kolom, ia memang melebarkan diagram — pasangan peserta yang sama tumbuh dari 450 menjadi 603 piksel semata-mata karena teks satu pesan memanjang. Label bahasa Indonesia terukur 228 piksel berbanding 204 piksel bahasa Inggris untuk makna yang sama, jadi hal itu terjadi lebih cepat di sini.

Satu-satunya jenis dengan titik asal viewBox negatif

Diagram urutan keluar dengan viewBox yang dimulai dari `-50 -10`, bukan `0 0`. Itu bukan cacat: Mermaid menyisihkan margin itu untuk kotak peserta. Ini baru penting kalau Anda mengolah SVG-nya dengan perkakas sendiri, karena setiap perhitungan yang menganggap titik asalnya nol akan memotong kolom pertama.

Di sini ekspor PNG tepat

Berbeda dari diagram alir serta diagram kelas, keadaan, dan ER, diagram urutan menggambar labelnya sebagai teks SVG biasa, bukan di dalam `<foreignObject>`. Karena itu ia bisa diraster langsung: PNG hasil ekspor sesuai dengan yang di layar, tanpa penggambaran ulang di tengah jalan dan tanpa pergeseran tata huruf.

Peserta yang dideklarasikan tetapi tidak dipakai tetap digambar

Sebuah `participant` yang tidak mengirim maupun menerima pesan apa pun tetap muncul di diagram dengan kolom kosong. Kadang itu disengaja, untuk menunjukkan pihak yang ada tetapi tidak ikut dalam alur ini. Lebih sering ia adalah sisa dari peserta yang pesan terakhirnya dihapus tanpa menghapus deklarasinya.

Tema mengubah warna, tidak pernah mengubah geometri

Diagram yang sama pada tema terang dan gelap memberi viewBox yang identik, jadi kolom tidak bergeser dan blok tidak berubah ukuran saat tema berganti.

Kapan diagram lain lebih cocok

Kalau pesertanya hanya satu, tidak ada urutan yang perlu ditunjukkan. Diagram dengan satu kolom dan panah ke dirinya sendiri sebenarnya diagram alir yang ditulis dengan cara yang tidak nyaman.

Kalau Anda ingin menguraikan keadaan yang dilalui sesuatu, bukan percakapan antara beberapa pihak, pakailah diagram keadaan. Tandanya jelas: begitu Anda menulis pesan yang sama berulang-ulang dengan syarat yang berbeda, yang ada di depan Anda adalah mesin keadaan.

Dan kalau pertukarannya melewati lima belas pesan, pecahlah. Diagram urutan dengan enam puluh pesan secara teknis benar dan secara manusiawi tidak terpakai; hampir selalu ia lebih enak dibaca sebagai tiga diagram, satu per tahap, yang dihubungkan sebuah catatan.

Jenis diagram lain

Ditulis oleh Dominik Malsch · Terakhir diperbarui: 8 September 2026

Buka editor →