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

html markdown、如何在markdown中使用mermaid

1.png

markdown用于什么、流程圖方向有下面幾個值

TB 從上到下

BT 從下到上

RL 從右到左

LR 從左到右

TD 同TB

示例

從上到下

mermaid

graph TD

A --> B

效果：

22.png

從左到右

graph LR

A --> B

效果：

3.png

基本圖形

id + [文字描述]矩形

id + (文字描述)圓角矩形

id + >文字描述]不對稱的矩形

id + {文字描述}菱形

id + ((文字描述))圓形

示例

mermaid

graph TD

id[帶文本的矩形]

id4(帶文本的圓角矩形)

id3>帶文本的不對稱的矩形]

id1{帶文本的菱形}

id2((帶文本的圓形))

效果：

4

節點之間的連接

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

自定義樣式

語法：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

繪制一個流程圖,找出 A、 B、 C 三個數中最大的一個數。

寫法

mermaid

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

效果：

99