這篇文章主要介紹

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

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

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

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

---

一、流程圖基礎(chǔ)

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

流程圖，顧名思義，就是表示一個(gè)事件或活動(dòng)的流程的圖示。

流程圖常用符號(hào)及含義

流程圖的符號(hào)有很多，但常用的也就幾個(gè)。

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

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

3. 單向箭頭線段：表示流程進(jìn)行方向

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

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

6. 另外還有嵌入在以上符號(hào)中的描述文本

圖示布局方向

在畫(huà)流程圖時(shí)，最常用的布局方向是

• 從上向下
• 從左向右

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

---

二、代碼畫(huà)圖

工具

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

1) 免費(fèi) Markdown 編輯器 Typora，非常好用且美觀。其自帶 mermaid 畫(huà)圖擴(kuò)展。

在用 Typora 編寫(xiě) Markdown 文本時(shí)，插入這樣一個(gè)代碼塊：

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

其中流程圖的代碼便會(huì)自動(dòng)被 mermaid 解析和渲染。

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

這樣的使用方式很簡(jiǎn)單，其它的能支持 mermaid 的編輯器也可以這樣來(lái)用，比如說(shuō)印X筆記。

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

Online FlowChart & Diagrams Editor?dwz.cn

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

起始代碼

每次作圖時(shí)，代碼以「graph <布局方向>」開(kāi)頭，如：

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

節(jié)點(diǎn)的畫(huà)法

接下來(lái)，來(lái)畫(huà)之前介紹過(guò)的四種節(jié)點(diǎn)（圓形、矩形、菱形、圓形）。四種節(jié)點(diǎn)對(duì)應(yīng)四行代碼，請(qǐng)仔細(xì)觀察代碼差異，并與對(duì)應(yīng)的節(jié)點(diǎn)相比較。

graph TBA(開(kāi)始)B[打開(kāi)冰箱門(mén)]C{"冰箱小不小？"}D((連接))

看出玄機(jī)了嗎？其實(shí)很簡(jiǎn)單，就是

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

線段的畫(huà)法

前面是節(jié)點(diǎn)的畫(huà)法，再來(lái)看下線段的畫(huà)法。線段用于連接節(jié)點(diǎn)，所以請(qǐng)結(jié)合剛才所學(xué)的節(jié)點(diǎn)一同來(lái)看：

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

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

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

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

額外提示

• 上一個(gè)代碼示例中，B{"冰箱小不小？"} 這里的描述文字加了引號(hào)，是因?yàn)槠渲邪厥庾址?#xff08;問(wèn)號(hào)），用引號(hào)包裹防止出錯(cuò)
• 為節(jié)點(diǎn)取名為 A B C 不太合適，如果節(jié)點(diǎn)很多時(shí)往往容易混淆，不方便后續(xù)使用和閱讀（編程時(shí)命名的重要性）。建議起有意義的名字
• 除上述帶箭頭線段 --> 外，還有帶箭頭虛線線段 -.->、 帶箭頭加粗線段 ==>、不帶箭頭線段 ---

---

三、完整示例

完成了上面的教程后，我們?cè)賮?lái)看個(gè)完整例子體會(huì)下：

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

花式用法

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

---

歡迎閱讀作者其它文章

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

《輕松上手寫(xiě)作利器 Markdown：從此文章排版無(wú)煩惱》

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

《Markdown 高級(jí)玩法：用代碼畫(huà)時(shí)序圖》

總結(jié)

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

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