流程圖的語法

語法大體分為兩部分

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

定義元素的語法

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: content:>url

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

連線流程圖元素

示例程式碼後面部分

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

連線流程圖元素階段的語法就簡單多了，直接用->來連線兩個元素

說明：

使用-> 來連線兩個元素
對於condition型別，有yes和no兩個分支，如示例中的cond(yes)

	```mermaid
	     flowchat    
 	    st=>start: 生產者執行緒進入 :>https://donlex.cn
     op1=>operation: 設定Info類的名稱和內容
     op2=>operation: 修改標誌位
     op3=>operation: 等待執行緒喚醒
     op4=>operation: 等待消費者取走
     cond=>condition: 判斷標誌位
    
     st(right)->cond->op1->op2->op3
     cond(yes,right)->op1
     cond(no)->op4
	```

例項：

上面的流程圖使用了URL點選上面的的開始框，就會跳轉到我的站點首頁。
這裡再強調一下：每一個元素都可以加上right指明流程流程圖的方向，如果不指定的話預設是向下的