Contekan diagram alur Mermaid

Mulai cepat

Gunakan ID stabil dan apit label tampilan dengan tanda kutip. Bentuk menyampaikan arti; garis menghubungkan ID.

flowchart LR
  D["Susun panduan"] --> R{"Disetujui?"}
  R -->|Ya| P["Terbitkan panduan"]
  R -->|Tidak| D

Referensi sintaks

Bentuk baru dan label dalam tanda kutip

Katalog mencakup seluruh bentuk diagram alur standar dan alias dalam perender 11.15 yang terpasang. Gunakan @{ shape: ... } untuk bentuk baru; notasi kurung lama tetap valid. Apit label yang memuat tanda baca dengan tanda kutip.

flowchart TB
  A@{ shape: sl-rect, label: "Masukkan judul" }
  B@{ shape: doc, label: "Susun dokumen" }
  C@{ shape: diam, label: "Lengkap?" }
  D@{ shape: cyl, label: "Arsipkan" }
  A --> B --> C
  C -->|Ya| D
  C -->|Tidak| A

Gaya, panjang, dan teks garis

Tanda hubung tambahan meminta rentang tata letak minimum lebih panjang. Ujung lingkaran dan silang menyampaikan arti visual, tetapi Mermaid tidak memaksakan maknanya. Tautan tak terlihat memengaruhi tata letak tanpa menggambar garis.

flowchart LR
  A["Kerangka"] -->|Siap| B["Draf"]
  B -.-> C["Peninjauan"]
  C ==> D["Rilis"]
  A ----> D
  B o--o E["Daftar periksa"]
  E x--x D
  C ~~~ E

Pengelompokan dengan arah lokal

Arah dalam subgraf hanya berlaku jika tata letak global dapat mengikutinya. Jika simpul terhubung keluar, Mermaid dapat memakai arah induk. Hubungkan subgraf langsung jika arah lokal penting.

flowchart LR
  subgraph prep ["Persiapan"]
    direction TB
    A["Kerangka"] --> B["Draf"]
  end
  subgraph review ["Peninjauan"]
    direction TB
    C["Periksa"] --> D["Setujui"]
  end
  prep --> review

Kelas, ID garis, dan label Markdown

classDef membuat gaya berulang. Terapkan dengan class atau :::; style langsung menargetkan satu simpul. linkStyle memakai urutan deklarasi mulai nol, sedangkan garis bernama dapat menerima kelas. Label Markdown memberi penekanan tanpa label HTML.

flowchart LR
  A["`Draf **panduan**`"]:::focus e1@--> B["Peninjauan"]
  B --> C["Terbitkan"]
  classDef focus fill:#d3e5ff,stroke:#0070f3,color:#171717
  class B focus
  style C stroke-width:2px
  linkStyle 1 stroke:#0070f3,stroke-width:2px
  classDef edge stroke:#0070f3
  class e1 edge

Jarak dan pemilihan perender

Jarak simpul dan tingkat mengatur tata letak bawaan. Graf besar dapat memakai ELK jika host menyediakan perender opsionalnya. Paket ikon juga perlu didaftarkan; bentuk biasa berfungsi tanpa kedua ekstensi.

---
config:
  flowchart:
    nodeSpacing: 35
    rankSpacing: 60
---
flowchart LR
  A["Tulis"] --> B["Peninjauan"] --> C["Terbitkan"]

Kesalahan umum

flowchart LR
  A[Draft

flowchart LR
  A["Draf"] --> B["Peninjauan"]

Keterbatasan

• Tata letak otomatis menentukan posisi; tautan panjang meminta rentang tingkat, bukan panjang piksel tetap.
• Garis eksternal dapat mengesampingkan arah subgraf.
• Ikon memerlukan paket terdaftar, gambar memerlukan aset yang dapat diakses, dan ELK memerlukan pendaftaran host.

Contekan terkait

• Contekan diagram lajur Mermaid →
• Contekan diagram kelas Mermaid →
• Contekan Mermaid →