Markdown之流程圖

流程圖

代碼塊語法

```mermaid
graph 流程圖方向
流程圖的內容
```

流程圖方向

• TB與TD都是從上到下。
• BT 從下到上。
• RL 從右到左。
• LR 從左到右。

基礎圖形

源碼

```mermaid
graph TD
    id[帶文本的矩形]
    id4(帶文本的圓角矩形)
    id3>帶文本的不對稱的矩形]
    id1{帶文本的菱形}
    id2((帶文本的圓形))
```

效果如下

graph TD id[帶文本的矩形] id4(帶文本的圓角矩形) id3>帶文本的不對稱的矩形] id1{帶文本的菱形} id2((帶文本的圓形))

示例

從左向右（LR）

示例一（簡單用法）

源碼實現

```mermaid
graph LR
      A[Python] --> B[人生苦短,我用Python]
```

效果如下

graph LR A[Python] --> B[人生苦短,我用Python]

示例二（圖形嵌套用法）

源碼實現

```mermaid
graph LR
    start[開始] -.描述.-> input[輸入A,B,C]
    input --描述--> conditionA{A是否大於B}
    conditionA -- YES --> conditionC{A是否大於C}
    conditionA -- NO --> conditionB{B是否大於C}
    conditionC -- YES --> printA[輸出A]
    conditionC -- NO --> printC[輸出C]
    conditionB -- YES --> printB[輸出B]
    conditionB -- NO --> printC[輸出C]
    printA ==> stop[結束]
    printC --> stop
    printB == 描述 ==> stop
```

效果如下

graph LR start[開始] -.描述.-> input[輸入A,B,C] input --描述--> conditionA{A是否大於B} conditionA -- YES --> conditionC{A是否大於C} conditionA -- NO --> conditionB{B是否大於C} conditionC -- YES --> printA[輸出A] conditionC -- NO --> printC[輸出C] conditionB -- YES --> printB[輸出B] conditionB -- NO --> printC[輸出C] printA ==> stop[結束] printC --> stop printB == 描述 ==> stop

示例三（圖形樣式自定義用法）

源碼實現

```mermaid
graph LR
    id1(開始)-->id2(結束)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
```

效果如下

graph LR id1(開始)-->id2(結束) style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5 style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5