這篇文章主要介紹

• 流程圖基礎(chǔ)
• 以寫代碼的方式畫流程圖

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

• 首先，這種方式非常輕便，無需安裝復(fù)雜的畫圖應(yīng)用。Typora 等多種 Markdown 編輯器自帶有畫圖擴展（這也是 Markdown 能畫圖的原因，因為用到了擴展）
• 其次，拖拽畫圖時需要考慮圖形尺寸和對齊問題，而代碼畫圖不需要考慮這些，一切均自動調(diào)整
• 另外，想象下你在寫文檔時，隨手一段代碼就插入了一幅流程圖，這多么酷炫！

雖說要使用代碼，但其實這些代碼非常簡單，編程零基礎(chǔ)也可以輕松學(xué)會，只要運用一些聯(lián)想記憶即可。

---

一、流程圖基礎(chǔ)

考慮到有些讀者可能不了解流程圖，為此這里先作一些簡單介紹，如果你熟悉流程圖可以跳過這段內(nèi)容直接看下一小節(jié)。

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

流程圖常用符號及含義

流程圖的符號有很多，但常用的也就幾個。

圓角矩形：表示開始和結(jié)束

2. 矩形：表示過程，也就是整個流程中的一個環(huán)節(jié)

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

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

5. 圓形：表示連接。為避免流程過長或有交叉，可將流程切開，圓形即相當(dāng)于切口處的連接頭（成對出現(xiàn)）

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

圖示布局方向

在畫流程圖時，最常用的布局方向是

• 從上向下
• 從左向右

當(dāng)然也允許從下向上畫、從右向左畫，但是這兩種很少見。

---

二、代碼畫圖

工具

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

1) 免費 Markdown 編輯器 Typora，非常好用且美觀。其自帶 mermaid 畫圖擴展。

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

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

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

https://www.zhihu.com/video/1123992275965067264

這樣的使用方式很簡單，其它的能支持 mermaid 的編輯器也可以這樣來用，比如說印X筆記。

2) 如果你不想用 Markdown，可以選擇網(wǎng)頁版 mermaid 編輯器，免費且無需注冊：

Online FlowChart & Diagrams Editor?dwz.cn

利器有了，現(xiàn)在來善其事。

起始代碼

每次作圖時，代碼以「graph <布局方向>」開頭，如：

graph TB......TB（Top Bottom）表示從上向下布局，另外三種是
BT
LR（Left Right）
RL

節(jié)點的畫法

接下來，來畫之前介紹過的四種節(jié)點（圓形、矩形、菱形、圓形）。四種節(jié)點對應(yīng)四行代碼，請仔細(xì)觀察代碼差異，并與對應(yīng)的節(jié)點相比較。

graph TBA(開始)B[打開冰箱門]C{"冰箱小不小？"}D((連接))

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

• 不同種類的括號對應(yīng)不同的節(jié)點圖形
• 括號中的文字就是顯示在節(jié)點中的描述
• A B C D 這些字符是為節(jié)點取的名字，這個名字可以在之后反復(fù)利用（在編程里這相當(dāng)于定義變量）

線段的畫法

前面是節(jié)點的畫法，再來看下線段的畫法。線段用于連接節(jié)點，所以請結(jié)合剛才所學(xué)的節(jié)點一同來看：

graph TBA[把大象放進去] --> B{"冰箱小不小？"}B -->|不小| C[把冰箱門關(guān)上]B -->|小| D[換個大冰箱]

是不是又發(fā)現(xiàn)了玄機！

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

好了，要學(xué)的內(nèi)容就是這些，意不意外！東西不多也不復(fù)雜，只要根據(jù)圖案聯(lián)想記憶即可。稍加練習(xí)后便能運用自如。

額外提示

• 上一個代碼示例中，B{"冰箱小不小？"} 這里的描述文字加了引號，是因為其中包含特殊字符（問號），用引號包裹防止出錯
• 為節(jié)點取名為 A B C 不太合適，如果節(jié)點很多時往往容易混淆，不方便后續(xù)使用和閱讀（編程時命名的重要性）。建議起有意義的名字
• 除上述帶箭頭線段 --> 外，還有帶箭頭虛線線段 -.->、 帶箭頭加粗線段 ==>、不帶箭頭線段 ---

---

三、完整示例

完成了上面的教程后，我們再來看個完整例子體會下：

graph TBStart(開始) --> Open[打開冰箱門]Open --> Put[把大象放進去]Put[把大象放進去] --> IsFit{"冰箱小不小？"}IsFit -->|不小| Close[把冰箱門關(guān)上]Close --> End(結(jié)束)IsFit -->|小| Change[換個大冰箱]Change --> Open

花式用法

當(dāng)然節(jié)點和線段的表現(xiàn)力可以很豐富，不僅限于用于流程圖，你也可以借助它們來表現(xiàn)其它內(nèi)容。如下面是火鍋冒菜麻辣燙的關(guān)系圖！

---

歡迎閱讀作者其它文章

作者相關(guān)閱讀：

《輕松上手寫作利器 Markdown：從此文章排版無煩惱》

《會用 Markdown 還不夠，還得知道排版規(guī)范》

《Markdown 高級玩法：用代碼畫時序圖》

總結(jié)

以上是生活随笔為你收集整理的markdown 流程图_Markdown 进阶技能：用代码画流程图（编程零基础也适用）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。