教你使用markdown畫程序流程圖

2016-01-21 10:33:15 星期四

1. 入門案例

st=>start: Start
op=>operation: Your Operation
sub=>subroutine: My Subroutine
cond=>condition: Yes or No?
io=>inputoutput: catch something...
e=>end: End

st->op->cond
cond(yes)->io->e
cond(no)->sub(right)->op

2. 語法

流程圖的語法總體分爲兩部分，第一段用來定義流程圖元素，第二段用來鏈接流程圖元素，指定流程圖的執行走向。

2.1 定義流程圖元素

tag=>type: content:>url

說明：

1. tag是流程圖中的標籤，名稱能夠任意，通常爲流程的英文縮寫和數字的組合。
2. type用來肯定標籤的類型，因爲標籤的名稱能夠任意指定，因此要依賴type來肯定標籤的類型
   標籤有6種類型：start/end/operation/subroutine/condition/inputoutput
3. content是流程圖文本框中的描述內容，中英文都可。特別注意，type後的冒號與文本之間必定要有個空格
4. url是一個鏈接，與框框中的文本相綁定，點擊文本時能夠經過連接跳轉到url指定頁面

2.2 鏈接流程圖元素

鏈接流程圖元素階段的語法就簡單多了，直接用->來鏈接兩個元素，須要注意的是condition類型，由於他有yes和no兩個分支，因此要寫成

cond(yes)->io->e
cond(no)->sub(right)->op