使用Markdown語法畫流程圖

Federico發表於2017-11-07

Markdown流程圖

  鑑於本人使用的是馬克飛象,所以一下以馬克飛象為例:

語法

  流程圖的畫法和程式碼塊類似,流程圖也是寫在兩個```之間的。格式用flow表示,例如:

st=>start: 註冊印象筆記
e=>end: 您可以使用markdown
op1=>operation: 登入印象筆記
op2=>operation: 購買並登入馬克飛象
cond=>condition: 是否已經購買並登入了馬克飛象?

st->op1->cond
cond(yes)->e
cond(no)->op2->e

  首先先將所有的元素進行定義,然後將各個元素進行連線
結果如下:
使用Markdown語法畫流程圖

流程圖的語法大體分為兩段:

  • 定義元素
  • 連線元素

定義元素階段的語法:
tag=>type: content:>url
tag就是一個標籤,在第二段連線元素時用type是這個標籤的型別

流程圖的基本型別

  • start
  • end
  • operation
  • subroutine
  • condition
  • inputoutput

開始
st=>start:開始
操作流程
st->op->cond
條件
cond=>condition:確認?
結束
e=>end:結束

st[註冊印象筆記]-->a
a{是否已經購買馬克飛象}
a-->|是|b1(您已購買馬克飛象可以使用markdown語法)
a-->|否|b2(您還未能成功購買馬克飛象但你可以免費試用10天)
b1-->c[歡迎使用馬克飛象]
b2-->d{是否要購買馬克飛象}
d-->|是|e1(您已成功購買馬克飛象歡迎使用)
e1-->c
d-->|否|e2(試用10天后將會到期歡迎購買)

graph:用來確定程式碼為檢視
-->:用來確定流程圖的指向
[]:用來表示矩形
{}:用來表示菱形
||:用來表示判斷的是否
():用來表示圓角
表示方式後面輸入的解析為真正的顯示內容
結果如下:
使用Markdown語法畫流程圖