轉載自：https://blog.csdn.net/fenghuizhidao/article/details/79440583
保留給自己查看，需要查看原博客可點擊鏈接
Mermaid 實用教程
Mermaid 是一個用於畫流程圖、狀態圖、時序圖、甘特圖的庫，使用 JS 進行本地渲染，廣泛集成於許多 Markdown 編輯器中。
之前用過 PlantUML，但是發現這個東西的實現原理是生成 UML 的圖片后上傳服務端，每次再從服務端讀取，因此覺得不夠魯棒，隱私性也不好，因而棄用。
Mermaid 作為一個使用 JS 渲染的庫，生成的不是一個“圖片”，而是一段 HTML 代碼，因此安全許多。
官網：https://mermaidjs.github.io/
Github 項目地址：https://github.com/knsv/mermaid
接下來介紹 Mermaid 的流程圖及序列圖的語法，也就是大家在工作中常使用的圖表。
流程圖
圖表方向
Mermaid 支持多種圖表的方向，語法如下：
graph 方向描述
圖表中的其他語句...
其中“方向描述”為
| 用詞 | 含義 |
|---|---|
| TB | 從上到下 |
| BT | 從下到上 |
| RL | 從右到左 |
| LR | 從左到右 |
節點定義
即流程圖中每個文本塊，包括開始、結束、處理、判斷等。Mermaid 中每個節點都有一個 id，以及節點的文字。
| 表述 | 說明 |
|---|---|
| id[文字] | 矩陣節點 |
| id(文字) | 圓角矩形節點 |
| id((文字)) | 圓形節點 |
| id>文字] | 右向旗幟狀節點 |
| id{文字} | 菱形節點 |
需要注意的是，如果節點的文字中包含標點符號，需要時用雙引號包裹起來。
另外如果希望在文字中使用換行，請使用
替換換行
節點間的連線
| 表述 | 說明 |
|---|---|
| > | 添加尾部箭頭 |
| - | 不添加尾部箭頭 |
| - - | 單線 |
| - -text- - | 單線上加文字 |
| == | 粗線 |
| == text == | 粗線上加文字 |
| -.- | 虛線 |
| -.text.- | 虛線加文字 |
子圖表
使用以下語法添加子圖表
subgraph 子圖表名稱
子圖表中的描述語句...
end
對 fontawesome 的支持
使用 fa: #圖表名稱# 的語法添加 fontawesome。
舉個例子
graph TB
id1(圓角矩形)--普通線-->id2[矩形]
subgraph 子圖表
id2==粗線==>id3{菱形}
id3-.虛線.->id4>右向旗幟]
id3--無箭頭---id5((圓形))
end
序列圖
使用以下語法開始序列圖
sequenceDiagram
[參與者1][消息線][參與者2]:消息體
...
例如
sequenceDiagram
張三->>李四: 吃了嗎？
李四->>張三: 吃了
參與者
上例中的張三、李四都是參與者，上例中的語法是最簡單的，也可以明顯表明參與者有哪些
sequenceDiagram
participant 參與者 1
participant 參與者 2
...
participant 簡稱 as 參與者 3 #該語法可以在接下來的描述中使用簡稱來代替參與者 3
消息線
|類型|描述|
|->|無箭頭的實線|
|-->|無箭頭的虛線|
|->>|有箭頭的實線|
|-->>|有箭頭的虛線|
|-x|末端為叉的實線（表示異步）|
|--x|末端為叉的虛線（表示異步）|
處理中
在消息線末尾增加 + ，則消息接收者進入當前消息的“處理中”狀態；
在消息線末尾增加 - ，則消息接收者離開當前消息的“處理中”狀態。
或者使用以下語法直接說明某個參與者進入“處理中”狀態
activate 參與者
標注
語法如下
Note 位置表述 參與者: 標注文字
其中位置表述可以為
| 表述 | 含義 |
|---|---|
| right of | 右側 |
| left of | 左側 |
| over | 在當中，可以橫跨多個參與者 |
循環
語法如下
loop 循環的條件
循環體描述語句
end
判斷
alt 條件 1 描述
分支 1 描述語句
else 條件 2 描述 # else 分支可選
分支 2 描述語句
else ...
...
end
如果遇到可選的情況，即沒有 else 分支的情況，使用如下語法：
opt 條件描述
分支描述語句
end
舉個例子
sequenceDiagram
participant z as 張三
participant l as 李四
loop 日復一日
z->>l: 吃了嗎您吶？
l-->>z: 吃了，您呢？
activate z
Note left of z: 想了一下
alt 還沒吃
z-xl: 還沒呢，正准備回去吃
else 已經吃了
z-xl: 我也吃過了，哈哈
end
opt 大過年的
l-->z: 祝您新年好啊
end
end