關於寫作那些事之快速上手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]

效果

項目地址: 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 (從右往左)四種.

核心: 僅支持上下左右四個垂直方向,是英文單詞首字母大寫縮寫.

從上到下: from Top to Bottom

源碼

graph TB
    Start --> Stop

效果

從下到上: from Bottom to Top

源碼

graph BT
    Start --> Stop

效果

從左往右: from Left to Right

源碼

graph LR
    Start --> Stop

效果

從右往左: 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

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

什麼是Mermaid流程圖

Mermaid流程圖快速入門

佈局方向

形狀

一次性節點

可重複節點

連接線

高級用法

快速入門流程圖回顧總結

英文單詞縮寫

幾何化形狀

有限語法

gitbook 入門教程之一招徹底解決 favicon 圖標失效問題 favicon-absolute 項目

gitbook 入門教程之網站域名備案 icp 插件歡迎訪問 gitbook-plugin-icp 官網 👋

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

原來實現釘釘自動簽到如此簡單,每天準時上下班不是夢

go 學習筆記之解讀什麼是defer延遲函數

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結