一：基礎語法--流程圖
所有流程圖都由節點、幾何形狀和邊、箭頭或線組成。mermaid代碼定義了這些節點和邊的制作和交互方式。它還支持不同類型的箭頭、多方向箭頭以及與子圖的鏈接。
1.1：節點（默認的）
flowchart LR
id
flowchart LR id
提示：id展示在方格中，即id即作為節點對象，也作為節點的名字。
1.2：帶有文字的節點
默認節點對象就是節點的名稱，但是我們也可以設置不同的名字
flowchart LR
id1[This is the text in the box]
flowchart LR id1[This is the text in the box]
二：流程圖的方向
2.1:設置從上到下的方向(TD or TB).
flowchart TD
Start --> Stop
flowchart TD Start --> Stop
2.1:設置從左到右的方向 (LR).
flowchart LR
Start --> Stop
flowchart LR Start --> Stop
2.3:流程圖的方向
- TB - top to bottom（上到下）
- TD - top-down/ same as top to bottom上到下）
- BT - bottom to top（下到上）
- RL - right to left（右到左）
- LR - left to right（左到右）
三：節點的形狀
3.1:圓邊的節點
flowchart LR
id1(This is the text in the box)
flowchart LR id1(This is the text in the box)
3.2:足球場形狀的節點
flowchart LR
id1([This is the text in the box])
flowchart LR id1([This is the text in the box])
3.3:子程序（subroutine）節點
flowchart LR
id1[[This is the text in the box]]
flowchart LR id1[[This is the text in the box]]
3.4:圓柱形節點
flowchart LR
id1[(Database)]
flowchart LR id1[(Database)]
3.5:圓形節點
flowchart LR
id1((This is the text in the circle))
flowchart LR id1((This is the text in the circle))
3.6:菱形節點
flowchart LR
id1{This is the text in the box}
flowchart LR id1{This is the text in the box}
3.7 :六角形節點
flowchart LR id1{{This is the text in the box}}
3.8:平行四邊形
flowchart TD
id1[/This is the text in the box/]
id2[\This is the text in the box\]
flowchart TD id1[/This is the text in the box/] id2[\This is the text in the box\]
3.9:梯形節點
flowchart TD
A[/Christmas\]
B[\Go shopping/]
flowchart TD A[/Christmas\] B[\Go shopping/]
四：連接兩個節點
提示：可以連接兩個節點通過一條線，可以設置不同類型的線和帶有文字的線
4.1:帶箭頭的連接線
flowchart LR
A-->B
C --- D
flowchart LR A-->B C --- D
4.2:直接連接
flowchart LR
A --- B
4.3:帶文字的線
flowchart LR
A-- This is the text! ---B
OR
flowchart LR
A---|This is the text|B
flowchart LR A-- This is the text! ---B
4.4:帶箭頭的文字線
flowchart LR
A-->|text|B
OR
flowchart LR
A-- text -->B
flowchart LR A-- text -->B
4.5：虛線和帶文字的虛線
flowchart LR;
A-.->B;
B-. text .-> C
flowchart LR; A-.->B; B-. text .-> C
4.6:加粗線
flowchart LR
A ==> B
C == text ==> D
flowchart LR A ==> B C == text ==> D
五：多條線
5.1:一行中（多個節點）聲明多條線
flowchart LR
A -- text --> B -- text2 --> C
flowchart LR A -- text --> B -- text2 --> C
flowchart LR
a --> b & c--> d
flowchart LR a --> b & c--> d
5.2:在一行中描述一個依賴關系
flowchart TB
A & B--> C & D
flowchart TB A & B--> C & D
備注：上圖關系可以通過4行進行描述，一個建議-如果過度最求簡潔可能會失效代碼的可讀性，不便於理解。
flowchart TB
A --> C
A --> D
B --> C
B --> D
新的箭頭類型
flowchart LR
A --o B
B --x C
flowchart LR A --o B B --x C
多方向的箭頭
flowchart LR
A o--o B
B <--> C
C x--x D
flowchart LR A o--o B B <--> C C x--x D
加長線
In the following example, two extra dashes are added in the link from node B to node E, so that it spans two more ranks than regular links:
flowchart TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
flowchart TD A[Start] --> B{Is it?}; B -- Yes --> C[OK]; C --> D[Rethink]; D --> B; B -- No ----> E[End];
對於虛線或粗線鏈接，添加的字符為等號或點，匯總如下表
| Length | 1 | 2 | 3 |
|---|---|---|---|
| Normal | --- |
---- |
----- |
| Normal with arrow | --> |
---> |
----> |
| Thick | === |
==== |
===== |
| Thick with arrow | ==> |
===> |
====> |
| Dotted | -.- |
-..- |
-...- |
| Dotted with arrow | -.-> |
-..-> |
-...-> |
子圖-語法
subgraph title
graph definition
end
舉例：
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
flowchart TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end
給子圖設置一個id
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
flowchart TB c1-->a2 subgraph ide1 [one] a1-->a2 end
設置子圖的邊
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
flowchart TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end one --> two three --> two two --> c2
結束語：基本的流程圖語法已經介紹完畢，可能是因為Typora版本的原因，對子圖的邊和子圖的方向不支持。