流程圖
所有流程圖都由節點、幾何圖像、箭頭或線條組成。 mermaid代碼定義了這些節點和邊的制作和交互方式。可以有不同的箭頭類型、多向箭頭以及與子圖的連接。
節點
節點
flowchart LR
id
flowchart LR id
帶文字的節點
可以在框中設置與id不同的文本。如果多次這樣做，將使用的節點的最后一個文本。另外，如果稍后為節點定義邊，則可以省略文本定義。之前定義的將在呈現框時使用。
flowchart LR
node[id text]
flowchart LR node[id text]
節點形狀
| 圖形 | 示例 | 備注 |
|---|---|---|
| 方形 | id[方形] | |
| 圓角 | id(圓角) | |
| 圓形 | id((圓)) | |
| 體育場 | id([體育場]) | |
| 圓柱 | id[(圓柱)] | 可以表示數據庫 |
| 子程序 | id[[子程序]] | |
| 不對稱 | id>不對稱] | |
| 菱形 | id | 可以作為判斷 |
| 六角形 | id{{六角形}} | |
| 平行四邊形 | id[/平行四邊形/] | |
| 平行四邊形 | id[\平行四邊形\] | |
| 梯形 | id[/梯形\] | |
| 梯形 | id[\梯形/] |
方形節點
flowchart TB
A[默認節點]
flowchart TB A[默認節點]
圓角節點
flowchart TB
A(圓角節點)
flowchart TB A(圓角節點)
圓形節點
flowchart LR
A((圓形))
flowchart TB A((圓形))
體育場節點
flowchart TB
A([體育場節點])
flowchart TB A([體育場節點])
圓柱節點
flowchart LR
A[(圓柱形)]
flowchart LR A[(圓柱形)]
子程序形狀節點
flowchart LR
A[[子程序形狀]]
flowchart TB A[[子程序形狀]]
不對稱形狀節點
flowchart LR
A>不對稱形狀]
flowchart TB A>不對稱形狀]
菱形節點
flowchart LR
A{菱形}
flowchart TB A{菱形}
六角形
flowchart LR
A{{六角形}}
flowchart TB A{{六角形}}
平行四邊行節點
flowchart BT
A[\平行四邊形\]
B[/平行四邊形/]
flowchart BT A[\平行四邊形\] B[/平行四邊形/]
梯形節點
flowchart LR
A[/梯形\] B[\梯形/]
flowchart LR A[/梯形\] === B[\梯形/]
子程序形狀節點
flowchart LR
A[[子程序形狀]]
flowchart TB A[[子程序形狀]]
定義流程圖的方向
| 方向 | 描述 |
|---|---|
| TB或者TD | 從上到下。默認 |
| BT | 從下到上 |
| LR | 從左到右 |
| RL | 從右到左 |
聲明流程圖從上到下（TD 或 TB）。
flowchart
A-->B
flowchart A-->B
聲明了流程圖是從左到右(LR)的方向。
flowchart LR
A-->B
flowchart LR A-->B
節點連接
分類
節點可以與連接/邊連接。 可以有不同類型的連接，也可以將文本字符串附加到連接。
分類如下：
flowchart TB l[連接]-->x[線形]-->P[單線] & C[粗線] & X[虛線] P-->PD["--"] C-->CD["=="] X-->XD["-.-"] l-->箭頭--> jy[有箭頭] & jw[無箭頭] jy-->jyD[" "] jw-->jwD[">"] l-->注釋-->zy(有注釋) & zw(無注釋)
根據線形、箭頭（還有其他形狀，但先默認為箭頭，其他形狀下面闡述）和注釋（描述）的分類，可以有12種形式的連接形式：
| 表述 | 說明 | 使用示例 |
|---|---|---|
| --- | 單線無箭頭 | A(出去游玩)---B[回家] |
| --> | 單線加箭頭 | A(出去游玩)-->B[回家] |
| --text-- | 單線加描述 | A(出去游玩)--玩夠了--B[回家] |
| --text--> | 單線箭頭加描述 | A(出去游玩)--玩夠了-->B[回家] |
| === | 粗線 | A(出去游玩)===B[回家] |
| ==> | 粗線加箭頭 | A(出去游玩)==>B[回家] |
| == text== | 粗線加描述 | A(出去游玩)== 玩夠了==B[回家] |
| == text==> | 粗線箭頭加描述 | A(出去游玩)== 玩夠了==>B[回家] |
| -.- | 虛線 | A(出去游玩) -.-[回家] |
| -.-> | 虛線加箭頭 | A(出去游玩)-.->B[回家] |
| -.text.- | 虛線加描述 | A(出去游玩)-.玩夠了.-B[回家] |
| -.text.-> | 虛線箭頭加描述 | A(出去游玩)-.玩夠了.->B[回家] |
連接詳細例
單線帶箭頭的連接
flowchart LR
A-->B
c<-->|雙向箭頭|c1
A1--->B1
flowchart A-->B c<-->|雙向箭頭|c1 A1--->B1
最少2條線。超過2條連接就會越長。其他連接同樣的道理。
粗線帶箭頭連接
flowchart LR
A==>B
flowchart LR A==>B
虛線帶箭頭連接
flowchart LR
A-.->B
flowchart LR A-.->B
普通沒有箭頭的連接
flowchart LR
A---B
flowchart LR A---B
粗線沒有箭頭連接
flowchart LR
A===B
flowchart LR A===B
虛線無箭頭連接
flowchart LR
A-.-B
flowchart LR A-.-B
有文字的連接
flowchart LR
A1-->|hello world|B1
A11--"hello world<br>另種方式"-->B11
ca11==>|hello world|ca21
ca1=="hello world<br>另種方式"==>ca2
xa-.->|I like the world|xa1
xa11-."I like the world<br>另種方式".->xa111
flowchart A1-->|hello world|B1 A11--"hello world<br>另種方式"-->B11 ca11==>|hello world|ca21 ca1=="hello world<br>另種方式"==>ca2 xa-.->|I like the world|xa1 xa11-."I like the world<br>另種方式".->xa111
flowchart LR
a1---|"hello world, <br>我喜歡"|b1
c1===|hello world|c2
x1-.-|I like the world|x2
flowchart LR a1---|"hello world, <br>我喜歡"|b1 c1===|hello world|c2 x1-.-|I like the world|x2
備注，連接的上文字不能是標點符號。所以連接上的文字要精煉。但如果確實需要特殊字符則可以放到英文雙引號
" "中。
其他箭頭形狀
flowchart LR
A --o B --x C
flowchart LR A --o B --x C
flowchart LR
A o--o B x--x C
flowchart LR A o--o B x--x C
連接長度
流程圖中的每個節點最終都會根據其連接到的節點分配到渲染圖中的等級，即垂直或水平級別（取決於流程圖方向）。 默認情況下，連接可以跨越任意數量的等級，但可以通過在連接定義中添加額外的破折號來要求任何連接比其他連接更長。
flowchart TB
A[開始]-->A1{想去旅游嗎}
A1-->|想|B{有新冠疫情嗎}
B-->|No|可以去
B-->|Yes|不能去
A1----->|不想|結束
flowchart TB A[開始]-->A1{想去旅游嗎} A1-->|想|B{有新冠疫情嗎} B-->|No|可以去 -->E B-->|Yes|不能去 -->E A1----->|不想|E[結束]
特殊字符
特殊字符比如,()[]*等等無法被渲染，可以將文本放在英文雙引號""內。 如下例所示：
flowchart LR
A["我是特殊字符，比如：<br>[]{}*`:=->"]
flowchart LR A["我是特殊字符，比如：<br>[]{}*`:=->"]
轉義字符
flowchart LR
A["我是特殊字符，比如：#9829;、""]
flowchart LR A["我是特殊字符，比如：#9829;、""]
給出的數字是以 10 為基數，因此 # 可以編碼為 #35;，#9829表示心形。 還支持使用 HTML 字符名稱，比如雙引號可以用"表示。
子圖(subgraph)
flowchart LR
subgraph R[需求]
%%備注表示子圖方向的命令不起作用： directive LR
需求調研 --> 需求分析 --> 需求說明書
end
subgraph C[編碼和調試]
需求理解-->編碼-->調試
end
subgraph D[上線]
數據庫初始化--> 軟件部署-->應用啟動
end
R==>C==>D
flowchart LR subgraph R[需求] %%備注表示子圖方向的命令不起作用： directive LR 需求調研 --> 需求分析 --> 需求說明書 end subgraph C[編碼和調試] 需求理解-->編碼-->調試 end subgraph D[上線] 數據庫初始化--> 軟件部署-->應用啟動 end R==>C==>D
注解
如果需要注解則可以使用%%
flowchart RL
%%從左到右的普通流程圖
A-->B
flowchart RL %%從左到右的普通流程圖 A-->B