Mermaid基礎語法(一)

流程圖-基本語法

Graph

graph用於定義流程局節點的走線方向；
T D或者TB可以讓流程圖從上往下走。

```mermaid
graph T D
Start --> Stop
```

graph TD Start --> Stop

LR 從左到右

graph LR
    Start --> Stop

graph LR Start --> Stop

流程圖方向定義語法：

• TB從上到下
• T D 從上到下(與TB相同)
• BT 從下到上
• RL 從右到左
• LR 從左到右

No Des&Shapes

默認情況下流程圖的節點形狀為直角矩形，可通過括號的組合來改變流程圖節點的形狀

graph LR
    A --> B
    C(A) --> D([Shape])

graph LR A --> B C(A) --> D([Shape])

mermai D添加括號改變節點形狀時語法也有了些許的改變;添加括號語法后，括號內的內容就是節點里顯示的內容且里面必須有內容，括號外面的內容變成了節點形狀的name(在一個圖表中name不能相同);
節點形狀語法表

語法	說明
start[start]	直角矩形
start(start)	圓角矩形
start([start])	體育場形
start[[start]]	長燈光形
start[(start)]	圓柱體形
start((start))	正圓形
start>start]	標簽形
start{start}	菱形
start{{start}}	六角形
start[/start/]	平行四邊形
start[\start]	反向平行四邊行
start[/start]	梯形
start[\start/]	倒梯形

Line&Label

節點形狀間可以添加各式各樣的連線，並且可以在線上添加注釋；

graph TB
    A --> B     
    C --- D
    E -- Run! --- F
    G ---|Run!| H
    I -.- J
    K .-> L
    M -.Run!.-> N
    O ==Run!==> P
    Q --Run!--> R --stop!--> S

graph TB A --> B C --- D E -- Run! --- F G ---|Run!| H I -.- J K .-> L M -.Run!.-> N O ==Run!==> P Q --Run!--> R --stop!--> S

flowchart TB
    T--> U & V --> W
    X & Y --> Z & ZZ

flowchart TB T--> U & V --> W X & Y --> Z & ZZ

Flowchart

特殊類型的連線

flowchart和graph比連線變得平滑了些許，而且flowchart有更多的連線類型

flowchart TB    
    A --o B --x C & D
    E & F --> G &  H
    I <--> J 
    K x--x L
    M o--o N

flowchart TB A --o B --x C & D E & F --> G & H I <--> J K x--x L M o--o N

較長連線(下面的代碼要在8.8以上的mermaid上才能正常運行)

graph TB
    subgraph one
    A[A0] --> B{B0}
    B -->|Yes| C[OK0]
    C --> D[Rethink0]
    D --> B
    B ----> |No| E[End0]
    end
    subgraph two
    F[A1] --> G{B1}
    G -->|Yes| H[OK1]
    H--> I[Rethink1]
    I --> G
    G -- NO ----> J[End1]
    end

graph TD subgraph one A[A0] --> B{B0} B -->|Yes| C[OK0] C --> D[Rethink0] D --> B B ----> |No| E[End0] end subgraph two F[A1] --> G{B1} G -->|Yes| H[OK1] H--> I[Rethink1] I --> G G -- NO ----> J[End1] end

更多線的修飾符:

長度	1	2	3
正常	---	----	-----
普通帶箭頭	-->	--->	---->
粗	===	====	=====
粗帶箭頭	==>	===>	====>
點綴	-.-	-..-	-...-
點綴帶箭頭	-.->	-..->	-...->

更加復雜的注釋信息

在寫注釋的時候可能會使用到一些符號表情，這些符號表情可能會破壞代碼結構，這是可以使用雙引號將注釋信息轉成字符串

graph LR
    A--"Run! && ❤❤ "-->B--"🕒stop!"-->C

graph LR A--"Run! && ❤❤ "-->B--"🕒stop!"-->C

轉義字符

graph LR
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]

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 TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end

graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

graph TB c1-->a2 subgraph ide1 [one] a1-->a2 end

更多有趣的用法官方文檔