本文主要介紹了如何快速上手 Mermaid 流程圖,不用貼圖上傳也不用拖拉點拽繪制,基於源碼實時渲染流程圖,操作簡單易上手,廣泛被集成於主流編輯器,包括 markdown 寫作環境.
通過本節內容你將學習到以下主要內容:
- 了解什么是流程圖以及
Mermaid流程圖; - 掌握並能記住如何繪制
Mermaid流程圖; - 了解
Gitbook寫作環境的相關集成插件.
什么是Mermaid流程圖
關鍵詞
- 項目地址
- 在線編輯
- 官方文檔
千言萬語不如一張圖,使用圖形展示事物處理流程的圖形稱之為流程圖.
Mermaid是一個基於 Javascript 的圖解和制圖工具.它基於 markdown 語法來簡化和加速生成流程圖的過程,也不止於生成流程圖.
源碼
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
效果
- 項目地址: https://github.com/mermaid-js/mermaid
- 在線編輯: https://mermaidjs.github.io/mermaid-live-editor/
- 官方文檔: https://mermaid-js.github.io/mermaid/#/flowchart
Mermaid流程圖快速入門
布局方向
關鍵詞
+ TB
+ BT
+ LR
+ RL
流程圖布局方向,由四種基本方向組成,分別是英文單詞: top(上), bottom(下),left(左)和 right(右).其中可選值: TB (從上到下),BT (從下到上),LR (從左往右)和 RL (從右往左)四種.
核心: 僅支持上下左右四個垂直方向,是英文單詞首字母大寫縮寫.
- TB
從上到下: from Top to Bottom
源碼
graph TB
Start --> Stop
效果
- BT
從下到上: from Bottom to Top
源碼
graph BT
Start --> Stop
效果
- LR
從左往右: from Left to Right
源碼
graph LR
Start --> Stop
效果
- RL
從右往左: from Right to Left
源碼
graph RL
Start --> Stop
效果
形狀
關鍵詞
- 節點形狀
+ [矩形]
- [[暫不支持]]
- [(圓柱)]
- [{暫不支持}]
- [/平行四邊形/]
- [\平行四邊形\]
- [/梯形\]
- [\梯形/]
+ (圓角矩形)
- ((圓形))
- ([體育場])
- ({暫不支持})
+ {菱形}
- {{六邊形}}
- {[暫不支持]}
- {(暫不支持)}
+ >不對稱矩形]
流程圖節點形狀,默認支持矩形和圓兩種基本形狀,包括基本形狀的簡單變體,支持嵌套組合形式,其中 [] 表示矩形,() 表示圓弧,{} 表示尖角(竊以為 <> 更適合)等等.
核心: 最外層代表主形狀,內層輔助修飾.
一次性節點
一次性節點,默認表現為矩形節點,其文本內容直接顯示 id 的值,適合后續不會出現多次引用的情況.
id建議直接寫成有意義的文本描述而不是當成唯一標識.
源碼
graph TD
id
效果
可重復節點
可重復節點,指定節點形狀,其文本內容不再是 id 的值而是 <node shape> 的值,適合后續出現多次引用相同節點的情況.
id代表節點的唯一標識,當前節點的文本描述由<node shape>的值指定,建議id寫成有意義的唯一標識.
- 矩形
一般格式:
[node description],[]中括號表示節點是矩形形狀,node description是節點的描述文本.
源碼
graph LR
id1[This is the text in the box]
效果
- 圓角矩形
一般格式:
(node description),()小括號表示節點是圓角矩形形狀,node description是節點的描述文本.
源碼
graph LR
id1(This is the text in the box)
效果
- 體育場
一般格式:
([node description]),()小括號嵌套[]中括號表示節點是大弧度的圓角矩形形狀,也就是體育場形狀,node description是節點的描述文本.
源碼
graph LR
id1([This is the text in the box])
效果
- 圓柱
一般格式:
[(node description)],[]中括號嵌套()小括號表示節點是圓柱形狀,node description是節點的描述文本.
源碼
graph LR
id1[(Database)]
效果
- 圓形
一般格式:
((node description)),()小括號嵌套()小括號表示節點是圓形形狀,node description是節點的描述文本.
源碼
graph LR
id1((This is the text in the circle))
效果
- 不對稱矩形
一般格式:
>node description],左邊是右尖括號>,右邊是右中括號]表示不對稱矩形形狀,node description是節點的描述文本.
源碼
graph LR
id1>This is the text in the box]
效果
- 菱形
一般格式:
{node description},{}大括號表示菱形形狀,node description是節點的描述文本.
源碼
graph LR
id1{This is the text in the box}
效果
- 六角形
一般格式:
{{node description}},{}大括號嵌套{}大括號表示六角形形狀,node description是節點的描述文本.
源碼
graph LR
id1\{\{This is the text in the box\}\}
Gitbook語法中雙大括號{}表示特殊意義,上述源碼只能轉義處理,實際上並不需要\進行轉義.
效果
- 平行四邊形
一般格式:
[/node description/],[]中括號嵌套//左斜杠表示左斜平行四邊形形狀,node description是節點的描述文本.
源碼
graph TD
id1[/This is the text in the box/]
效果
- 平行四邊形
一般格式:
[\node description\],[]中括號嵌套\\右斜杠表示右斜平行四邊形形狀,node description是節點的描述文本.
源碼
graph TD
id1[\This is the text in the box\]
效果
- 梯形
一般格式:
[/node description\],[]中括號嵌套/\左右斜杠表示上短下長梯形形狀,node description是節點的描述文本.
源碼
graph TD
A[/Christmas\]
效果
- 另一種梯形
一般格式:
[\node description/],[]中括號嵌套\/右左斜杠表示上長下短梯形形狀,node description是節點的描述文本.
源碼
graph TD
B[\Go shopping/]
效果
連接線
關鍵詞
+ 實線/虛線
- --
- -.
+ 有箭頭/無箭頭
- >
- -
+ 有描述/無描述
- 實線
+ --描述文字
+ |描述文字|
- 虛線
+ -.描述文字
+ |描述文字|
+ 加粗
- ==
+ 組合形式
- -->
- ---
- -.->
- -.-
- 有描述實線有箭頭
+ --描述文字-->
+ -->|描述文字|
- 有描述實線無箭頭
+ --描述文字---
+ ---|描述文字|
- 有描述虛線有箭頭
+ -.描述文字-.->
+ -.->|描述文字|
- 有描述虛線無箭頭
+ -.描述文字-.-
+ -.-|描述文字|
- ==>
- ===
- 有描述加粗實線有箭頭(2)
+ ==描述文字==>
+ ==>|描述文字|
- 有描述加粗實線無箭頭(2)
+ ==描述文字===
+ ===|描述文字|
流程圖連接線樣式,支持實線和虛線以及有箭頭樣式和無箭頭樣式,除此之外還支持添加連接線描述文字,其中 -- 代表實線,實線中間多一點 -.- 代表虛線,添加箭頭用右尖括號 > ,沒有箭頭繼續用短橫線 -.
核心: 先實線再虛線,先有箭頭再去箭頭,左邊位置添加描述文字需要區分實現還是虛線,右邊位置添加描述文字格式一致.
- 有箭頭無描述實線
一般格式:
-->,其中--表示實線,>表示有箭頭.
源碼
graph LR
A-->B
效果
- 無箭頭實線
一般格式:
---,其中--表示實線,-表示無箭頭.
源碼
graph LR
A --- B
效果
- 帶描述的有箭頭實線
一般格式:
--connection line description-->,其中左邊的--添加到實線左邊位置,右邊的-->表示帶箭頭的實線.
源碼
graph LR
A-- text -->B
效果
一般格式:
|connection line description|,其中||添加到連接線右邊位置.
源碼
graph LR
A-->|text|B
效果
- 帶描述的無箭頭實線
一般格式:
--connection line description,其中左邊的--添加到實線左邊位置,右邊的---表示不帶箭頭的實線.
源碼
graph LR
A-- This is the text ---B
效果
一般格式:
|connection line description|,其中||添加到連接線右邊位置.
源碼
graph LR
A---|This is the text|B
效果
- 有箭頭虛線
一般格式:
-.connection line description.->,其中左邊的-.添加到虛線左邊位置,右邊的.->表示帶箭頭的虛線.
源碼
graph LR
A-. text .-> B
效果
- 有箭頭加粗實線
一般格式:
==>,表示加粗實線.
源碼
graph LR
A ==> B
效果
- 帶描述的有箭頭加粗實線
一般格式:
==connection line description,左邊的==添加到加粗實現左邊,右邊的==>代表加粗實線.
源碼
graph LR
A == text ==> B
效果
- 帶描述的有箭頭加粗實線
一般格式:
|connection line description|,其中||添加到連接線右邊位置.
源碼
graph LR
A ==>|text| B
效果
高級用法
關鍵詞
+ -->-->
+ &
+ ""
+ %%
+ subgraph
- 多節點鏈式連接
源碼
支持鏈式連接方式,A-->B-->C 等價於 A-->B 和 B-->C 形式.
graph LR
A -- text --> B -- text2 --> C
效果
- 多節點共同連接
支持共同連接方式,A-->B & C 等價於 A-->B 和 A-->C 形式.
源碼
graph LR
a --> b & c--> d
效果
- 多節點相互連接
多節點共同連接的變體形式,A & B --> C & D 等價於 A-->C ,A-->D,B-->C 和 B-->D 四種組合形式.
源碼
graph TB
A & B--> C & D
效果
- 雙引號包裹特殊字符
連接線描述文字存在特殊字符使用雙引號 "" 包裹處理,如遇到 [] 和 () 以及 {} 等特殊字符情況.
源碼
graph LR
id1["This is the (text) in the box"]
效果
- 雙引號包裹轉義字符
支持 Html 轉移字符
源碼
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
效果
- 嵌套子流程圖
定義
subgraph title
graph definition
end
示例
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
- 注釋語法
注釋以 %% 開頭並且獨占一行.
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
快速入門流程圖回顧總結
關鍵詞
- 英文單詞縮寫
- 幾何化形狀
- 有限語法
Mermaid 是一款開源的制圖工具,可使用 Markdown 語法繪制流程圖,支持更改流程圖節點形狀,添加描述文字以及更改連接線樣式等等.
英文單詞縮寫
四種布局方向的值是英文單詞首字母大寫縮寫形式,默認僅支持垂直方向.
| 中文 | 英文 | 示例 |
|---|---|---|
| 圖解 | graph | graph 流程圖類型標識 |
| 子圖 | subgraph | subgraph 嵌套子流程圖標識 |
| 上 | top | TB 或 BT ,從上到下或從下到上的布局方向 |
| 下 | bottom | BT 或 TB,從下到上或從上到下的布局方向 |
| 左 | left | LR 或 RL,從左往右或從右往左的布局方向 |
| 右 | right | RL 或 LR,從右往左或從左往右的布局方向 |
幾何化形狀
鍵盤符號形象化幾何形狀,組合形式表示形狀的疊加,其中最外層符號是主形狀,嵌套符號是輔助形狀.
- 基本單元
| 表示法 | 含義 | 類型 | 備注 |
|---|---|---|---|
[] |
矩形 | 節點形狀 | 支持 |
() |
圓角矩形 | 節點形狀 | 支持 |
{} |
菱形 | 節點形狀 | 支持 |
<> |
菱形 | 節點形狀 | 不支持 |
-- |
實線 | 連接線樣式 | 支持 |
-. |
虛線 | 連接線樣式 | 支持 |
== |
加粗實線 | 連接線樣式 | 支持 |
=: |
加粗虛線 | 連接線樣式 | 不支持 |
> |
有箭頭 | 連接線樣式 | 支持 |
- |
無箭頭 | 連接線樣式 | 支持 |
雙豎線 |
右邊連接線描述文字 | 連接線描述文字 | 支持 |
-- |
左邊實線連接線描述文字 | 連接線描述文字 | 支持 |
-. |
左邊虛線連接線描述文字 | 連接線描述文字 | 支持 |
== |
左邊加粗實線連接線描述文字 | 連接線描述文字 | 支持 |
=: |
左邊加粗虛線連接線描述文字 | 連接線描述文字 | 不支持 |
- 組合單元
| 表示法 | 含義 | 類型 | 備注 |
|---|---|---|---|
[[]] |
正方形 | 節點形狀 | 不支持 |
[()] |
圓柱體 | 節點形狀 | 支持 |
[{}] |
棱柱體 | 節點形狀 | 不支持 |
(()) |
圓形 | 節點形狀 | 支持 |
([]) |
體育場 | 節點形狀 | 支持 |
({}) |
圓弧 | 節點形狀 | 不支持 |
雙大括號 |
六邊形 | 節點形狀 | 支持 |
{[]} |
正多邊形 | 節點形狀 | 不支持 |
{()} |
圓弧 | 節點形狀 | 不支持 |
--> |
實線帶箭頭 | 連接線樣式 | 支持 |
--- |
實線無箭頭 | 連接線樣式 | 支持 |
-.> |
虛線帶箭頭 | 連接線樣式 | 不支持 |
-.-> |
虛線帶箭頭 | 連接線樣式 | 支持 |
.-> |
虛線帶箭頭 | 連接線樣式 | 支持 |
-.- |
虛線無箭頭 | 連接線樣式 | 支持 |
.- |
虛線無箭頭 | 連接線樣式 | 支持 |
==> |
加粗實線帶箭頭 | 連接線樣式 | 支持 |
=== |
加粗實線無箭頭 | 連接線樣式 | 支持 |
=:> |
加粗虛線帶箭頭 | 連接線樣式 | 不支持 |
=:=> |
加粗虛線帶箭頭 | 連接線樣式 | 不支持 |
=:= |
加粗虛線無箭頭 | 連接線樣式 | 不支持 |
:= |
加粗虛線無箭頭 | 連接線樣式 | 不支持 |
雙豎線 |
右邊連接線描述文字 | 連接線描述文字 | 支持 |
--connection line description--> |
左邊實線帶箭頭連接線描述文字 | 連接線描述文字 | 支持 |
-.connection line description-.-> |
左邊虛線帶箭頭連接線描述文字 | 連接線描述文字 | 支持 |
--connection line description--- |
左邊實線無箭頭連接線描述文字 | 連接線描述文字 | 支持 |
-.connection line description-.- |
左邊虛線無箭頭連接線描述文字 | 連接線描述文字 | 支持 |
==connection line description==> |
左邊加粗實線帶箭頭連接線描述文字 | 連接線描述文字 | 支持 |
=:connection line description=:=> |
左邊加粗虛線帶箭頭連接線描述文字 | 連接線描述文字 | 不支持 |
==connection line description=== |
左邊加粗實線無箭頭連接線描述文字 | 連接線描述文字 | 支持 |
=:connection line description=:= |
左邊加粗虛線無箭頭連接線描述文字 | 連接線描述文字 | 不支持 |
有限語法
不論是節點形狀還是連接線樣式,語法支持是有限的,並不是隨意組合的疊加狀態,也可能隨着后續更新會支持更多,一切以官方文檔為主.
除了提供最基礎的操作節點的能力之外,還可以根據 JS 和 CSS 相關知識高度自定義流程圖行為表現,具體可參考官方文檔.
官方文檔: https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes
- 交互能力 Interaction : https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction
- 外觀樣式 Styling and classes : https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction
- 字體支持 Basic support for fontawesome: https://mermaid-js.github.io/mermaid/#/flowchart?id=basic-support-for-fontawesome
- 空格分隔 https://mermaid-js.github.io/mermaid/#/flowchart?id=graph-declarations-with-spaces-between-vertices-and-link-and-without-semicolon
