mermaid簡介

• 請使用亮色主題觀看
• 舉個例子

graph LR; s-->|23333333|1 1-->|23333333|t 1-->|1|2 2-->|23333333|t s-->|23333333|2

Graph

• 關鍵字graph表示一個流程圖的開始，同時需要指定該圖的方向。例如

 graph LR
  A --- B

• 是這個樣子的

graph LR A --- B

• 各種方向

TB（top bottom）: 從上到下
BT（bottom top）: 從下到上
RL（right left）: 從右到左
LR（left right）: 從左到右
TD 與 TB 一樣表示從上到下

節點

• 有以下幾種節點和形狀：

默認節點 A
文本節點 B[bname]
圓角節點 C(cname)
圓形節點 D((dname))
非對稱節點 E>ename]
菱形節點 F{fname}

• 注意中間是不能有空格的
• 以上大寫字母表示節點，name表示它的名字，如下圖。默認節點的A同時表示該節點和它的名字，例如上圖的A和B。
• 舉個例子

源代碼

graph TB
    A
    B[bname]
    C(cname)
    D((dname))
    E>ename]
    F{fname}

graph TB A B[bname] C(cname) D((dname)) E>ename] F{fname}

連線

• 節點間的連接線有多種形狀，而且可以在連接線中加入標簽：

箭頭連接 A1 --> B1
開放連接 A2 --- B2
標簽連接 A3 --text--- B3 或者 A3 ---|text|B3
箭頭標簽連接 A4 --text--> B4 或者 A4 -->|text| B4
虛線開放連接 A5 .- B5 或者 A5 -.- B5 或者 A5 ..- B5
虛線箭頭連接 A6 .-> B6 或者 A6 -.-> B6 或者 A6 ..-> B6
標簽虛線連接 A7 -.text.- B7
標簽虛線箭頭連接 A8 -.text.-> B8
粗線開放連接 A9 === B9
粗線箭頭連接 A10 ==> B10
標簽粗線開放連接 A11 ==text=== B11
標簽粗線箭頭連接 A12 ==text==> B12

• 同時對於線的長短也是可以調整的，只需要多加幾個-就行了，但是不能再少了。
• 舉個例子

源代碼

graph TB
    A1 --> B1
    A2 --- B2
    A3 --text--- B3
    %% A3 ---|text| B3
    A4 --text--> B4
    %% A4 -->|text| B4
    A5 .- B5
    %% A5 -.- B5
    %% A5 ..- B5
    A6 .-> B6
    %% A6 -.-> B6
    %% A6 ..-> B6
    A7 -.text.- B7
    A8 -.text.-> B8
    A9 === B9
    A10 ==> B10
    A11 ==text=== B11
    A12 ==text==> B12
    A13 ---> B13

graph TB A1 --> B1 A2 --- B2 A3 --text--- B3 %% A3 ---|text| B3 A4 --text--> B4 %% A4 -->|text| B4 A5 .- B5 %% A5 -.- B5 %% A5 ..- B5 A6 .-> B6 %% A6 -.-> B6 %% A6 ..-> B6 A7 -.text.- B7 A8 -.text.-> B8 A9 === B9 A10 ==> B10 A11 ==text=== B11 A12 ==text==> B12 A13 ---> B13

子圖

• 使用subgraph建子圖，必須以end為結尾。

源代碼

graph TB
    subgraph one
        A1 --> B1
    end
    subgraph two
        A2 --> B2
    end
    subgraph three
        A3 --> B3
    end

graph TB subgraph one A1 --> B1 end subgraph two A2 --> B2 end subgraph three A3 --> B3 end

注釋

• mermaid注釋為%%

添加對font-awesome的圖表字體支持

• css添加引用 @import url(https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css);
• 引用的語法為：++fa:#icon class name#++

源代碼

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);

graph TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);

- Fold Code

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);