這篇文章主要為大家介紹

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

寫代碼畫圖相比於使用使用畫圖工具畫圖有什麼好處呢？

  • 首先，這種方式非常輕便，Typora 等多種 Markdown 編輯器自帶有畫圖擴展
  • 其次，用畫圖工具畫圖時可能需要考慮各個圖形尺寸和對齊問題，而代碼畫圖不需要考慮這些
  • 另外，想像下你在寫文檔時，隨手一段代碼就插入了一幅流程圖，這多麼酷炫！

一、流程圖基礎

考慮到有些讀者可能不瞭解流程圖，為此這裡先作一些簡單介紹，如果你熟悉流程圖可以跳過這段內容直接看下一小節。

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

流程圖常用符號及含義

流程圖的符號有很多，這裡只介紹最常用的幾個，通常情況下這就足夠滿足需求了。

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

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

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

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

5. 圓形：表示連接，為避免流程過長或有交叉可將流程切開，圓形即相當於切口處的連接頭（成對出現）

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

圖示佈局方向

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

  • 從上向下
  • 從左向右

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

二、代碼畫圖

工具

想要用代碼畫圖，就得有個支持這種方式的畫圖工具。這裡介紹兩個工具：

1) 我們在《寫作利器 Markdown：基礎、編輯器及圖牀》中介紹過免費 Markdown 編輯器 Typora，它就能作這件事。

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

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

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

視頻封面

00:10

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

2) 如果你不想用 Markdown，可以選擇在線 mermaid 編輯器：

Online FlowChart & Diagrams Editor?

dwz.cn

器有了，現在來開始善其事。

節點的畫法

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

graph TB
...
...

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

BTLR（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

花式例子

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


推薦閱讀：
相關文章