使用Typora繪制流程圖

Typora可以直接在markdown中畫流程圖，而且語法簡潔易懂，這是個讓我異常驚喜的功能。

Typora使用flowchart.js來生成簡單的SVG流程圖，此外它還支持mermaid engine。要知道，在市面上你絕少看到此類用戶體驗良好的作圖App，更別說集成在一個markdown編輯器里面了。Typora支持三類流程圖：

• sequence
• flowchart
• gantt

我們依次介紹。首先，只需要敲入以下代碼，然后選擇語言為sequence即可生成下面的圖

李雷 -> 韓梅梅: Hello 梅梅, How are you?
Note right of 韓梅梅: 韓梅梅心想
韓梅梅 --> 李雷: I'm fine, thanks, and you?

對於Flowchart，可以使用下面的code，然后語法選擇flow

st=>start: 鬧鍾響起
op=>operation: 與床板分離
cond=>condition: 分離成功?
e=>end: 快樂的一天

st->op->cond
cond(yes)->e
cond(no)->op

Mermaid是另一個流程圖生成的引擎，在官網中它是這么介紹自己的

Generation of diagrams and flowcharts from text in a similar manner as markdown.

除了Sequence和Flowchart兩類圖之外，Mermaid還提供一種叫做gantt的圖。插入下面的代碼，然后語法選mermaid就會自動渲染成gantt圖了。

gantt
        dateFormat  YYYY-MM-DD
        title 快樂的生活
        section 吃一把雞就學習
        學習            :done,    des1, 2014-01-06,2014-01-09
        瘋狂學習               :active,  des2, 2014-01-09, 3d
        繼續瘋狂學習               :         des3, after des2, 5d
        吃雞！               :         des4, after des3, 4d
        section 具體內容
        學習Python :crit, done, 2014-01-06,72h
        學習C++          :crit, done, after des1, 2d
        學習Lisp             :crit, active, 3d
        學習圖形學        :crit, 4d
        跳傘           :2d
        打槍                      :2d