Markdown 進階技能：用代碼畫流程圖（編程零基礎也適用）

這篇文章主要介紹

• 流程圖基礎
• 以寫代碼的方式畫流程圖

相比於使用畫圖工具拖拽畫圖，用代碼畫圖有什麼好處？

• 首先，這種方式很是輕便，無需安裝複雜的畫圖應用。Typora 等多種 Markdown 編輯器自帶有畫圖擴展（這也是 Markdown 能畫圖的緣由，由於用到了擴展）
• 其次，拖拽畫圖時須要考慮圖形尺寸和對齊問題，而代碼畫圖不須要考慮這些，一切均自動調整
• 另外，想象下你在寫文檔時，隨手一段代碼就插入了一幅流程圖，這多麼酷炫！

雖然說要使用代碼，但其實這些代碼很是簡單，編程零基礎也能夠輕鬆學會，只要運用一些聯想記憶便可。

流程圖基礎

考慮到有些讀者可能不瞭解流程圖，爲此這裏先做一些簡單介紹，若是你熟悉流程圖能夠跳過這段內容直接看下一小節。

流程圖，顧名思義，就是表示一個事件或活動的流程的圖示。

流程圖經常使用符號及含義

流程圖的符號有不少，但經常使用的也就幾個。

1. 圓角矩形：表示開始和結束

2. 矩形：表示過程，也就是整個流程中的一個環節

3. 單向箭頭線段：表示流程進行方向

4. 菱形：表示判斷、決策

5. 圓形：表示鏈接。爲避免流程過長或有線段交叉，可將流程切開，圓形即至關於切口處的鏈接頭（成對出現）

6. 另外還有嵌入在以上圖形中的描述文本

圖示佈局方向

在畫流程圖時，最經常使用的佈局方向是

• 從上向下
• 從左向右

固然也容許從下向上畫、從右向左畫，可是這兩種不多見。

代碼畫圖基礎

工具

君欲善其事，必先利其器。想要用代碼畫圖，就得有支持這種方式的畫圖工具。這裏介紹兩款工具：

1. 免費 Markdown 編輯器 Typora，很是好用且美觀。其自帶 mermaid 畫圖擴展。

   在用 Typora 編寫 Markdown 文本時，插入這樣一個代碼塊：

   ```mermaid ……流程圖代碼…… ```

   其中流程圖的代碼便會自動被 mermaid 解析和渲染。演示視頻

   這樣的使用方式很簡單，其它的能支持 mermaid 的編輯器也能夠這樣使用，好比印X筆記。

2. 若是你不想用 Markdown，能夠選擇網頁版 mermaid 編輯器，免費且無需註冊。連接：dwz.cn/hOMIoH4w

利器有了，如今來善其事。

起始代碼

每次做圖時，代碼以 graph <佈局方向> 開頭，如：

graph TB
    ...
    ...
複製代碼

TB（Top Bottom）表示從上向下佈局，另外三種是

• BT
• LR（Left Right）
• RL

節點的畫法

接下來，來畫以前介紹過的四種節點（圓形、矩形、菱形、圓形）。四種節點對應四行代碼，請仔細觀察代碼差別，並與對應的節點相比較。

graph TB
    A(開始)
    B[打開冰箱門]
    C{"冰箱小不小？"}
    D((鏈接))
複製代碼

看出玄機了嗎？其實很簡單，就是

• 不一樣種類的括號對應不一樣的節點圖形
• 括號中的文字就是顯示在節點中的描述
• A B C D 這些字符是爲節點取的名字，這個名字能夠在以後反覆利用（在編程裏這至關於定義變量）

線段的畫法

前面是節點的畫法，再來看下線段的畫法。線段用於鏈接節點，因此請結合剛纔所學的節點一同來看：

graph TB
    A[把大象放進去] --> B{"冰箱小不小？"}
    B -->|不小| C[把冰箱門關上]
    B -->|小| D[換個大冰箱]
複製代碼

是否是又發現了玄機！

上述 -->是帶箭頭線段，-->|不小| 和 -->|小| 是加了描述文字的帶箭頭線段。它們都位於兩個節點之間。

好了，要學的內容就是這些，意不意外！東西很少也不復雜，只要根據圖案聯想記憶便可。稍加練習後便能運用自如。

額外提示

• 上一個代碼示例中，B{"冰箱小不小？"} 這裏的描述文字加了引號，是由於其中包含特殊字符 ？，用引號包裹防止出錯
• 爲節點取名爲 A B C 不太合適，由於節點不少時容易產生混淆，不方便後續使用和閱讀（編程時命名的重要性）。建議起有意義的名字
• 除上述帶箭頭線段 --> 外，還有帶箭頭虛線線段 -.->、帶箭頭加粗線段 ==>、不帶箭頭線段 ---

完整示例

完成了上面的教程後，來看個完整例子體會下：

graph TB
    Start(開始) --> Open[打開冰箱門]
    Open --> Put[把大象放進去]
    Put[把大象放進去] --> IsFit{"冰箱小不小？"}
    
    IsFit -->|不小| Close[把冰箱門關上]
    Close --> End(結束)
        
    IsFit -->|小| Change[換個大冰箱]
    Change --> Open
複製代碼

花式用法

固然，節點和線段的表現力能夠很豐富，不只限於用於流程圖，你也能夠藉助它們來表現其它內容。以下面是火鍋冒菜麻辣燙的關係圖！

---

做者相關閱讀：

• 《輕鬆上手寫做利器 Markdown：今後文章排版無煩惱》
• 《會用 Markdown 還不夠，還得知道排版規範》
• 《Markdown 進階技能：用代碼畫流程圖（編程零基礎也適用）》
• 《Markdown 高級玩法：用代碼畫時序圖》