Lewati ke konten utama

Mermaid 11.15.0

Contekan diagram lajur Mermaid

Mermaid tidak memiliki diagram lajur bawaan. Gunakan satu subgraf flowchart per peran sebagai pendekatan lajur. Pilih diagram urutan untuk perpindahan pesan atau architecture-beta untuk kelompok infrastruktur.

Buat dengan Editor diagram alur Mermaid →

Mulai cepat

Buat setiap peran sebagai subgraf bernama lalu hubungkan tindakan lintas peran melalui ID simpul.

Mermaid
Buka di editor → 
flowchart LR
  subgraph author ["Penulis"]
    direction TB
    A["Draf"] --> B["Revisi"]
  end
  subgraph reviewer ["Peninjau"]
    direction TB
    C["Periksa"] --> D["Setujui"]
  end
  A --> C
  C --> B
  B --> D

Memuat…

Referensi sintaks

Referensi sintaks
SintaksArti
flowchart LR / flowchart TBGunakan sintaks flowchart; swimlane bukan kata kunci diagram yang didukung.
subgraph laneId ["Role"] / endKelompokkan tindakan milik satu peran. ID lajur dan ID simpul harus berbeda.
direction TB / direction LRMinta arah lokal. Garis eksternal dapat mengesampingkannya.
A --> B / A -->|Handoff| BHubungkan tindakan lintas lajur dengan ID simpul dan label serah terima opsional.
laneA --> laneB / A ~~~ BGaris subgraf dan tautan tak terlihat dapat memengaruhi urutan tanpa menetapkan koordinat.
style laneId fill:#f5f5f5,stroke:#a1a1a1Beri gaya langsung pada latar dan garis tepi subgraf lajur.
classDef / class A name / A:::nameDefinisikan gaya berulang untuk simpul tindakan dalam lajur.
%% / accTitle: / accDescr:Komentar dan deskripsi aksesibel; sintaks diagram alur lainnya tetap tersedia.

Satu subgraf per tanggung jawab

Nyatakan kepemilikan dengan jelas: setiap tindakan milik satu peran. Gunakan ID lajur untuk pengelompokan dan ID simpul untuk tindakan. Menghubungkan seluruh subgraf berguna untuk serah terima umum sambil menjaga arah lokal.

Mermaid
Buka di editor → 
flowchart LR
  subgraph writer ["Penulis"]
    direction TB
    A["Kerangka"] --> B["Draf"]
  end
  subgraph editor ["Penyunting"]
    direction TB
    C["Peninjauan"] --> D["Setujui akhir"]
  end
  writer --> editor

Memuat…

Garis lintas lajur dan arah lokal

Hubungkan simpul tindakan yang sebenarnya jika ketepatan penting. Garis tersebut dapat membuat subgraf mewarisi arah global. Arah internal adalah permintaan, bukan jaminan orientasi lajur.

Mermaid
Buka di editor → 
flowchart TB
  subgraph requester ["Pemohon"]
    direction LR
    A["Ajukan"] --> B["Tanggapi"]
  end
  subgraph approver ["Pemberi persetujuan"]
    direction LR
    C["Nilai"] --> D["Setujui"]
  end
  A -->|Permintaan| C
  C -->|Perubahan| B
  B --> D

Memuat…

Latar lajur dan gaya tindakan berulang

Gunakan style langsung pada ID subgraf untuk latar lajur. classDef memberi gaya simpul tindakan di dalamnya. Jaga garis tepi dan teks tetap terbaca; warna melengkapi label peran, bukan menggantikannya.

Mermaid
Buka di editor → 
flowchart LR
  subgraph drafting ["Penyusunan draf"]
    A["Tulis"]:::action
  end
  subgraph checking ["Pemeriksaan"]
    B["Peninjauan"]:::action
  end
  A --> B
  style drafting fill:#f5f5f5,stroke:#a1a1a1
  style checking fill:#d3e5ff,stroke:#0070f3
  classDef action fill:#ffffff,stroke:#171717,color:#171717

Memuat…

Jarak tanpa lajur tetap

Perbesar rankSpacing untuk memisahkan serah terima dan nodeSpacing untuk memisahkan tindakan. Mermaid tetap menentukan urutan, lebar lajur, dan posisi simpul. Pecah proses panjang menjadi beberapa diagram.

Mermaid
Buka di editor → 
---
config:
  flowchart:
    nodeSpacing: 40
    rankSpacing: 70
---
flowchart LR
  subgraph drafting ["Penyusunan draf"]
    A["Tulis"]
  end
  subgraph review ["Peninjauan"]
    B["Periksa"]
  end
  A --> B

Memuat…

Kesalahan umum

Memulai dengan kata kunci swimlane

Mermaid tidak mengenali swimlane. Awali dengan flowchart lalu buat subgraf.

Sintaks tidak valid — contoh perbaikan di bawah

swimlane
  Author --> Reviewer
Mermaid
Buka di editor → 
flowchart LR
  subgraph author ["Penulis"]
    A["Draf"]
  end
  subgraph reviewer ["Peninjau"]
    B["Periksa"]
  end
  A --> B

Memuat…

Menganggap semua lajur sama lebar

Ukuran subgraf mengikuti isinya. Garis tak terlihat membantu urutan, tetapi tidak dapat memaksakan kisi tetap.

Keterbatasan

  • Urutan dan lebar lajur hanya dikendalikan secara tidak langsung; tata letak dapat mengurutkan ulang simpul.
  • Koneksi simpul lintas lajur dapat mengesampingkan arah lokal.
  • Proses panjang dengan banyak serah terima cepat menjadi padat.
  • Gunakan architecture-beta untuk kelompok infrastruktur atau diagram urutan untuk pertukaran pesan berurutan; keduanya bukan pengganti lajur bawaan.

Pertanyaan yang sering diajukan

Apakah Mermaid mendukung diagram lajur bawaan?
Tidak. Referensi ini menggunakan subgraf flowchart sebagai pendekatan praktis.
Apakah semua lajur dapat dipaksa sama lebar?
Tidak tersedia pengaturan lajur sama lebar bawaan. Tata letak dan isi subgraf menentukan dimensi.
Kapan diagram urutan lebih jelas?
Gunakan diagram urutan jika fokusnya adalah peserta yang mengirim setiap pesan dan urutannya.