Markdown高階使用之流程圖
阿新 • • 發佈：2020-12-31
> 流程圖在Markdown中的的表現形式就是程式碼塊，程式碼塊語言標記為mermaid。主要內容大體分為：方向、節點、節點間的連線關係，下面就圍繞這三個點來整理。
>
> mermaid支援流程圖、甘特圖和時序圖，但是經過這次嘗試，結論就是畫圖的話還是使用專業的畫圖工具，這個只能作為一種簡單選項用在簡單場景下。所以這裡就只總結一下流程圖的使用，其它兩種就沒必要了，不是怎麼好用。
***
## 流程圖方向
流程圖總體分為橫向和縱向兩種。總共四個方向：T-上，B\D-下；L-左，R-右。使用方式就是橫向的兩兩結合，縱向的兩兩結合。比如從左到右為LR，從上到下為TB或者TD。
從上到下演示：
~~~markdown
~~~mermaid
graph TD
A --> B
~~~
~~~
從上到下的展示效果：
~~~mermaid
graph TD
A --> B
~~~
從左到右演示：
~~~markdown
~~~mermaid
graph LR
A --> B
~~~
~~~
從左到右展示效果：
~~~mermaid
graph LR
A --> B
~~~
***
## 流程圖節點
下面展示的流程圖節點有矩形 '[]'，圓角矩形 '()'，不對稱矩形 '>]'，菱形 '{}'，圓形 '(())'。在每個節點前面需要唯一標識該節點ID。如下示例：
~~~markdown
~~~mermaid
graph TD
a1[帶文字矩形]
a2(帶文字圓角矩形)
a3>帶文字不對稱矩形]
b1{帶文字菱形}
c1((帶文字圓形))
~~~
~~~
其展示效果如下：
```mermaid
graph TD
a1[帶文字矩形]
a2(帶文字圓角矩形)
a3>帶文字不對稱矩形]
b1{帶文字菱形}
c1((帶文字圓形))
```
***
## 節點間的連線關係
+ 節點之間的連線線分為：實線 '---'、加粗實線 '==='、虛線 '-.-'。
+ 帶箭頭的連線線分為：帶箭頭實線 '-->'、帶箭頭加粗實線 '==>'，帶箭頭虛線 '-.->'。
+ 如果要在連線線上加上備註，則上面兩類加備註的方式如下：
+ 實線備註 '--yes---'，加粗實線備註 '==yes==='，虛線備註 '-.yes.-'。
+ 帶箭頭實線備註 '--yes-->'，帶箭頭加粗實線備註 '==yes==>'，帶箭頭虛線備註 '-.yes.->'
其中，每種連線符號的左邊是開始節點，右邊是結束節點，可以由同一個節點指向不同節點，也可以由不同節點指向同一個節點，實現各種指向方式都是通過節點ID標註。
示例如下：
~~~markdown
~~~mermaid
graph LR
A10[A10] --- A11[A11]
A20[A20] === A21[A21]
A30[A30] -.- A31[A31]
B10[B10] --> B11[B11]
B20[B20] ==> B21[B21]
B30[B30] -.-> B31[B31]
C10[C10] --yes--> C11[C11]
C20[C20] ==yes==> C21[C21]
C30[C30] -.yes.-> C31[C31]
~~~
~~~
其展示效果如下：
~~~mermaid
graph LR
A10[A10] --- A11[A11]
A20[A20] === A21[A21]
A30[A30] -.- A31[A31]
B10[B10] --> B11[B11]
B20[B20] ==> B21[B21]
B30[B30] -.-> B31[B31]
C10[C10] --yes--> C11[C11]
C20[C20] ==yes==> C21[C21]
C30[C30] -.yes.-> C31[C31]
~~~
由同一個節點開始，使用方式如下，對於後面如果使用同一個節點，只用指明ID即可。
~~~markdown
~~~mermaid
graph LR
A[開始節點] --> B[結束節點1]
A --> C[結束節點2]
~~~
~~~
~~~mermaid
graph LR
A[開始節點] --> B[結束節點1]
A --> C[結束節點2]
~~~
***
## 氣泡排序流程圖
在這裡用一個氣泡排序來簡單的練習一下上面的幾個點，首先將氣泡排序的偽碼貼上上來：
~~~java
BUBBLESORT(A)
for i = 1 to A.length-1
for j = A.length downto i + 1
if A[j] < A[j - 1]
exchange A[j] with A[j - 1]
~~~
演示程式碼如下：
~~~markdown
~~~mermaid
graph TD
start([開始]) --> 賦值arr[賦值arr]
賦值arr --> 賦值len[len = arr.length]
賦值len --> 賦值i[i = 0]
賦值i --> 第一層迴圈{i < len}
第一層迴圈 --yes--> 賦值j[j = 1]
賦值j --> 第二層迴圈{"j < len - i ?"}
第二層迴圈 --yes--> 判斷{"arr[j - 1] < arr[j] ?"}
判斷 --yes--> 定義臨時變數["int temp = arr[j - 1]"]
定義臨時變數 --> 交換aj["arr[j - 1] = arr[j]"]
交換aj --> 交換aj-1["arr[j] = temp"]
交換aj-1 --> j自增["j++"]
j自增 --> 第二層迴圈
判斷 --no--> j自增
第二層迴圈 --no--> i自增["i++"]
i自增 --> 第一層迴圈
第一層迴圈 --no--> endd([結束])
~~~
~~~
展示效果如下：
~~~mermaid
graph TD
start([開始]) --> 賦值arr[賦值arr]
賦值arr --> 賦值len[len = arr.length]
賦值len --> 賦值i[i = 0]
賦值i --> 第一層迴圈{i < len}
第一層迴圈 --yes--> 賦值j[j = 1]
賦值j --> 第二層迴圈{"j < len - i ?"}
第二層迴圈 --yes--> 判斷{"arr[j - 1] < arr[j] ?"}
判斷 --yes--> 定義臨時變數["int temp = arr[j - 1]"]
定義臨時變數 --> 交換aj["arr[j - 1] = arr[j]"]
交換aj --> 交換aj-1["arr[j] = temp"]
交換aj-1 --> j自增["j++"]
j自增 --> 第二層迴圈
判斷 --no--> j自增
第二層迴圈 --no--> i自增["i++"]
i自增 --> 第一層迴圈
第一層迴圈 --no--> endd([結束])
~~~