Basic definition
Diagram alur terdiri dari simpul (bentuk geometris) dan garis penghubung (panah atau garis). Kode Mermaid mendefinisikan cara pembuatan simpul dan garis penghubung, serta mendukung berbagai jenis panah, panah multiarah, dan tautan bebas dengan subgraf.
Peringatan Jika Anda menggunakan kata "end" pada simpul diagram alur, tuliskan huruf awal atau seluruh kata dalam huruf kapital (misalnya: "End" atau "END"), memasukkan "end" seluruhnya dalam huruf kecil akan menyebabkan diagram alur error.
Peringatan Jika Anda menghubungkan simpul diagram alur menggunakan huruf "o" atau "x" sebagai huruf awal, tambahkan satu spasi sebelum huruf tersebut atau tuliskan huruf itu dalam huruf kapital (misalnya: "dev--- ops", "dev---Ops").
Sebuah simpul (bawaan)
Salin
Sematkan
---
title: Node
---
flowchart LR
id
id adalah konten yang ditampilkan di dalam kotak.
Sintaks pembuatan diagram alur, selain menggunakan flowchart, Anda juga dapat menggunakan graph.
Sebuah simpul dengan teks
Anda juga dapat menetapkan teks yang berbeda dari id untuk kotak. Jika operasi ini dilakukan beberapa kali, sistem akan menggunakan teks yang terakhir ditentukan untuk simpul tersebut. Selain itu, jika garis penghubung didefinisikan kemudian untuk simpul tersebut, definisi teks dapat dihilangkan; saat merender kotak, teks yang telah didefinisikan sebelumnya akan digunakan.
Salin
Sematkan
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Teks Unicode
Bungkus teks Unicode dengan tanda kutip ganda.
Salin
Sematkan
flowchart LR
id["This ❤ Unicode"]
Format Markdown
Bungkus teks Markdown dengan tanda kutip ganda dan backtick
Salin
Sematkan
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Arah
Mendeklarasikan arah diagram alur
Menyatakan bahwa diagram alur disusun dari atas ke bawah (TD atau TB)
Salin
Sematkan
flowchart TD
Start --> Stop
Arah diagram alur meliputi:
- TB - dari atas ke bawah
- TD - dari atas ke bawah (sama dengan dari atas ke bawah)
- BT - dari bawah ke atas
- RL - dari kanan ke kiri
- LR - dari kiri ke kanan
Bentuk simpul
Persegi panjang bersudut tumpul
Salin
Sematkan
flowchart LR
id1(This is the text in the box)
Bentuk stadion
Salin
Sematkan
flowchart LR
id1([This is the text in the box])
Subproses
Salin
Sematkan
flowchart LR
id1[[This is the text in the box]]
Basis data
Salin
Sematkan
flowchart LR
id1[(Database)]
Lingkaran
Salin
Sematkan
flowchart LR
id1((This is the text in the circle))
Bentuk asimetris
Salin
Sematkan
flowchart LR
id1>This is the text in the box]
Belah ketupat
Salin
Sematkan
flowchart LR
id1{This is the text in the box}
Segi enam
Salin
Sematkan
flowchart LR
id1{{This is the text in the box}}
Jajaran genjang
Salin
Sematkan
flowchart TD
id1[/This is the text in the box/]
Jajaran genjang terbalik
Salin
Sematkan
flowchart TD
id1[\This is the text in the box\]
Trapesium
Salin
Sematkan
flowchart TD
A[/ProcessOn\]
Trapesium terbalik
Salin
Sematkan
flowchart TD
B[\ProcessOn/]
Lingkaran ganda
Salin
Sematkan
flowchart TD
id1(((This is the text in the circle)))
Ekstensi bentuk simpul diagram alur Mermaid
Mermaid memperkenalkan 30 bentuk baru untuk meningkatkan fleksibilitas dan presisi pembuatan diagram alur. Bentuk-bentuk baru ini menyediakan lebih banyak opsi untuk secara visual merepresentasikan proses, keputusan, peristiwa, penyimpanan data, serta elemen lain dalam diagram alur, sehingga meningkatkan kejelasan dan makna semantik.
Sintaks baru untuk definisi bentuk
Mermaid kini mendukung sintaks umum untuk mendefinisikan jenis bentuk, guna mengakomodasi bentuk yang semakin banyak. Sintaks ini memungkinkan Anda menentukan bentuk tertentu untuk simpul dengan format yang jelas dan fleksibel.
Salin
Sematkan
A@{ shape: rect }
Sintaks ini membuat simpul A sebagai persegi panjang. Cara renderingnya sama dengan [A] atau A.
Daftar lengkap bentuk simpul
Berikut adalah daftar lengkap bentuk simpul yang baru diperkenalkan beserta makna, singkatan, dan aliasnya:
| Nama semantik | Sintaks grafis | Singkatan sintaks | Alternatif sintaks | Deskripsi terperinci |
|---|---|---|---|---|
| Kartu | Notched Rectangle | notch-rect | card, notched-rectangle | Merepresentasikan sebuah kartu |
| Sortir | Hourglass | hourglass | collate | Merepresentasikan operasi penyortiran |
| Tautan komunikasi | Lightning Bolt | bolt | com-link, lightning-bolt | Tautan komunikasi |
| Komentar | Curly Brace | brace | brace-l, comment | Menambahkan komentar |
| Komentar di sisi kanan | Curly Brace | brace-r | Menambahkan komentar | |
| Komentar dengan kurung kurawal di kedua sisi | Curly Braces | braces | Menambahkan komentar | |
| Input atau output data | Lean Right | lean-r | in-out, lean-right | Merepresentasikan input atau output |
| Input atau output data | Lean Left | lean-l | lean-left, out-in | Merepresentasikan output atau input |
| Basis data | Cylinder | cyl | cylinder, database, db | Penyimpanan basis data |
| Keputusan | Diamond | diam | decision, diamond, question | Langkah keputusan |
| Penundaan | Half-Rounded Rectangle | delay | half-rounded-rectangle | Merepresentasikan penundaan |
| Penyimpanan akses langsung | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Penyimpanan akses langsung |
| Penyimpanan disk | Lined Cylinder | lin-cyl | disk, lined-cylinder | Penyimpanan disk |
| Tampilan | Curved Trapezoid | curv-trap | curved-trapezoid, display | Merepresentasikan informasi yang ditampilkan pada perangkat seperti layar, terminal, dan lain-lain |
| Pemrosesan terpisah | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Bentuk pemrosesan terpisah |
| Dokumen | Document | doc | document | Merepresentasikan sebuah dokumen |
| Peristiwa | Rounded Rectangle | rounded | event | Merepresentasikan sebuah peristiwa |
| Ekstraksi | Triangle | tri | extract, triangle | Proses ekstraksi |
| Percabangan/penggabungan | Filled Rectangle | fork | join | Percabangan atau penggabungan dalam diagram alur |
| Penyimpanan internal | Window Pane | win-pane | internal-storage, window-pane | Penyimpanan internal |
| Titik koneksi | Filled Circle | f-circ | filled-circle, junction | Titik koneksi |
| Dokumen dengan garis | Lined Document | lin-doc | lined-document | Dokumen dengan garis |
| Proses garis/bayangan | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Bentuk proses dengan garis |
| Batas loop | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Langkah batas loop |
| Berkas manual | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Operasi berkas manual |
| Input manual | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Langkah input manual |
| Operasi manual | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Merepresentasikan sebuah tugas manual |
| Multi-dokumen | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Multi-proses | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Bentuk tidak beraturan | Odd | odd | Bentuk tidak beraturan | |
| Pita kertas | Flag | flag | paper-tape | Pita kertas |
| Kondisi persiapan | Hexagon | hex | hexagon, prepare | Langkah persiapan atau kondisi |
| Tindakan prioritas | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Tindakan prioritas |
| Proses | Rectangle | rect | proc, process, rectangle | Bentuk pemrosesan standar |
| Mulai | Circle | circle | circ | Titik awal |
| Mulai | Small Circle | sm-circ | small-circle, start | Titik awal lingkaran kecil |
| Berhenti | Double Circle | dbl-circ | double-circle | Merepresentasikan titik berhenti |
| Berhenti | Framed Circle | fr-circ | framed-circle, stop | Merepresentasikan titik berhenti |
| Menyimpan data | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Menyimpan data |
| Subproses | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Subproses, subrutin |
| Ringkasan | Crossed Circle | cross-circ | crossed-circle, summary | Ringkasan |
| Dokumen bertag | Tagged Document | tag-doc | tagged-document | Dokumen bertag |
| Proses terstandar | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Titik akhir | Stadium | stadium | pill, terminal | Titik akhir |
| Blok teks | Text Block | text | Blok teks |
Berikut adalah contoh kode diagram alur yang menggunakan bentuk yang baru diperkenalkan:
Salin
Sematkan
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
Proses
Salin
Sematkan
flowchart TD
A@{ shape: rect, label: "This is a process" }
Peristiwa
Salin
Sematkan
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Subproses
Salin
Sematkan
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Basis data (silinder)
Salin
Sematkan
flowchart TD
A@{ shape: cyl, label: "Database" }
Mulai (lingkaran)
Salin
Sematkan
flowchart TD
A@{ shape: circle, label: "Start" }
Bentuk tidak beraturan
Salin
Sematkan
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Keputusan (belah ketupat)
Salin
Sematkan
flowchart TD
A@{ shape: diamond, label: "Decision" }
Kondisi persiapan (segi enam)
Salin
Sematkan
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Input/output data (miring ke kanan)
Salin
Sematkan
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Input/output data (miring ke kiri)
Salin
Sematkan
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Tindakan prioritas (trapesium)
Salin
Sematkan
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Operasi manual (trapesium terbalik)
Salin
Sematkan
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Berhenti (lingkaran ganda)
Salin
Sematkan
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Blok teks
Salin
Sematkan
flowchart TD
A@{ shape: text, label: "This is a text block" }
Kartu (persegi panjang berlekuk)
Salin
Sematkan
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Proses dengan garis/bayangan
Salin
Sematkan
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Mulai (lingkaran kecil)
Salin
Sematkan
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Berhenti (lingkaran berbingkai)
Salin
Sematkan
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Percabangan/penggabungan (persegi panjang panjang)
Salin
Sematkan
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Sortir (jam pasir)
Salin
Sematkan
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Komentar (kurung kurawal)
Salin
Sematkan
flowchart TD
A@{ shape: comment, label: "Comment" }
Komentar di sisi kanan (kurung kurawal kanan)
Salin
Sematkan
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Komentar (dengan tanda kurung di kedua sisi)
Salin
Sematkan
flowchart TD
A@{ shape: braces, label: "Comment" }
Tautan komunikasi (petir)
Salin
Sematkan
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokumen
Salin
Sematkan
flowchart TD
A@{ shape: doc, label: "Document" }
Penundaan (persegi panjang setengah bersudut tumpul)
Salin
Sematkan
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Salin
Sematkan
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Penyimpanan disk (silinder beralur)
Salin
Sematkan
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Tampilan (bentuk tampilan)
Salin
Sematkan
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Pemrosesan terpisah (persegi panjang terpisah)
Salin
Sematkan
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Ekstraksi (segitiga kecil)
Salin
Sematkan
flowchart TD
A@{ shape: tri, label: "Extract" }
Penyimpanan internal (panel jendela)
Salin
Sematkan
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Titik koneksi (lingkaran padat)
Salin
Sematkan
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokumen dengan garis
Salin
Sematkan
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Batas loop (segi lima berlekuk)
Salin
Sematkan
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Berkas manual (segitiga terbalik)
Salin
Sematkan
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Input manual (trapesium siku-siku)
Salin
Sematkan
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Multi-dokumen (dokumen bertumpuk)
Salin
Sematkan
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Multi-proses (persegi panjang bertumpuk)
Salin
Sematkan
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Pita kertas (bendera)
Salin
Sematkan
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Menyimpan data (persegi panjang dasi kupu-kupu)
Salin
Sematkan
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Ringkasan (lingkaran dengan silang)
Salin
Sematkan
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Dokumen bertag
Salin
Sematkan
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Proses bertanda
Salin
Sematkan
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Bentuk khusus dalam diagram alur Mermaid
Mermaid juga memperkenalkan gambar untuk memperkaya diagram alur Anda, memungkinkan Anda menyertakan gambar secara langsung dalam diagram alur, sehingga memberikan lebih banyak konteks visual dan kejelasan.
Bentuk gambar
Anda dapat menggunakan image untuk menyisipkan gambar ke dalam diagram alur, sintaks untuk mendefinisikan gambar adalah sebagai berikut:
Salin
Sematkan
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parameter
- img: alamat URL gambar yang akan ditampilkan.
- label: label teks yang terkait dengan gambar, dapat berupa string apa pun. Jika tidak didefinisikan, tidak ada label yang akan ditampilkan.
- pos: posisi label. Jika tidak didefinisikan, label akan secara bawaan berada di bagian bawah gambar.
- w: lebar gambar. Jika tidak didefinisikan, akan secara bawaan menggunakan lebar alami gambar.
- h: tinggi gambar. Jika tidak didefinisikan, akan secara bawaan menggunakan tinggi alami gambar.
- constraint: menentukan apakah gambar membatasi ukuran simpul. Pengaturan ini juga memastikan gambar mempertahankan rasio aspek aslinya dan menyesuaikan tinggi berdasarkan lebar. Jika tidak didefinisikan, akan secara bawaan bernilai off.
Gambar memberikan fleksibilitas tambahan dan daya tarik visual pada diagram alur Anda, sehingga lebih informatif dan menarik.
Koneksi antar simpul
Simpul dapat dihubungkan melalui garis penghubung dan panah. Terdapat berbagai jenis tautan, dan string teks juga dapat dilampirkan pada tautan.
Tautan dengan panah
Salin
Sematkan
flowchart LR
A-->B
Tautan terbuka
Salin
Sematkan
flowchart LR
A --- B
Tautan dengan teks
Salin
Sematkan
flowchart LR
A-- This is the text! ---B
atau
Salin
Sematkan
flowchart LR
A --- | This is the text| B
Tautan dengan panah dan teks
Salin
Sematkan
flowchart LR
A-->|text|B
atau
Salin
Sematkan
flowchart LR
A-- text -->B
Tautan garis putus-putus
Salin
Sematkan
flowchart LR
A-.->B;
Tautan garis putus-putus dengan teks
Salin
Sematkan
flowchart LR
A-. text .->B;
Tautan tebal
Salin
Sematkan
flowchart LR
A ==> B
Tautan tebal dengan teks
Salin
Sematkan
flowchart LR
A == |text| ==> B
Tautan tak terlihat
Salin
Sematkan
flowchart LR
A ~~~ B
Koneksi berantai tautan
Salin
Sematkan
flowchart LR
A -- text --> B -- text2 --> C
Anda juga dapat mendeklarasikan beberapa tautan simpul dalam baris yang sama, seperti yang ditunjukkan di bawah ini:
Salin
Sematkan
flowchart LR
a --> b & c--> d
Anda juga dapat mendeskripsikan dependensi, seperti pada kode di bawah ini:
Salin
Sematkan
flowchart LR
a --> b & c--> d & e--> f
Jika menggunakan sintaks dasar untuk mendeskripsikan graf yang sama, diperlukan 8 baris. Perlu diingat bahwa penggunaan berlebihan metode ini dapat membuat diagram alur format Markdown lebih sulit dibaca.
Salin
Sematkan
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Menambahkan ID pada garis penghubung
Mermaid kini mendukung penambahan ID pada garis penghubung, serupa dengan melampirkan ID dan metadata pada simpul. Fitur ini menjadi dasar untuk fungsi gaya, kelas, dan animasi yang lebih canggih pada garis penghubung.
Sintaks:Untuk menambahkan ID pada garis penghubung, awali sintaks garis penghubung dengan ID, diikuti langsung oleh karakter @. Misalnya:
Salin
Sematkan
flowchart LR
A e1@--> B
Dalam contoh ini, e1 adalah ID dari garis penghubung yang menghubungkan A dan B. Anda dapat menggunakan ID ini dalam definisi atau pernyataan gaya berikutnya, seperti halnya menggunakan simpul.
Mengaktifkan animasi
Setelah menambahkan ID pada garis penghubung, Anda dapat mengaktifkan animasi garis penghubung dengan mendefinisikan properti garis penghubung:
Salin
Sematkan
flowchart LR
A e1@==> B
e1@{ animate: true }
Ini memberi tahu Mermaid bahwa garis penghubung e1 dianimasikan.
Memilih jenis animasi
Pada versi awal, dua kecepatan animasi didukung: fast dan slow. Memilih jenis animasi tertentu adalah cara mudah untuk mengaktifkan animasi sekaligus mengatur kecepatan animasi.
Salin
Sematkan
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Menganimasikan menggunakan pernyataan classDef
Anda juga dapat menambahkan animasi pada garis penghubung dengan menetapkan kelas pada garis penghubung, lalu mendefinisikan properti animasi dalam pernyataan classDef. Misalnya:
Salin
Sematkan
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
Dalam kode ini:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate mendefinisikan kelas bernama animate, dengan properti gaya dan animasi.
- class e1 animate menerapkan kelas animate pada garis penghubung e1.
Catatan tentang pelolosan koma: saat mengatur properti stroke-dasharray, ingatlah untuk meloloskan koma sebagai ,, karena koma digunakan sebagai pemisah dalam definisi gaya Mermaid.
Jenis panah baru
Mendukung jenis panah baru
- Garis penghubung dengan lingkaran padat
- Garis penghubung dengan tanda silang
Garis penghubung dengan lingkaran padat
Salin
Sematkan
flowchart LR
A --o B
Garis penghubung dengan tanda silang
Salin
Sematkan
flowchart LR
A --x B
Panah multiarah
Anda dapat menggunakan panah multiarah, misalnya:
Salin
Sematkan
flowchart LR
A o--o B
B <--> C
C x--x D
Panjang garis penghubung
Setiap simpul dalam diagram alur, berdasarkan simpul yang terhubung dengannya, ditetapkan ke suatu tingkat dalam graf yang dirender, yaitu tingkat vertikal atau horizontal (tergantung arah diagram alur). Secara bawaan, tautan dapat mencakup sejumlah tingkat, tetapi Anda dapat meminta suatu koneksi menjadi lebih panjang daripada koneksi lain dengan menambahkan tanda hubung tambahan pada definisi koneksi.
Dalam contoh ini, dua tanda hubung tambahan ditambahkan pada koneksi dari simpul B ke simpul E, sehingga mencakup dua tingkat lebih banyak daripada tautan biasa:
Salin
Sematkan
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Ketika label koneksi dituliskan di tengah koneksi, tanda hubung tambahan harus ditambahkan di sisi kanan koneksi. Contoh ini setara dengan contoh sebelumnya:
Salin
Sematkan
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Untuk garis titik atau tautan tebal, karakter yang ditambahkan adalah tanda sama dengan atau titik, seperti yang ditunjukkan pada tabel berikut:
| Panjang | 1 | 2 | 3 |
|---|---|---|---|
| Koneksi biasa | --- | ---- | ----- |
| Koneksi biasa dengan panah | --> | ---> | ----> |
| Koneksi tebal | === | ==== | ===== |
| Koneksi tebal dengan panah | ==> | ===> | ====> |
| Garis titik | -.- | -..- | -...- |
| Garis titik dengan panah | -.- | -..-> | -...-> |
Karakter khusus
Teks dapat diletakkan di dalam tanda kutip untuk merender karakter yang lebih rumit. Seperti yang ditunjukkan pada contoh berikut:
Salin
Sematkan
flowchart LR
id1["This is the (text) in the box"]
Pengkodean entitas untuk pelolosan karakter
Anda dapat meloloskan karakter menggunakan sintaks pada contoh.
Salin
Sematkan
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Angka yang diberikan adalah desimal, sehingga # dapat dikodekan sebagai #35. Penggunaan nama karakter HTML juga didukung.
Subgraf
Salin
Sematkan
subgraph title
graph definition
end
Berikut adalah sebuah contoh:
Salin
Sematkan
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Anda juga dapat menetapkan id untuk subgraf.
Salin
Sematkan
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Diagram Alir
Dengan menggunakan diagram bertipe diagram alur, Anda juga dapat mengatur garis penghubung menuju dan dari subgraf seperti pada diagram alur di bawah ini.
Salin
Sematkan
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Arah subgraf
Saat menggunakan tipe diagram alur, Anda dapat menggunakan pernyataan arah untuk mengatur arah rendering subgraf, seperti yang ditunjukkan di bawah ini:
Salin
Sematkan
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
Keterbatasan
Jika ada simpul subgraf yang terhubung ke luar, arah subgraf akan diabaikan. Jika tidak, subgraf akan mewarisi arah graf induknya:
Salin
Sematkan
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
String Markdown
String Markdown memperkaya diagram alur dan peta pikiran dengan menyediakan jenis string yang lebih fleksibel, mendukung opsi format teks seperti tebal dan miring, serta kemampuan untuk membungkus teks secara otomatis di dalam label.
Salin
Sematkan
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- Untuk menebalkan teks, gunakan dua tanda bintang (**) sebelum dan sesudah teks.
- Huruf miring menggunakan satu tanda bintang (*) yang diletakkan sebelum dan sesudah teks.
- Untuk string tradisional, Anda perlu menambahkan tag <br> agar teks dapat berpindah baris di dalam simpul. Namun, string Markdown akan otomatis berpindah baris ketika teks terlalu panjang, dan Anda cukup menggunakan karakter baris baru alih-alih tag <br> untuk memulai baris baru.
Fitur ini berlaku untuk label simpul, label garis penghubung, dan label subgraf
Pembungkusan otomatis dapat dinonaktifkan dengan menggunakan sintaks tertentu
Salin
Sematkan
---
config:
markdownAutoWrap: false
---
graph LR
Komentar
Anda dapat memasukkan komentar dalam diagram alur, dan editor akan mengabaikannya. Komentar harus menempati satu baris tersendiri dan harus diawali dengan dua tanda persen (%%). Semua teks dari awal komentar hingga baris berikutnya akan dianggap sebagai komentar, termasuk sintaks diagram apa pun.
Salin
Sematkan
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Gaya dan kelas
Gaya tautan
Gaya tautan dapat diatur. Misalnya, Anda mungkin ingin mendesain tautan yang bergerak mundur dalam alur; karena tautan tidak memiliki ID seperti simpul, gaya yang harus digunakan tautan perlu ditentukan dengan cara lain. Gunakan nomor urut saat tautan didefinisikan, atau gunakan nilai bawaan untuk diterapkan pada semua tautan.
Salin
Sematkan
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Anda juga dapat menambahkan gaya pada beberapa tautan dengan memisahkan nomor tautan menggunakan koma dalam satu pernyataan:
Salin
Sematkan
linkStyle 1,2,7 color:blue;
Mengatur gaya kurva garis penghubung
Jika metode bawaan tidak memenuhi kebutuhan Anda, Anda dapat mengatur gaya kurva untuk garis penghubung antar item. Gaya kurva yang tersedia meliputi basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter, dan stepBefore.
Pada contoh di bawah ini, sebuah diagram dari kiri ke kanan menggunakan gaya kurva stepBefore.
Salin
Sematkan
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Mengatur gaya simpul
Anda dapat menetapkan gaya tertentu pada simpul, misalnya batas yang lebih tebal atau warna latar belakang yang berbeda.
Salin
Sematkan
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
Kelas
Lebih praktis daripada mendefinisikan gaya setiap kali, Anda dapat mendefinisikan kelas gaya dan melampirkan kelas tersebut pada simpul yang memerlukan tampilan berbeda.
Definisi kelas ditunjukkan sebagai berikut:
Salin
Sematkan
classDef className fill:pink,stroke:#333,stroke-width:4px;
Selain itu, Anda juga dapat mendefinisikan gaya untuk beberapa kelas dalam satu pernyataan:
Salin
Sematkan
classDef firstClassName,secondClassName font-size:12pt;
Operasi melampirkan kelas pada simpul adalah sebagai berikut:
Salin
Sematkan
class nodeId1 className;
Anda juga dapat melampirkan satu kelas pada daftar simpul dalam satu pernyataan:
Salin
Sematkan
class nodeId1,nodeId2 className;
Untuk menambahkan kelas, Anda dapat menggunakan operator ::: untuk melampirkan nama kelas pada simpul, seperti yang ditunjukkan di bawah ini:
Salin
Sematkan
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Bentuk ini dapat digunakan saat mendeklarasikan beberapa tautan antar simpul:
Salin
Sematkan
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- Dalam deklarasi graf, pernyataan kini juga dapat tidak diakhiri dengan titik koma. Setelah versi 0.2.16, mengakhiri pernyataan graf dengan titik koma hanyalah opsional. Oleh karena itu, deklarasi graf berikut juga valid seperti deklarasi graf lama.
- Satu spasi diperbolehkan antara simpul dan tautan. Namun, tidak boleh ada spasi antara simpul dan teksnya, serta antara tautan dan teksnya. Deklarasi graf lama juga masih valid, sehingga fitur baru ini opsional dan bertujuan untuk meningkatkan keterbacaan.
Berikut adalah deklarasi baru untuk garis penghubung, yang juga valid seperti deklarasi garis penghubung lama.
Salin
Sematkan
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
