AI流程圖語法

1. 介紹
2. 定義節點
3. 節點形狀
4. 節點之間的連接
5. 線條長度
6. 更多進階用法
7. AI Flowchart / Mermaid Online Editor

介紹

AI流程圖是基於 Mermaid.js，因此它遵循 Mermaid.js 語法。 流程圖是由節點（幾何形狀）和邊（箭頭或線）組成。 Mermaid.js 程式碼定義了節點和邊的創建方式，並支援不同類型的箭頭、多方向箭頭以及對子圖的任意連接。

定義節點

類型	程式碼	圖表	語法
節點	flowchart LR apple		只需輸入節點名稱。
带有文字的節點	flowchart LR node["This is text"]		將文字放在括號中，使用雙引號將文字括起來。
带有 markdown 的節點	flowchart LR node["`This **is** _Markdown_`"]		將 markdown 放在括號中，使用雙引號和反引號將文字括起來。

節點形狀

類型	程式碼	圖表	語法
具有圓邊的節點	flowchart LR node(Content)		Put text in (...)
體育場形狀的節點	flowchart LR node([Content])		Put text in ([...])
子程序形狀的節點	flowchart LR node[[Content]]		Put text in [[...]]
圓柱形的節點	flowchart LR node[(Content)]		Put text in [(...)]
圓形的節點	flowchart LR node((Content))		Put text in ((...))
不對稱形狀的節點	flowchart LR node>Content]		Put text in >...]
菱形節點	flowchart LR node{Content}		Put text in {...}
六邊形節點	flowchart LR node{{Content}}		Put text in {{...}}
平行四邊形 A	flowchart LR node[/Content/]		Put text in [/.../]
平行四邊形 B	flowchart LR node[\Content\]		Put text in [\...\]
梯形 A	flowchart LR node[/Content\]		Put text in [/...\]
梯形 B	flowchart LR node[\Content/]		Put text in [\.../]
雙圓	flowchart LR node(((Content)))		Put text in (((...)))

節點之間的連接

類型	程式碼	圖表	語法
連接	flowchart LR A --- B		Use ...---...
带文字的連接	flowchart LR A ---|label| B flowchart LR A -- label --- B		Use ---|...| Use --...---
带箭頭的連接	flowchart LR A --> B		Use ...-->...
带箭頭和文字的連接	flowchart LR A -->|label| B flowchart LR A -- label --> B		Use -->|...| Use --...-->
虛線連接	flowchart LR A -.-> B		Use ...-.->...
带文字的虛線連接	flowchart LR A -.->|label| B flowchart LR A -. label .-> B		Use -.....->
粗線連接	flowchart LR A ==> B		Use ...==>...
带文字的粗線連接	flowchart LR A ==>|label| B flowchart LR A == label ==> B		Use ==>|...| Use ==...==>
带●符號的連接	flowchart LR A --o B		Use ...--o...
带●符號和文字的連接	flowchart LR A --o|label| B flowchart LR A -- label --o B		Use --o|...| Use --...--o
带✖符號的連接	flowchart LR A --x B		Use ...--x...
带✖符號和文字的連接	flowchart LR A --x|label| B flowchart LR A -- label --x B		Use --x|...| Use --...--x
雙頭箭頭	flowchart LR A <--> B		Use ...<-->...
带文字的雙頭箭頭	flowchart LR A <-->|label| B flowchart LR A <-- label --> B		Use <-->|...| Use <--...-->
带●符號的雙頭箭頭	flowchart LR A o--o B		Use ...o--o...
带●符號和文字的雙頭箭頭	flowchart LR A o--o|label| B flowchart LR A o-- label --o B		Use o--o|...| Use o--...--o
带✖符號的雙頭箭頭	flowchart LR A x--x B		Use ...x--x...
带✖符號和文字的雙頭箭頭	flowchart LR A x--x|label| B flowchart LR A x-- label --x B		Use x--x|...| Use x--...--x

線條長度

長度	1	2	3
普通	---	----	-----
普通带箭頭	-->	--->	---->
粗線	===	====	=====
粗線带箭頭	==>	===>	====>
虛線	-.-	-..-	-...-
虛線带箭頭	-.->	-..->	-...->

更多進階用法

進階用法包括子圖、互動、樣式和類別等。 請參閱 Mermaid.js 官方網站。