Definisi asas
Carta alir terdiri daripada nod (bentuk geometri) dan garis sambungan (anak panah atau garisan). Kod Mermaid menentukan cara nod dan garis sambungan dibina, serta menyokong pelbagai jenis anak panah, anak panah berbilang arah dan pautan sewenang-wenangnya dengan subgraf.
Amaran Jika anda menggunakan perkataan "end" dalam nod carta alir, sila besarkan huruf pertama atau keseluruhan perkataan (contohnya: "End" atau "END"), memasukkan "end" semuanya dengan huruf kecil akan menyebabkan carta alir ralat.
Amaran Jika anda menggunakan huruf "o" atau "x" sebagai huruf pertama semasa menyambung nod carta alir, sila tambah satu ruang sebelum huruf tersebut atau besarkan huruf itu (contohnya: "dev--- ops", "dev---Ops").
Satu nod (lalai)
Salin
Benamkan
---
title: Node
---
flowchart LR
id
id ialah kandungan yang dipaparkan dalam kotak.
Sintaks penciptaan carta alir, selain menggunakan flowchart, anda juga boleh menggunakan graph.
Satu nod dengan teks
Anda juga boleh menetapkan teks yang berbeza daripada id untuk kotak. Jika operasi ini dilakukan beberapa kali, sistem akan menggunakan teks terakhir yang ditetapkan untuk nod tersebut. Selain itu, jika garis sambungan ditakrifkan untuk nod kemudian, definisi teks boleh ditinggalkan; semasa memaparkan kotak, teks yang ditakrifkan sebelum ini akan digunakan.
Salin
Benamkan
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Teks Unicode
Gunakan tanda petik berganda untuk membalut teks Unicode.
Salin
Benamkan
flowchart LR
id["This ❤ Unicode"]
Format Markdown
Gunakan tanda petik berganda dan tanda backtick untuk membalut teks Markdown
Salin
Benamkan
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Arah
Mengisytiharkan arah carta alir
Menunjukkan carta alir disusun dari atas ke bawah (TD atau TB)
Salin
Benamkan
flowchart TD
Start --> Stop
Arah carta alir termasuk:
- TB - Dari atas ke bawah
- TD - Dari atas ke bawah (sama seperti atas ke bawah)
- BT - Dari bawah ke atas
- RL - Dari kanan ke kiri
- LR - Dari kiri ke kanan
Bentuk nod
Segi empat tepat bulat
Salin
Benamkan
flowchart LR
id1(This is the text in the box)
Bentuk stadium
Salin
Benamkan
flowchart LR
id1([This is the text in the box])
Subgraf
Salin
Benamkan
flowchart LR
id1[[This is the text in the box]]
Pangkalan data
Salin
Benamkan
flowchart LR
id1[(Database)]
Bulatan
Salin
Benamkan
flowchart LR
id1((This is the text in the circle))
Bentuk tidak simetri
Salin
Benamkan
flowchart LR
id1>This is the text in the box]
Berlian
Salin
Benamkan
flowchart LR
id1{This is the text in the box}
Heksagon
Salin
Benamkan
flowchart LR
id1{{This is the text in the box}}
Segi empat selari
Salin
Benamkan
flowchart TD
id1[/This is the text in the box/]
Segi empat selari terbalik
Salin
Benamkan
flowchart TD
id1[\This is the text in the box\]
Trapezium
Salin
Benamkan
flowchart TD
A[/ProcessOn\]
Trapezium terbalik
Salin
Benamkan
flowchart TD
B[\ProcessOn/]
Bulatan berganda
Salin
Benamkan
flowchart TD
id1(((This is the text in the circle)))
Sambungan bentuk nod carta alir Mermaid
Mermaid memperkenalkan 30 bentuk baharu untuk meningkatkan fleksibiliti dan ketepatan penciptaan carta alir. Bentuk baharu ini menawarkan lebih banyak pilihan untuk mewakili proses, keputusan, peristiwa, penyimpanan data dan elemen lain dalam carta alir secara intuitif, sekali gus meningkatkan kejelasan dan makna semantik.
Sintaks baharu untuk definisi bentuk
Mermaid kini menyokong sintaks umum untuk mentakrifkan jenis bentuk, bagi menampung bentuk yang semakin bertambah. Sintaks ini membolehkan anda menentukan bentuk tertentu untuk nod dengan format yang jelas dan fleksibel.
Salin
Benamkan
A@{ shape: rect }
Sintaks ini mencipta nod A sebagai segi empat tepat. Ia dipaparkan dengan cara yang sama seperti [A] atau A.
Senarai lengkap bentuk nod
Berikut ialah senarai lengkap bentuk nod yang baharu diperkenalkan serta maksud, singkatan dan alias yang sepadan:
| Nama semantik | Sintaks graf | Singkatan sintaks | Alternatif sintaks | Penerangan terperinci |
|---|---|---|---|---|
| Kad | Notched Rectangle | notch-rect | card, notched-rectangle | Mewakili satu kad |
| Susun | Hourglass | hourglass | collate | Mewakili operasi susun |
| Pautan komunikasi | Lightning Bolt | bolt | com-link, lightning-bolt | Pautan komunikasi |
| Komen | Curly Brace | brace | brace-l, comment | Tambah komen |
| Komen di sebelah kanan | Curly Brace | brace-r | Tambah komen | |
| Komen dengan pendakap kerinting di kedua-dua belah | Curly Braces | braces | Tambah komen | |
| Input atau output data | Lean Right | lean-r | in-out, lean-right | Mewakili input atau output |
| Input atau output data | Lean Left | lean-l | lean-left, out-in | Mewakili output atau input |
| Pangkalan data | Cylinder | cyl | cylinder, database, db | Storan pangkalan data |
| Keputusan | Diamond | diam | decision, diamond, question | Langkah keputusan |
| Kelewatan | Half-Rounded Rectangle | delay | half-rounded-rectangle | Mewakili kelewatan |
| Storan capaian langsung | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Storan capaian langsung |
| Storan cakera | Lined Cylinder | lin-cyl | disk, lined-cylinder | Storan cakera |
| Paparan | Curved Trapezoid | curv-trap | curved-trapezoid, display | Mewakili maklumat dipaparkan pada skrin, terminal dan peranti lain |
| Pemprosesan berpecah | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Bentuk pemprosesan berpecah |
| Dokumen | Document | doc | document | Mewakili satu dokumen |
| Peristiwa | Rounded Rectangle | rounded | event | Mewakili satu peristiwa |
| Cabut | Triangle | tri | extract, triangle | Proses cabut |
| Pecah/gabung | Filled Rectangle | fork | join | Pecah atau gabung dalam carta alir |
| Storan dalaman | Window Pane | win-pane | internal-storage, window-pane | Storan dalaman |
| Titik sambungan | Filled Circle | f-circ | filled-circle, junction | Titik sambungan |
| Dokumen dengan garisan | Lined Document | lin-doc | lined-document | Dokumen dengan garisan |
| Proses garisan/bayang | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Bentuk proses dengan garisan |
| Had gelung | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Langkah had gelung |
| Fail manual | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Operasi fail 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 | Mewakili satu tugas manual |
| Berbilang dokumen | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Berbilang proses | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Bentuk tidak sekata | Odd | odd | Bentuk tidak sekata | |
| Pita kertas | Flag | flag | paper-tape | Pita kertas |
| Sediakan syarat | Hexagon | hex | hexagon, prepare | Langkah persediaan atau syarat |
| Tindakan keutamaan | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Tindakan keutamaan |
| Proses | Rectangle | rect | proc, process, rectangle | Bentuk pemprosesan standard |
| Mula | Circle | circle | circ | Titik mula |
| Mula | Small Circle | sm-circ | small-circle, start | Titik mula bulatan kecil |
| Berhenti | Double Circle | dbl-circ | double-circle | Mewakili titik berhenti |
| Berhenti | Framed Circle | fr-circ | framed-circle, stop | Mewakili titik berhenti |
| Simpan data | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Simpan data |
| Subgraf | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Subgraf, subrutin |
| Ringkasan | Crossed Circle | cross-circ | crossed-circle, summary | Ringkasan |
| Dokumen bertag | Tagged Document | tag-doc | tagged-document | Dokumen bertag |
| Proses piawai | 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 ialah contoh kod carta alir menggunakan bentuk yang baharu diperkenalkan:
Salin
Benamkan
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
Benamkan
flowchart TD
A@{ shape: rect, label: "This is a process" }
Peristiwa
Salin
Benamkan
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Subproses
Salin
Benamkan
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Pangkalan data (silinder)
Salin
Benamkan
flowchart TD
A@{ shape: cyl, label: "Database" }
Mula (bulatan)
Salin
Benamkan
flowchart TD
A@{ shape: circle, label: "Start" }
Bentuk tidak sekata
Salin
Benamkan
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Keputusan (berlian)
Salin
Benamkan
flowchart TD
A@{ shape: diamond, label: "Decision" }
Sediakan syarat (heksagon)
Salin
Benamkan
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Input/output data (condong ke kanan)
Salin
Benamkan
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Input/output data (condong ke kiri)
Salin
Benamkan
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Tindakan keutamaan (trapezium)
Salin
Benamkan
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Operasi manual (trapezium terbalik)
Salin
Benamkan
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Berhenti (bulatan berganda)
Salin
Benamkan
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Blok teks
Salin
Benamkan
flowchart TD
A@{ shape: text, label: "This is a text block" }
Kad (segi empat tepat bertakuk)
Salin
Benamkan
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Proses dengan garisan/bayang
Salin
Benamkan
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Mula (bulatan kecil)
Salin
Benamkan
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Berhenti (bulatan berbingkai)
Salin
Benamkan
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Pecah/gabung (segi empat tepat panjang)
Salin
Benamkan
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Susun (jam pasir)
Salin
Benamkan
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Komen (pendakap besar)
Salin
Benamkan
flowchart TD
A@{ shape: comment, label: "Comment" }
Komen di sebelah kanan (pendakap besar di kanan)
Salin
Benamkan
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Komen (pendakap di kedua-dua belah)
Salin
Benamkan
flowchart TD
A@{ shape: braces, label: "Comment" }
Pautan komunikasi (kilat)
Salin
Benamkan
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokumen
Salin
Benamkan
flowchart TD
A@{ shape: doc, label: "Document" }
Kelewatan (segi empat tepat separa bulat)
Salin
Benamkan
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Salin
Benamkan
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Storan cakera (silinder bertakuk)
Salin
Benamkan
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Paparan (bentuk paparan)
Salin
Benamkan
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Pemprosesan berpecah (segi empat tepat berpecah)
Salin
Benamkan
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Cabut (segi tiga kecil)
Salin
Benamkan
flowchart TD
A@{ shape: tri, label: "Extract" }
Storan dalaman (panel tetingkap)
Salin
Benamkan
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Titik sambungan (bulatan pejal)
Salin
Benamkan
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokumen dengan garisan
Salin
Benamkan
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Had gelung (pentagon bertakuk)
Salin
Benamkan
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Fail manual (segi tiga terbalik)
Salin
Benamkan
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Input manual (trapezium bersudut tegak)
Salin
Benamkan
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Berbilang dokumen (dokumen bertindan)
Salin
Benamkan
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Berbilang proses (segi empat tepat bertindan)
Salin
Benamkan
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Pita kertas (bendera)
Salin
Benamkan
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Simpan data (segi empat tepat busur)
Salin
Benamkan
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Ringkasan (bulatan dengan silang)
Salin
Benamkan
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Dokumen bertag
Salin
Benamkan
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Proses bertanda
Salin
Benamkan
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Bentuk khas dalam carta alir Mermaid
Mermaid juga memperkenalkan imej untuk memperkukuh carta alir anda, membolehkan anda memasukkan imej terus dalam carta alir, sekali gus memberikan lebih banyak konteks visual dan kejelasan.
Bentuk imej
Anda boleh menggunakan image untuk menyisipkan imej dalam carta alir, sintaks untuk mentakrifkan imej adalah seperti berikut:
Salin
Benamkan
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 imej untuk dipaparkan.
- label: label teks yang dikaitkan dengan imej, boleh jadi sebarang rentetan. Jika tidak ditakrifkan, tiada label akan dipaparkan.
- pos: kedudukan label. Jika tidak ditakrifkan, label akan lalai ke bahagian bawah imej.
- w: lebar imej. Jika tidak ditakrifkan, lalai kepada lebar semula jadi imej.
- h: tinggi imej. Jika tidak ditakrifkan, lalai kepada tinggi semula jadi imej.
- constraint: menentukan sama ada imej mengehadkan saiz nod. Tetapan ini juga memastikan imej mengekalkan nisbah bidang asalnya, dan melaraskan tinggi mengikut lebar. Jika tidak ditakrifkan, lalai kepada off.
Imej memberikan fleksibiliti dan daya tarikan visual tambahan kepada carta alir anda, menjadikannya lebih bermaklumat dan menarik.
Sambungan antara nod
Nod boleh disambung melalui garis sambungan dan anak panah. Terdapat pelbagai jenis pautan, dan rentetan teks juga boleh dilampirkan pada pautan.
Pautan dengan anak panah
Salin
Benamkan
flowchart LR
A-->B
Satu pautan terbuka
Salin
Benamkan
flowchart LR
A --- B
Pautan dengan teks
Salin
Benamkan
flowchart LR
A-- This is the text! ---B
atau
Salin
Benamkan
flowchart LR
A --- | This is the text| B
Pautan dengan anak panah dan teks
Salin
Benamkan
flowchart LR
A-->|text|B
atau
Salin
Benamkan
flowchart LR
A-- text -->B
Pautan garis putus-putus
Salin
Benamkan
flowchart LR
A-.->B;
Pautan garis putus-putus dengan teks
Salin
Benamkan
flowchart LR
A-. text .->B;
Pautan tebal
Salin
Benamkan
flowchart LR
A ==> B
Pautan tebal dengan teks
Salin
Benamkan
flowchart LR
A == |text| ==> B
Pautan halimunan
Salin
Benamkan
flowchart LR
A ~~~ B
Sambungan berantai pautan
Salin
Benamkan
flowchart LR
A -- text --> B -- text2 --> C
Anda juga boleh mengisytiharkan berbilang pautan nod dalam baris yang sama, seperti berikut:
Salin
Benamkan
flowchart LR
a --> b & c--> d
Anda juga boleh menerangkan kebergantungan, seperti kod di bawah:
Salin
Benamkan
flowchart LR
a --> b & c--> d & e--> f
Jika menggunakan sintaks asas untuk menerangkan graf yang sama, ia memerlukan 8 baris. Perlu diingatkan bahawa penggunaan kaedah ini secara berlebihan mungkin menjadikan carta alir format Markdown lebih sukar dibaca.
Salin
Benamkan
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Tambah ID pada garis sambungan
Mermaid kini menyokong penambahan ID pada garis sambungan, serupa dengan melampirkan ID dan metadata pada nod. Ciri ini menyediakan asas untuk gaya, kelas dan fungsi animasi yang lebih maju pada garis sambungan.
Sintaks:Untuk menambah ID pada garis sambungan, awalkan sintaks garis sambungan dengan ID, diikuti dengan aksara @. Contohnya:
Salin
Benamkan
flowchart LR
A e1@--> B
Dalam contoh ini, e1 ialah ID garis sambungan yang menyambung A dan B. Anda boleh menggunakan ID ini dalam definisi atau pernyataan gaya seterusnya, sama seperti menggunakan nod.
Hidupkan animasi
Selepas menambah ID pada garis sambungan, anda boleh menghidupkan animasi garis sambungan dengan mentakrifkan sifat garis sambungan:
Salin
Benamkan
flowchart LR
A e1@==> B
e1@{ animate: true }
Ini memberitahu Mermaid bahawa garis sambungan e1 ialah animasi.
Pilih jenis animasi
Dalam versi awal, dua kelajuan animasi disokong: fast dan slow. Memilih jenis animasi tertentu ialah cara mudah untuk mendayakan animasi dan menetapkan kelajuan animasi sekali gus.
Salin
Benamkan
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animasi menggunakan pernyataan classDef
Anda juga boleh menambah animasi pada garis sambungan dengan memberikan kelas kepada garis sambungan, kemudian mentakrifkan sifat animasi dalam pernyataan classDef. Contohnya:
Salin
Benamkan
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
Dalam kod ini:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate mentakrifkan kelas bernama animate, dengan sifat gaya dan animasi.
- class e1 animate menggunakan kelas animate pada garis sambungan e1.
Nota tentang pelepasan koma: semasa menetapkan sifat stroke-dasharray, ingat untuk melepaskan koma sebagai , kerana koma digunakan sebagai pemisah dalam definisi gaya Mermaid.
Jenis anak panah baharu
Menyokong jenis anak panah baharu
- Garis sambungan dengan bulatan pejal
- Garis sambungan dengan tanda silang
Garis sambungan dengan bulatan pejal
Salin
Benamkan
flowchart LR
A --o B
Garis sambungan dengan tanda silang
Salin
Benamkan
flowchart LR
A --x B
Anak panah berbilang arah
Anak panah berbilang arah boleh digunakan, contohnya:
Salin
Benamkan
flowchart LR
A o--o B
B <--> C
C x--x D
Panjang garis sambungan
Setiap nod dalam carta alir, berdasarkan nod yang disambungnya, diberikan satu pangkat dalam graf yang dipaparkan, iaitu tahap menegak atau mendatar (bergantung pada arah carta alir). Secara lalai, pautan boleh merentas sebarang bilangan pangkat, tetapi anda boleh meminta sesuatu sambungan lebih panjang daripada sambungan lain dengan menambah sengkang tambahan dalam definisi sambungan.
Dalam contoh ini, dua sengkang tambahan ditambah pada sambungan dari nod B ke nod E, menjadikannya merentas dua pangkat lebih banyak daripada pautan biasa:
Salin
Benamkan
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Apabila label sambungan ditulis di tengah sambungan, sengkang tambahan mesti ditambah di sebelah kanan sambungan. Contoh ini setara dengan contoh sebelumnya:
Salin
Benamkan
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Untuk garis bertitik atau pautan tebal, aksara yang perlu ditambah ialah tanda sama dengan atau noktah, seperti yang ditunjukkan dalam jadual di bawah:
| Panjang | 1 | 2 | 3 |
|---|---|---|---|
| Sambungan biasa | --- | ---- | ----- |
| Sambungan biasa dengan anak panah | --> | ---> | ----> |
| Sambungan tebal | === | ==== | ===== |
| Sambungan tebal dengan anak panah | ==> | ===> | ====> |
| Garis bertitik | -.- | -..- | -...- |
| Garis bertitik dengan anak panah | -.- | -..-> | -...-> |
Aksara khas
Teks boleh diletakkan dalam tanda petik untuk memaparkan aksara yang lebih menyusahkan. Seperti yang ditunjukkan dalam contoh di bawah:
Salin
Benamkan
flowchart LR
id1["This is the (text) in the box"]
Pengekodan entiti untuk aksara pelepasan
Aksara boleh dilepaskan menggunakan sintaks dalam contoh.
Salin
Benamkan
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Nombor yang diberikan ialah perpuluhan, jadi # boleh dikodkan sebagai #35. Penggunaan nama aksara HTML juga disokong.
Subgraf
Salin
Benamkan
subgraph title
graph definition
end
Berikut ialah satu contoh:
Salin
Benamkan
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Anda juga boleh menetapkan id untuk subgraf.
Salin
Benamkan
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Carta Alir
Dengan carta jenis carta alir, anda juga boleh menyediakan garis sambungan yang menuju ke dan dari subgraf seperti carta alir di bawah.
Salin
Benamkan
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
Apabila menggunakan jenis carta alir, anda boleh menggunakan pernyataan arah untuk menetapkan arah pemaparan subgraf, seperti berikut:
Salin
Benamkan
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
Batasan
Jika mana-mana nod subgraf disambung ke luar, arah subgraf akan diabaikan. Jika tidak, subgraf akan mewarisi arah graf induk:
Salin
Benamkan
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
Rentetan Markdown
Rentetan Markdown memperkukuh carta alir dan peta minda dengan menyediakan jenis rentetan yang lebih fleksibel, menyokong pilihan format teks seperti tebal dan condong, serta keupayaan untuk membalut teks secara automatik dalam label.
Salin
Benamkan
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 bintang (**) sebelum dan selepas teks.
- Condong menggunakan satu bintang (*) yang diletakkan sebelum dan selepas teks.
- Untuk rentetan tradisional, anda perlu menambah tag <br> supaya teks dibalut dalam nod. Namun begitu, rentetan Markdown akan dibalut secara automatik apabila teks terlalu panjang, dan anda hanya perlu menggunakan aksara baris baharu dan bukan tag <br> untuk memulakan baris baharu.
Ciri ini terpakai pada label nod, label garis sambungan dan label subgraf
Pembalutan automatik boleh dilumpuhkan dengan menggunakan sintaks tertentu
Salin
Benamkan
---
config:
markdownAutoWrap: false
---
graph LR
Komen
Komen boleh dimasukkan dalam carta alir, dan editor akan mengabaikannya. Komen perlu menduduki satu baris sendiri, dan mesti bermula dengan dua tanda peratus (%%). Sebarang teks dari permulaan komen hingga baris seterusnya akan dianggap sebagai komen, termasuk sebarang sintaks carta alir.
Salin
Benamkan
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Gaya dan kelas
Gaya pautan
Gaya pautan boleh ditetapkan. Contohnya, anda mungkin mahu mereka bentuk pautan yang bergerak ke belakang dalam proses; kerana pautan tidak mempunyai ID seperti nod, gaya yang perlu digunakan oleh pautan perlu ditentukan dengan cara lain. Gunakan nombor urutan semasa mentakrifkan pautan, atau gunakan nilai lalai untuk digunakan pada semua pautan.
Salin
Benamkan
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Anda juga boleh menambah gaya pada berbilang pautan dengan memisahkan nombor pautan dengan koma dalam satu pernyataan:
Salin
Benamkan
linkStyle 1,2,7 color:blue;
Tetapkan gaya lengkung garis sambungan
Jika kaedah lalai tidak memenuhi keperluan anda, anda boleh menetapkan gaya lengkung untuk garis sambungan antara item. Gaya lengkung yang tersedia termasuk basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter dan stepBefore.
Dalam contoh di bawah, carta dari kiri ke kanan menggunakan gaya lengkung stepBefore.
Salin
Benamkan
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Tetapkan gaya nod
Gaya tertentu boleh ditetapkan pada nod, contohnya sempadan yang lebih tebal atau warna latar belakang yang berbeza.
Salin
Benamkan
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 mudah daripada mentakrifkan gaya setiap kali ialah mentakrifkan satu kelas gaya, dan melampirkan kelas tersebut pada nod yang memerlukan rupa berbeza.
Definisi kelas adalah seperti berikut:
Salin
Benamkan
classDef className fill:pink,stroke:#333,stroke-width:4px;
Selain itu, gaya boleh ditakrifkan untuk berbilang kelas dalam satu pernyataan:
Salin
Benamkan
classDef firstClassName,secondClassName font-size:12pt;
Operasi melampirkan kelas pada nod adalah seperti berikut:
Salin
Benamkan
class nodeId1 className;
Anda juga boleh melampirkan satu kelas pada senarai nod dalam satu pernyataan:
Salin
Benamkan
class nodeId1,nodeId2 className;
Menambah kelas boleh menggunakan operator ::: untuk melampirkan nama kelas pada nod, seperti berikut:
Salin
Benamkan
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Bentuk ini boleh digunakan semasa mengisytiharkan berbilang pautan antara nod:
Salin
Benamkan
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- Dalam pengisytiharan graf, pernyataan kini juga boleh tidak berakhir dengan titik bertindih. Selepas versi 0.2.16, pengakhiran pernyataan graf dengan titik bertindih hanyalah pilihan. Oleh itu, pengisytiharan graf di bawah juga sah sama seperti pengisytiharan graf lama.
- Satu ruang dibenarkan antara bucu dan pautan. Walau bagaimanapun, tidak sepatutnya ada sebarang ruang antara bucu dan teksnya serta antara pautan dan teksnya. Pengisytiharan graf lama juga masih sah, jadi ciri baharu ini adalah pilihan, bertujuan untuk meningkatkan kebolehbacaan.
Berikut ialah pengisytiharan baharu garis sambungan, yang juga sah sama seperti pengisytiharan garis sambungan lama.
Salin
Benamkan
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
