markdown 中流程圖詳解
阿新 • • 發佈：2018-12-23
目錄
markdown有不同的外掛實現，對應的語法也不太一樣，對於外掛就是把引用的語法對應成相應的標籤，本文以CSDN中寫作為例進行分別對mermaid和flowchart進行例項說明和語法解釋。
1. Mermaid 流程圖
```mermaid
graph TB
A[Apple]-->B{Boy}
A---C(Cat)
B.->D((Dog))
C==喵==>D
style A fill:#2ff,fill-opacity:0.1,stroke:#faa,stroke-width:4px
style D stroke:#000,stroke-width:8px;
```
語法結構
```mermaid
graph 方向
節點以及節點連線（定義和連線步驟可以分開）
（樣式調整）
```
顯示方向
- TB/TD（ top bottom/top down）表示從上到下
- BT（bottom top）表示從下到上
- RL（right left）表示從右到左
- LR（left right）表示從左到右
節點型別
節點本身的展現形式，是通過不同括號來代表各自不同的形狀，預設為矩形。
- 預設節點： A
- 矩形節點： B[矩形]
- 圓角矩形節點： C(圓角矩形)
- 圓形節點： D((圓形))
- 非對稱節點： E>非對稱]
- 菱形節點： F{菱形}
語法詳解
節點連線
線條本身的形式有多種，通過常規的英文格式的格式來標識，具體如下：
- 箭頭連線 A1- ->B1
- 開放連線 A2- - -B2
- 虛線箭頭連線 A3.->B3 或者 A3-.->B3
- 虛線連線 A4.-B4 或者 A4-.-B4
- 粗線箭頭連線 A5==>B5
- 粗線開放連線 A6===B6
- 標籤虛線箭頭連線 A7-.text.->B7
- 標籤開放連線 A8- -text- - -B8
節點樣式
樣式寫法跟向量圖（SVG）中CSS的寫法一致，含有的屬性有：
style 節點 樣式
2. Flowchart流程圖
示例
```mermaid
flowchat
st=>start: 開始
e=>end: 結束
op1=>operation: 操作1 | past
op2=>operation: 操作2 | current
op3=>operation: 操作3 | future
pa=>parallel: 多輸出操作4 | approved
cond=>condition: 確認？ | rejected
st->op1->cond
cond(true)->e
cond(no)->op2(right)->op3->pa(path1,right)->op1
pa(path2,left) ->e
[email protected]>op1({"stroke":"Blue"})@>cond({"stroke":"Green"})@>e({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})
```
語法結構
```mermaid
flowchat
定義節點
連線節點
（樣式調整）
```
節點型別
目前官網提供7種節點，其實還有很多別的節點型別，但可能外掛指令碼還沒支援。
- 開始（橢圓形）：start
- 結束（橢圓形）：end
- 操作（矩形）：operation
- 多輸出操作（矩形）：parallel
- 條件判斷（菱形）：condition
- 輸入輸出（平行四邊形）：inputoutput
- 預處理/子程式（聖旨形）：subroutine
語法詳解
節點定義
變數名=>節點標識: 節點顯示名
節點連線
變數名1->變數名2->...->變數名n
連線樣式
設定變數m和變數n之間連線的樣式，具體樣式由變數n後面key-value控制，需要兩個變數之間有直接連線。語法中的連線符為（@>）。
變數名[email protected]>變數名n({"key":"value"})
關鍵字
- yes/true：condition型別變數連線時，用於分別表示yes條件的流向
- no/false：同上，表示否定條件的流向
- left/right：表示連線出口在節點位置（預設下面是出口，如op3），可以跟condition變數一起用：cond(yes,right)
- path1/path2/path3：parallel變數的三個出口路徑（預設下面是出口）
節點狀態
為節點設定不同的狀態，可以通過不同的顏色顯示，其中狀態包括下面6個，含義如英文所示，不過CSDN中好像目前還不支援：
- past
- current
- future
- approved
- rejected
- invalid
3. 時序圖
示例
```mermaid
sequenceDiagram
participant 張 as 張三
participant 李 as 李四
participant 王 as 王五
張 ->> +李: 你好！李四, 最近怎麼樣?
李-->> 王: 你最近怎麼樣，王五？
李--x -張: 我很好，謝謝!
activate 王
李-x 王: 我很好，謝謝!
Note over 李,王: 李四想了很長時間, 文字太長了<br/>不適合放在一行.
deactivate 王
loop 李四再想想
李-->>王: 我還要想想
王-->>李: 想想吧
end
李-->>張: 打量著王五...
張->>王: 很好... 王五, 你怎麼樣?
```
語法結構
```mermaid
sequenceDiagram
participant 別名 as 物件顯示名（全部直接用顯示名時可以不寫）
順序增加圖表中訊息
（可以加入標籤提示）
```
語法詳解
訊息格式
【物件1】【箭頭型別】【物件2】 : 訊息內容
連線樣式
一共6種箭頭型別的樣式：
- 實線：->
- 虛線：- ->
- 帶箭頭的實線：->>
- 帶箭頭的虛線：- ->>
- 帶x的實線：-x
- 帶x的虛線：- -x
啟用方塊
這部分有兩種寫法，第一種是顯示通過語法實現，語法如下，會在指定物件的訊息中增加，示例中李四；第二種直接在物件前面增加加減號（開始時用加號“+”，結束時用減號“-”），則在加號對應的物件上開始，減號對應的時間結束，示例中王五。
開始：activate 【物件】
結束：deactivate 【物件】
註釋
Note 【位置】 【物件】
註釋顯示的位置有三個，以被標記的物件中心為參考系，基於橫跨多個時，可以都逗號分隔，如示例：
- right of
- left of
- over
迴圈（while）
見示例
loop 迴圈說明
【訊息流】
end
條件（if/else）
alt 條件說明
【訊息流】
else
【訊息流】
end
opt 條件說明
【訊息流】
end
示例內容太多了，為了防止太臃腫，把條件內容獨立出來進行演示，當有else時，用alt，否則用opt。
```mermaid
sequenceDiagram
participant 張 as 張三
participant 李 as 李四
張 ->> 李: 你好！李四, 最近怎麼樣?
alt 如果感冒了
李->> 張: 不太好，生病了。
else 挺好的
李->> 張: 我很好，謝謝。
end
opt 另外補充
李->> 張: 謝謝問候。
end
```
參考自：
https://mermaidjs.github.io/
http://flowchart.js.org/
歡迎關注我公眾號，為你增加看世界的維度。
