# FlowChart 流程圖
流程圖是一種視覺化工具，用於描述和表示一個流程、系統或過程中各個步驟、活動、決策和連接的有序圖形呈現方式。它通常以圖形方式展示，並用於清晰地展示和解釋複雜的流程或程序，以便讓人們更容易理解、分析和管理。
例如以下是一個 Mermaid 流程圖範例：
```mermaid
graph LR;
A((起點)) --> B(事件)
B --> C{決策}
C -->|是| D[結果 1] --> F
C -->|否| E[結果 2] --> F
F((結束))
```
## Mermaid 語法
### 定義作圖方向
定義流程圖的關鍵語法為 `graph` 或 `flowchart`
使用 `TB` 或 `LR` 定義作圖方向為 垂直 或者 左右。
```
flowchart LR;
```
更多方向說明：
- TB - Top to bottom
- TD - Top-down/ same as top to bottom
- BT - Bottom to top
- RL - Right to left
- LR - Left to right
### 定義節點
流程圖每個節點稱作 node，任何字元都能代表一個節點。
```
flowchart LR;
A
```
```mermaid
flowchart LR;
A
```
#### 節點描述
在節點後接 `[]` 用以描述節點。
用 `[""]` 以多行文字內容描述。
顯示時，將以描述內容顯示節點。
```
flowchart LR;
A[Dog]
B["Hello
world"]
A --> B
```
```mermaid
flowchart LR;
A[Dog]
B["Hello
world"]
A --> B
```
#### 節點形狀
使用不同括弧來表達不同節點：
```
flowchart TB;
DB[(資料庫)]
round(圓角矩形)
circle((圓形))
Double-circle(((雙重圓)))
rect[方形]
subroutine[[子程序]]
stadium-shaped([膠囊形])
asymmetric>旗幟]
rhombus{選擇}
hexagon{{六邊形}}
Parallelogram[/平行四邊形/]
Parallelogram-alt[\平行四邊形\]
Trapezoid[/梯形\]
Trapezoid-alt[\倒梯形/]
```
```mermaid
flowchart TB;
DB[(資料庫)]
round(圓角矩形) ---
circle((圓形)) ---
DC(((雙重圓)))
rect[方形] ---
subroutine[[子程序]]
stadium-shaped([膠囊形])
asymmetric>旗幟]
rhombus{選擇} ---
hexagon{{六邊形}}
rect --- R1[/平行四邊形/]
rect --- R2[\平行四邊形\]
rect --- R3[/梯形\]
rect --- R4[\倒梯形/]
```
### 定義連線
兩個節點之間的連線，使用三個橫線 `---` 代表。
```
flowchart LR;
A --- B
```
```mermaid
flowchart LR;
A --- B
```
#### 線形
使用不同的線來連接節點，使用 `&` 來連接到多個節點，透過增加中間字元可以任意增減長度：
例如：`-->` 可以用 `---->` 表達更長的箭頭。
```
flowchart LR;
A === B
B --> C & D & E
C --x E
D --o F
E o--o G
F x----x H
H <--> G
G -.- I
G -...-> J
G -.-o K
```
```mermaid
flowchart LR;
A === B
B --> C & D & E
C --x E
D --o F
E o--o G
F x----x H
H <--> G
G -.- I
G -...-> J
G -.-o K
```
#### 文字描述
使用 `| 描述 |` 來為線段添加描述文字，可以加在線段後方，或是線段中間：
1. `-->|是|`
2. `--否-->`
```mermaid
flowchart LR;
A -->|是| B
A --否--> C
```
### 定義樣式
使用 `style` 關鍵字，針對單一節點定義樣式。
使用 `classDef` 關鍵字定義 Style Class。
使用 `:::` 套用 Class 樣式。
```
flowchart LR
A:::className --> B
classDef className stroke:#FF0,stroke-width:1px;
style B fill:#D52
```
```mermaid
flowchart LR
A:::className --> B
classDef className stroke:#FF0,stroke-width:1px;
style B fill:#D52
```
> 使用 `classDef default fill:#f9f,stroke:#333,stroke-width:4px;` 來修改預設樣式，沒有套用 Class 樣式的節點都會套上預設樣式。
> `classDef node` 會修改全部節點樣式(具有覆蓋效果)。
#### 定義線段樣式
由於線段無法像 node 那樣使用 Id 來選取用以定義樣式，因此使用「順序」來指定。
例如：
```
linkStyle 1,3,5 stroke:#ff3,stroke-width:4px,color:red;
```
或是用 default 對全部線段定義：
```
linkStyle default stroke:#ff3,stroke-width:4px,color:red;
```
#### 定義曲線樣式
使用 Configuration 來定義曲線如何渲染：
```
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
```
可用的選項有：`basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`, and `stepBefore`。
有關可用曲線的完整列表，包括自訂曲線的說明，請參閱 [d3-shape](https://github.com/d3/d3-shape/) 專案中的 [Shapes 文件](https://github.com/d3/d3-shape/blob/main/README.md#curves)。
### 子圖形
使用關鍵字 `subgraph` 來定義子圖形，`end` 來表示子圖形結束。
```
subgraph 標題
圖形描述
end
```
例如：
```mermaid
flowchart TB;
A-->B
subgraph A系統
A-->a
end
subgraph B系統
b-->B
end
subgraph 子系統
b-->b1-->b2 & b3
end
```
### 註解
```
%% 註解內容
```
Sign in with Wallet
Connect another wallet