關於寫作那些事之快速上手Mermaid流程圖

本文主要介紹瞭如何快速上手 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 的值而是 <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 語法繪製流程圖,支援更改流程圖節點形狀,新增描述文字以及更改連線線樣式等等.

英文單詞縮寫

四種佈局方向的值是英文單詞首字母大寫縮寫形式,預設僅支援垂直方向.

幾何化形狀

鍵磁碟機代號號形象化幾何形狀,組合形式表示形狀的疊加,其中最外層符號是主形狀,巢狀符號是輔助形狀.

• 基本單元

• 組合單元

有限語法

不論是節點形狀還是連線線樣式,語法支援是有限的,並不是隨意組合的疊加狀態,也可能隨著後續更新會支援更多,一切以官方文件為主.

除了提供最基礎的操作節點的能力之外,還可以根據 JS 和 CSS 相關知識高度自定義流程圖行為表現,具體可參考官方文件.

官方文件:

• 互動能力 Interaction :
• 外觀樣式 Styling and classes :
• 字型支援 Basic support for fontawesome:
• 空格分隔