Lewati ke konten utama

Mermaid 11.15.0

Contekan diagram urutan Mermaid

Diagram urutan menampilkan pertukaran pesan antarpeserta seiring waktu. Gunakan diagram alur untuk pekerjaan bercabang atau diagram kelas untuk tipe statis dan hubungan.

Buat dengan Generator diagram urutan →

Mulai cepat

Deklarasikan alias terlebih dahulu untuk mengatur urutan garis hidup, lalu tulis pengirim, panah, penerima, dan teks pesan.

Mermaid
Buka di editor → 
sequenceDiagram
  actor R as Pembaca
  participant S as Layanan pencarian
  R->>+S: Cari panduan
  S-->>-R: Kembalikan hasil

Memuat…

Referensi sintaks

Referensi sintaks
SintaksArti
sequenceDiagram / participant / actor / asDeklarasikan garis hidup dan alias yang mudah dibaca; actor menggunakan simbol orang.
participant A@{ "type": "boundary" }Jenis peserta: boundary, control, entity, database, collections, queue; gunakan participant atau actor untuk garis hidup biasa.
->Garis utuh tanpa kepala panah.
-->Garis putus-putus tanpa kepala panah.
->>Panah utuh.
-->>Panah putus-putus.
<<->>Panah utuh dua arah.
<<-->>Panah putus-putus dua arah.
-xGaris utuh berujung silang.
--xGaris putus-putus berujung silang.
-)Panah terbuka utuh untuk pesan asinkron.
--)Panah terbuka putus-putus untuk pesan asinkron.
-|\Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
--|\Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
-|/Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
--|/Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
/|-Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
/|--Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
\\-Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
\\--Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
-\\Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
--\\Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
-//Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
--//Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
//-Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
//--Varian setengah panah: orientasi serta garis utuh/putus-putus ditampilkan pada contoh.
A->>()B / A()->>B / A()->>()BHubungkan pesan ke pusat garis hidup pengirim atau penerima.
activate / deactivate / ->>+ / -->>-Mulai dan akhiri batang aktivasi; aktivasi bersarang yang seimbang diperbolehkan.
create participant / create actor / destroycreate sebelum pesan masuk pertama; destroy sebelum pesan yang mengakhiri garis hidup.
Note left of / right of / over A,BTempatkan catatan di samping atau melintasi garis hidup. Gunakan <br/> untuk pergantian baris.
loop / alt / else / opt / par / and / critical / option / break / rect / endBlok kontrol ditutup dengan end. rect menerima warna latar; alternatif termasuk dalam blok pembungkusnya.
autonumber / autonumber 10 5Nomori pesan otomatis dengan nilai awal dan kenaikan opsional.
box Color Label / endKelompokkan deklarasi peserta dalam kotak berwarna atau transparan.
link A: Label @ URL / links A: {"Label":"URL"}Pasang satu tautan atau menu JSON pada peserta.
%% / accTitle: / accDescr:Komentar dan deskripsi diagram aksesibel.

Simbol dan alias peserta

Gunakan ID singkat dan alias untuk teks tampilan. Konfigurasi JSON mengubah simbol peserta. Deklarasikan semua garis hidup sebelum pesan agar urutan horizontal dapat diprediksi.

Mermaid
Buka di editor → 
sequenceDiagram
  actor R as Pembaca
  participant B@{ "type": "boundary" }
  participant C@{ "type": "control" }
  participant E@{ "type": "entity" }
  participant D@{ "type": "database" }
  participant L@{ "type": "collections" }
  participant Q@{ "type": "queue" }
  R->>B: Permintaan
  B->>C: Validasi
  C->>E: Baca
  E->>D: Kueri
  D-->>L: Hasil
  L-)Q: Beri tahu

Memuat…

Varian garis, kepala panah, dan setengah panah

Pilih panah sesuai konvensi dokumentasi. Panah terbuka sering menandai pengiriman asinkron. Silang pada pesan biasa adalah penanda visual; destroy secara eksplisit mengakhiri garis hidup.

Mermaid
Buka di editor → 
sequenceDiagram
  participant A as Pengirim
  participant B as Penerima
  A->B: Pesan
  A-->B: Pesan
  A->>B: Pesan
  A-->>B: Pesan
  A<<->>B: Pesan
  A<<-->>B: Pesan
  A-xB: Pesan
  A--xB: Pesan
  A-)B: Pesan
  A--)B: Pesan
  A-|\B: Pesan
  A--|\B: Pesan
  A-|/B: Pesan
  A--|/B: Pesan
  A/|-B: Pesan
  A/|--B: Pesan
  A\\-B: Pesan
  A\\--B: Pesan
  A-\\B: Pesan
  A--\\B: Pesan
  A-//B: Pesan
  A--//B: Pesan
  A//-B: Pesan
  A//--B: Pesan
  A()->>()B: Koneksi tengah

Memuat…

Pembuatan, penghentian, dan aktivasi

Letakkan create tepat sebelum pesan yang memperkenalkan peserta baru. destroy tepat sebelum pesan penghentian. Seimbangkan setiap aktivasi agar pesan berikutnya tidak mewarisi batang yang tidak dimaksudkan.

Mermaid
Buka di editor → 
sequenceDiagram
  participant C as Pengendali
  create participant W as Pekerja
  C->>+W: Mulai pekerjaan
  Note right of W: Proses sementara
  W-->>-C: Pekerjaan selesai
  destroy W
  C-xW: Hentikan proses

Memuat…

Loop, alternatif, dan cabang paralel

Setiap blok ditutup end. else berada dalam alt; and memisahkan cabang par. opt menambahkan satu cabang opsional. critical dapat memuat cabang pemulihan option; break mewakili penghentian luar biasa.

Mermaid
Buka di editor → 
sequenceDiagram
  participant C as Klien
  participant S as Layanan
  loop Coba ulang
    C->>S: Permintaan
    alt Diterima
      S-->>C: Hasil
    else Ditolak
      S-->>C: Kesalahan
    end
  end
  opt Cache ditemukan
    S-->>C: Hasil cache
  end
  par Pencatatan
    S->>S: Catat
  and Metrik
    S->>S: Hitung
  end
  critical Komit
    S->>S: Simpan
  option Kegagalan
    S-->>C: Pulihkan versi
  end
  break Waktu habis
    S-->>C: Hentikan
  end
  rect rgb(230,240,255)
    Note over C,S: Batas peninjauan
  end

Memuat…

Opsi tata letak urutan

Cerminkan aktor di bagian bawah hanya jika diagram cukup panjang. Pembungkusan pesan dan jarak aktor memengaruhi keterbacaan tanpa mengubah urutan pesan.

Mermaid
Buka di editor → 
---
config:
  sequence:
    mirrorActors: false
    wrap: true
    actorMargin: 60
---
sequenceDiagram
  participant R as Pembaca
  participant G as Panduan
  R->>G: Baca referensi

Memuat…

Kesalahan umum

Membiarkan blok terbuka

Tambahkan end untuk setiap blok bersarang.

Sintaks tidak valid — contoh perbaikan di bawah

sequenceDiagram
  loop Coba ulang
    A->>B: Permintaan
Mermaid
Buka di editor → 
sequenceDiagram
  loop Coba ulang
    A->>B: Permintaan
  end

Memuat…

Menggunakan end sebagai teks pesan biasa

Pengurai memperlakukan end secara khusus. Apit kata tersebut dengan tanda kutip atau kurung jika ambigu. Bedakan ID peserta dari kata kunci kontrol.

Keterbatasan

  • Posisi horizontal mengikuti deklarasi dan aturan tata letak; garis hidup tidak dapat diseret bebas.
  • Pesan mengikuti urutan sumber, bukan skala waktu numerik.
  • Menu peserta dan perilaku klik bergantung pada host yang menyematkan diagram.

Pertanyaan yang sering diajukan

Apa perbedaan actor dan participant?
actor menggambar simbol orang; participant biasanya menggambar kotak. Keduanya dapat mengirim dan menerima pesan, dan participant mendukung jenis simbol tambahan.
Bagaimana cara menambahkan panah balasan?
Gunakan -->> untuk panah balasan putus-putus. Tambahkan tanda minus jika pesan juga harus mengakhiri aktivasi.
Bagaimana cara menampilkan pekerjaan bersamaan?
Gunakan par dengan cabang dipisahkan and lalu tutup blok dengan end.