Mermaid 绘图总结
簡介
Mermaid 是一個用于畫流程圖、狀態圖、時序圖、甘特圖的庫，使用 JS 進行本地渲染，廣泛集成于許多 Markdown 編輯器中。
Mermaid 作為一個使用 JS 渲染的庫，生成的不是一個“圖片”，而是一段 HTML 代碼，因此安全許多。
官網：https://mermaidjs.github.io/
Github 項目地址：https://github.com/knsv/mermaid
參考:
參考:
https://blog.csdn.net/lis_12/article/details/80693975
https://www.cnblogs.com/wuyida/p/6301240.html
https://blog.csdn.net/fenghuizhidao/article/details/79440583
```mermaid
graph LR
A[方形] -->B(圓角)
B --> C{條件a}
C -->|a=1| D[結果1]
C -->|a=2| E[結果2]
F[橫向流程圖]
```
1. graph（流程圖）
節點名不能與關鍵字同名
使用引號可以避免一些不必要的麻煩，如避免與關鍵字同名
關鍵字graph表示一個流程圖的開始，同時需要指定該圖的方向
1.1 圖的方向
TB，從上到下
TD，從上到下
BT，從下到上
RL，從右到左
LR，從左到右
T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN
例如:
```mermaid
graph LR;
A-->B
B-->C
C-->D
D-->A
```
1.2 節點形狀
默認節點 A
文本節點 B[bname]
圓角節點 C(cname)
圓形節點 D((dname))
非對稱節點 E>ename]
菱形節點 F{fname}
A~F 是當前節點名字，類似于變量名，畫圖時便于引用
[b~f]name是節點中顯示的文字，默認節點的名字和顯示的文字都為A
例如:
```
graph TB
A
B[bname]
C(cname)
D((dname))
E>ename]
F{fname}
```
1.3 連線
節點間的連接線有多種形狀，可以在連接線中加入標簽：
箭頭連接 A1–->B1
開放連接 A2—B2
標簽連接 A3–text—B3
箭頭標簽連接 A4–text–>B4
虛線開放連接 A5.-B5
虛線箭頭連接 A6-.->B6
標簽虛線連接 A7-.text.-B7
標簽虛線箭頭連接 A8-.text.->B8
粗線開放連接 A9===B9
粗線箭頭連接 A10==>B10
標簽粗線開放連接 A11==text===B11
標簽粗線箭頭連接 A12==text==>B12
例如:
graph TB
A1-->B1
A2---B2
A3--text---B3
A4--text-->B4
A5-.-B5
A6-.->B6
A7-.text.-B7
A8-.text.->B8
A9===B9
A10==>B10
A11==text===B11
A12==text==>B12
2. subgraph（子圖）
# 外面的那層, 可以使用子圖中的節點，子圖中的節點名不是隔離的，可以認為是全局變量-.-
graph LR
subgraph title1
graph definition
end
subgraph title2
graph definition
end
...
例如:
3. sequence diagram （序列圖）
3.1 關鍵字 - participant
參與者，相當先定義模塊，可通過設定參與者(participant)的順序控制展示順序
3.2 關鍵字 - note
便簽
格式:
note [right of | left of][Actor]:Text
# 給多個模塊做標簽, 通過逗號分割
note over [Actor1, Actor2...]:Text
3.3 關鍵字 - 循環
例如:
loop Loop_text
... statements...
end
3.4 關鍵字 - 選擇
例如:
alt Describing_text
...statements...
else
...statements...
end
# 推薦在沒有else的情況下使用 opt(option,選擇)
opt Describing_text
...statements...
end
3.5 示例
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice:not so good :(
else is well
Bob->>Alice:good
end
opt Extra response
Bob->>Alice:Thanks for asking
end
3.6 連線
無箭頭實線 ->
有箭頭實線 ->>
無箭頭虛線 –>
有箭頭虛線 –>>
帶x實線 -x
帶x虛線 –x
例如:
sequenceDiagram
Note right of A: 倒霉, 碰到B了
A->B: Hello B, how are you ?
note left of B: 倒霉,碰到A了
B-->A: Fine, thx, and you?
note over A,B: 快點溜，太麻煩了
A->>B: I'm fine too.
note left of B: 快點打發了A
B-->>A: Great!
note right of A: 溜之大吉
A-xB: Wait a moment
loop Look B every minute
A->>B: look B, go?
B->>A: let me go?
end
B--xA: I'm off, byte
note right of A: 太好了, 他走了
sequenceDiagram
Note right of A: 倒霉, 碰到B了
A->B: Hello B, how are you ?
note left of B: 倒霉,碰到A了
B-->A: Fine, thx, and you?
note over A,B: 快點溜，太麻煩了
A->>B: I'm fine too.
note left of B: 快點打發了A
B-->>A: Great!
note right of A: 溜之大吉
A-xB: Wait a moment
loop Look B every minute
A->>B: look B, go?
B->>A: let me go?
end
B--xA: I'm off, byte
note right of A: 太好了, 他走了
改變AB的順序
sequenceDiagram
# 通過設定參與者(participant)的順序控制展示順序
participant B
participant A
Note right of A: 倒霉, 碰到B了
A->B: Hello B, how are you ?
note left of B: 倒霉,碰到A了
B-->A: Fine, thx, and you?
note over A,B:快點溜，太麻煩了。。。
A->>B: I'm fine too.
note left of B: 快點打發了A
B-->>A: Great!
note right of A: 溜之大吉
A-xB: Wait a moment
loop Look B every minute
A->>B: look B, go?
B->>A: let me go?
end
B--xA: I'm off, byte
note right of A: 太好了, 他走了
sequenceDiagram
# 通過設定參與者(participant)的順序控制展示順序
participant B
participant A
Note right of A: 倒霉, 碰到B了
A->B: Hello B, how are you ?
note left of B: 倒霉,碰到A了
B-->A: Fine, thx, and you?
note over A,B:快點溜，太麻煩了。。。
A->>B: I'm fine too.
note left of B: 快點打發了A
B-->>A: Great!
note right of A: 溜之大吉
A-xB: Wait a moment
loop Look B every minute
A->>B: look B, go?
B->>A: let me go?
end
B--xA: I'm off, byte
note right of A: 太好了, 他走了
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice:not so good :(
else is well
Bob->>Alice:good
end
opt Extra response
Bob->>Alice:Thanks for asking
end
示例2:
sequenceDiagram
# 通過設定參與者(participants)的順序控制展示模塊順序
participant Alice
participant Bob
participant John
Alice->John:Hello John, how are you?
loop Healthcheck
John->John:Fight against hypochondria
end
Note right of John:Rational thoughts <br/>prevail...
John-->Alice:Great!
John->Bob: How about you?
Bob-->John: good!
sequenceDiagram
# 通過設定參與者(participants)的順序控制展示模塊順序
participant Alice
participant Bob
participant John
Alice->John:Hello John, how are you?
loop Healthcheck
John->John:Fight against hypochondria
end
Note right of John:Rational thoughts <br/>prevail...
John-->Alice:Great!
John->Bob: How about you?
Bob-->John: good!
4. gantt diagram(甘特圖)
甘特圖是一類條形圖，由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也獨立的提出了此種圖形表示。通常用在對項目終端元素和總結元素的開始及完成時間進行的描述
關鍵字
title | 標題
----------|-------
dateFormat |日期格式
section |模塊
Completed | 已經完成
Active | 當前正在進行
Future | 后續待處理
crit | 關鍵階段
日期缺失 | 默認從上一項完成后
例如1:
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
例如2:
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
5. sequence（序列圖）
關鍵字:
title，定義序列圖的標題
participant，定義時序圖中的對象
note，定義對時序圖中的部分說明
方位控制
left of，表示當前對象的左側
right of，表示當前對象的右側
over，表示覆蓋在當前對象（們）的上面
{actor}，表示時序圖中的具體對象（名稱自定義）
箭頭分為以下幾種：
-> 表示實線實箭頭
–> 表示虛線實箭頭
->> 表示實線虛箭頭
–>> 表示虛線虛箭頭
例如:
title: 序列圖sequence 示例
# participant, 參與者
participant A
participant B
participant C
note left of A: A左側說明
note over B: 覆蓋B的說明
note right of C: C右側說明
# - 代表實線, -- 代表虛線; > 代表實箭頭, >> 代表虛箭頭
A->A:自己到自己
A->B:實線實箭頭
A-->C:虛線實箭頭
B->>C:實線虛箭頭
B-->>A:虛線虛箭頭
例如2:
A->B: 吃飯了沒？
# 可在文本中使用換行符
note right of B: B思考n秒
如何回答
B--A: 吃過了。你咧？
A->>B: 吃過了，吃過了！
graph LR
A->B: 吃飯了沒？
# 可在文本中使用換行符
note right of B: B思考n秒
如何回答
B--A: 吃過了。你咧？
A->>B: 吃過了，吃過了！
6. flow（流程圖）
start/end，表示程序的開始與結束
operation，表示程序的處理塊
subroutine，表示子程序塊
condition，表示程序的條件判斷
inputoutput，表示程序的出入輸出
right/left，表示當前連線在當前模塊上的起點(默認從下端開始)
yes/no， 表示condition判斷的分支(可以和right，left同時使用)
通過定義模塊與連接，再結合以上關鍵詞即可定義簡單流程圖的各個模塊。
模塊定義(模塊標識與模塊名稱可以任意定義名稱，但是不能為關鍵詞)：
模塊標識(相當于變量名)=>模塊關鍵詞: 模塊名稱(模塊中顯示的文字)
連接定義如下:
模塊標識1->模塊標識2
模塊標識1->模塊標識2->模塊標識3
...
進行連接的時候，可以通過right，left確定箭頭的起點。
使用condition關鍵詞定義的判斷框的連接需要結合yes或者no使用，如
cond1=>condition: x>0?
cond1(yes)->module1
cond1(no)->moudle2
指定方向,如果后面占用了這個方向, 前面的無效
cond1(yes,right)->module1
cond1(no)->moudle2
先自定義變量,然后畫圖
st=>start: 開始
e=>end: 結束
op=>operation: 輸入x
sub=>subroutine: 是否重新輸入
cond1=>condition: x>0?
cond2=>condition: yes/no
io=>inputoutput: 輸出x
st(right)->op->cond1
cond1(yes)->io(right)->e
cond1(no)->sub(right)->cond2()
cond2(yes, right)->op
cond2(no)->e
st=>start: 開始
e=>end: 結束
op=>operation: 輸入x
sub=>subroutine: 是否重新輸入
cond1=>condition: x>0?
cond2=>condition: yes/no
io=>inputoutput: 輸出x
st(right)->op->cond1
cond1(yes)->io(right)->e
cond1(no)->sub(right)->cond2()
cond2(yes, right)->op
cond2(no)->e
從〇開始,回到〇
總結
以上是生活随笔為你收集整理的Mermaid 绘图总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 轻松实现突破网管限制（SoftEther
- 下一篇： 七阶拉丁方阵_最强大脑七阶立方之战规则解