如何在Markdown中畫流程圖呢？當(dāng)然是用mermaid了，mermaid支持三種圖形的繪制, 分別是流程圖, 時(shí)序圖和甘特圖, 本篇文章只介紹了mermaid中流程圖在markdown的使用(現(xiàn)在簡(jiǎn)書的markdown還不支持mermaid，我本地使用的是MWeb)。

如何在markdown中使用mermaid

1.png

流程圖方向有下面幾個(gè)值

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

示例

從上到下

mermaid
graph TD
   A --> B

22.png

從左到右

graph LR
   A --> B 

3.png

基本圖形

• id + [文字描述]矩形
• id + (文字描述)圓角矩形
• id + >文字描述]不對(duì)稱的矩形
• id + {文字描述}菱形
• id + ((文字描述))圓形

示例

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

4

節(jié)點(diǎn)之間的連接

• 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并在中間加上文字描述

示例

mermaid
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] 

6

子流程圖

格式

subgraph title
    graph definition
end

示例

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

7

自定義樣式

語(yǔ)法：style id 具體樣式

示例

mermaid
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

9

demo

繪制一個(gè)流程圖,找出 A、 B、 C 三個(gè)數(shù)中最大的一個(gè)數(shù)。

寫法

mermaid
graph LR
    start[開(kāi)始] --> 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[結(jié)束]
    printC --> stop
    printB --> stop

99