本文主要介紹了如何快速上手 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]

效果

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 的值而是 的值,適合后續出現多次引用相同節點的情況.

id 代表節點的唯一標識,當前節點的文本描述由 的值指定,建議 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 相關知識高度自定義流程圖行為表現,具體可參考官方文檔.

總結

以上是生活随笔為你收集整理的l流程图平行四边形_关于写作那些事之快速上手Mermaid流程图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。