參考Markdown筆記：如何畫流程圖

Mark流程圖語法

流程圖的語法大體分為兩部分：

•流程圖元素定義部分；
•連線流程圖元素部分，該部分用來指明流程圖的執行走向。

定義元素的語法

tag=>type: content:>url

例項：

```mermaid
flowchat
st=>start: 開始
e=>end: 結束
op=>operation: 操作
sub1=>subroutine: 子程式
cond=>condition: Yes or No?
io=>inputoutput: 輸入/輸出
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
 

效果如下

說明：
•tag 是流程圖中的標籤，在第二段連線元素時會用到。名稱可以任意，一般為流程的英文縮寫和數字的組合。
•type 用來確定標籤的型別，=>後面表示型別。由於標籤的名稱可以任意指定，所以要依賴type來確定標籤的型別
•標籤有6種類型：start end operation condition inputoutput subroutine
•content 是流程圖文字框中的描述內容，: 後面表示內容，中英文均可。特別注意，冒號與文字之間一定要有個空格
•url是一個連線，與框框中的文字相繫結，:>後面就是對應的 url 連結，點選文字時可以通過連結跳轉到 url 指定頁面
1.開始

st=>start: 開始

2.結束

e=>end: 結束

3.操作

op1=>operation: 操作、執行說明

4.條件

cond=>condition: 確認？刪除線格式

5.輸入輸出

io=>inputoutput: catchsomething…

6.子程式

sub1=>subroutine: My Subroutine

URL

e=>點選本結束跳轉:>https://blog.csdn.net/qq_21808961

連線流程圖元素

示例程式碼後面部分

st->op1->cond cond(yes)->io->e cond(no)->sub1(right)->op1

連線流程圖元素階段的語法就簡單多了，直接用->來連線兩個元素，幾點說明如下：

說明：
•使用 -> 來連線兩個元素
•對於condition型別，有yes和no兩個分支，如示例中的cond(yes)和cond(no)
•每個元素可以制定分支走向，預設向下，也可以用right指向右邊，如示例中sub1(right)。

例項：

```mermaid
flowchat
st=>start: 生產者執行緒進入 :>https://blog.csdn.net/qq_21808961
op1=>operation: 設定Info類的名稱和內容
op2=>operation: 修改標誌位
op3=>operation: 等待執行緒喚醒
op4=>operation: 等待消費者取走
cond=>condition: 判斷標誌位

st(right)->cond->op1->op2->op3
cond(yes,right)->op1
cond(no)->op4
```

顯示效果：

生產者執行緒進入判斷標誌位設定Info類的名稱和內容修改標誌位等待執行緒喚醒等待消費者取走yesno

上面的流程圖使用了URL點選上面的的開始框(生產者執行緒進入)，就會跳轉到我的部落格首頁。
這裡再強調一下：每一個元素都可以加上right指明流程流程圖的方向，如果不指定的話預設是向下的