Markdown 達人必備！輕鬆幾步畫出專業流程圖

peterjxl發表於2024-08-04
流程圖

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

‍

‍

快速入門

最簡單的例子：從 A 到 B

graph TD
   A --> B

‍

效果：

graph TD A --> B

‍

‍

注意起始的關鍵字“grpah”是必須的，表明這是流程圖。

後續介紹時序圖時，該關鍵字也要改為時序圖的關鍵字：sequenceDiagram。

‍

方向

‍

接下來我們講講基本的概念。流程圖中，可以有方向：

  • TB、TD：從上到下
  • BT：從下到上
  • RL：從右到左
  • LR：從左到右

‍

從下到上：

graph BT
   A --> B

效果：

graph BT A --> B

‍

‍

‍

從右到左：

graph RL
   A --> B

效果：

‍

graph RL A --> B

‍

從左到右：

graph LR
   A --> B

‍

效果：

graph LR A --> B

‍

最常用的佈局方向是

  • 從上向下
  • 從左向右

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

‍

‍

‍

‍

基本圖形

節點除了矩形，還能換成其他形狀，這裡列出部分：

graph TD
    id[帶文字的矩形]
    id4(帶文字的圓角矩形)
    id3>帶文字的不對稱的矩形]
    id1{帶文字的菱形}
    id2((帶文字的圓形))

效果：

graph TD id[帶文字的矩形] id4(帶文字的圓角矩形) id3>帶文字的不對稱的矩形] id1{帶文字的菱形} id2((帶文字的圓形))

‍

‍

‍

注意，每個形狀都是有各自含義的：

  • 圓角矩形：表示開始和結束
  • 矩形：表示過程，也就是整個流程中的一個環節
  • 菱形：表示判斷、決策
  • 圓形：表示連線。為避免流程過長或有線段交叉，可將流程切開，圓形即相當於切口處的連線頭（成對出現）

‍

graph LR begin(開始) --> open[把冰箱門開啟] --> put[把大象放進去] --> point((連線 A )) pointB((連線 A )) --> close[把冰箱門關上] --> close2(結束)

‍

‍

連線線

節點之間的連線，有如下型別：

  • A --> B​：A 帶箭頭指向 B
  • A --- B​：A 不帶箭頭指向 B
  • A -.- B​：A 用虛線指向 B
  • A -.-> B​：A 用帶箭頭的虛線指向 B
  • A ==> B​：A 用加粗的箭頭指向 B
  • A -- 描述 --- B​： A 不帶箭頭指向 B 並在中間加上文字描述
  • A -- 描述 --> B​： A 帶箭頭指向 B 並在中間加上文字描述
  • A -. 描述 .-> B​： A 用帶箭頭的虛線指向 B 並在中間加上文字描述
  • A == 描述 ==> B​： A 用加粗的箭頭指向 B 並在中間加上文字描述

注意，不同形狀的線其實也有各自的含義。如果想要專業一點，可以專門去查查相關文件，什麼情況用什麼線。

‍

示例：

graph LR
    A[A] --> B[B] 
    A1[A] --- B1[B] 
    A4[A] -.- B4[B] 
    A5[A] -.-> B5[B] 
    A7[A] ==> B7[B] 
    A2[A] -- 描述 --- B2[B] 
    A3[A] -- 描述 --> B3[B] 
    A6[A] -. 描述 .-> B6[B] 
    A8[A] == 描述 ==> B8[B]

‍

效果：

graph LR A[A] --> B[B] A1[A] --- B1[B] A4[A] -.- B4[B] A5[A] -.-> B5[B] A7[A] ==> B7[B] A2[A] -- 描述 --- B2[B] A3[A] -- 描述 --> B3[B] A6[A] -. 描述 .-> B6[B] A8[A] == 描述 ==> B8[B]

‍

‍

‍

子流程圖

語法：

subgraph title
    graph definition
end

‍

示例：

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

‍

‍

效果：

graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end

‍

‍

自定義樣式

我們還可以定義邊框的樣式、顏色。

語法：

style id 具體樣式

‍

‍

示例：

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5

‍

效果：

graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5 style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5

‍

實際案例

說了這麼多，來做個有實際價值的案例：繪製一個流程圖，找出 A、 B、 C 三個數中最大的一個數。

‍

graph LR
    start[開始] --> input[輸入A,B,C]
    input --> conditionA{A是否大於B}
    conditionA -- YES --> conditionC{A是否大於C}
    conditionA -- NO --> conditionB{B是否大於C}
    conditionC -- YES --> printA[輸出A]
    conditionC -- NO --> printC[輸出C]
    conditionB -- YES --> printB[輸出B]
    conditionB -- NO --> printC[輸出C]
    printA --> stop[結束]
    printC --> stop
    printB --> stop

效果：

graph LR start[開始] --> input[輸入A,B,C] input --> conditionA{A是否大於B} conditionA -- YES --> conditionC{A是否大於C} conditionA -- NO --> conditionB{B是否大於C} conditionC -- YES --> printA[輸出A] conditionC -- NO --> printC[輸出C] conditionB -- YES --> printB[輸出B] conditionB -- NO --> printC[輸出C] printA --> stop[結束] printC --> stop printB --> stop

‍

‍

‍

‍

參考

如何在 Markdown 中畫流程圖 - 簡書

Markdown 進階技能：用程式碼畫流程圖（程式設計零基礎也適用）

‍

相關文章