Markdown高級使用之流程圖

• 2020 年 12 月 31 日
• 筆記
• Markdown, 工具使用

流程圖在Markdown中的的表現形式就是程式碼塊，程式碼塊語言標記為mermaid。主要內容大體分為：方向、節點、節點間的連接關係，下面就圍繞這三個點來整理。

mermaid支援流程圖、甘特圖和時序圖，但是經過這次嘗試，結論就是畫圖的話還是使用專業的畫圖工具，這個只能作為一種簡單選項用在簡單場景下。所以這裡就只總結一下流程圖的使用，其它兩種就沒必要了，不是怎麼好用。

流程圖方向

流程圖總體分為橫向和縱向兩種。總共四個方向：T-上，B\D-下；L-左，R-右。使用方式就是橫向的兩兩結合，縱向的兩兩結合。比如從左到右為LR，從上到下為TB或者TD。

從上到下演示：

​~~~mermaid
graph TD
A --> B
​~~~

從上到下的展示效果：

從左到右演示：

​~~~mermaid
graph LR
	A --> B
​~~~

從左到右展示效果：

流程圖節點

下面展示的流程圖節點有矩形 ‘[]’，圓角矩形 ‘()’，不對稱矩形 ‘>]’，菱形 ‘{}’，圓形 ‘(())’。在每個節點前面需要唯一標識該節點ID。如下示例：

​~~~mermaid
graph TD
    a1[帶文本矩形]
    a2(帶文本圓角矩形)
    a3>帶文本不對稱矩形]
    b1{帶文本菱形}
    c1((帶文本圓形))
​~~~

其展示效果如下：

節點間的連接關係

• 節點之間的連接線分為：實線 ‘—‘、加粗實線 ‘===’、虛線 ‘-.-‘。

• 帶箭頭的連接線分為：帶箭頭實線 ‘–>’、帶箭頭加粗實線 ‘==>’，帶箭頭虛線 ‘-.->’。

• 如果要在連接線上加上備註，則上面兩類加備註的方式如下：

  • 實線備註 ‘–yes—‘，加粗實線備註 ‘yes=’，虛線備註 ‘-.yes.-‘。

  • 帶箭頭實線備註 ‘–yes–>’，帶箭頭加粗實線備註 ‘yes>’，帶箭頭虛線備註 ‘-.yes.->’

其中，每種連接符號的左邊是開始節點，右邊是結束節點，可以由同一個節點指向不同節點，也可以由不同節點指向同一個節點，實現各種指向方式都是通過節點ID標註。

示例如下：

​~~~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即可。

​~~~mermaid
graph LR
	A[開始節點] --> B[結束節點1]
	A --> C[結束節點2]
​~~~

冒泡排序流程圖

在這裡用一個冒泡排序來簡單的練習一下上面的幾個點，首先將冒泡排序的偽碼粘貼上來：

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]

演示程式碼如下：

​~~~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([結束])
​~~~

展示效果如下：