mermaid流程图工具_MarkDown绘图mermaid流程graph

【注】更多详情请参阅mermaid流程图官方文档。

1. 绘图方向

命令

方向

TB(TD)

从上到下

BT

从下到上

RL

从右到左

LR

从左到右

2. 节点形状

命令

形状

A[text]

文本框(默认形状)

B(text)

圆角框

C([text])

体育场型框

D[(text)]

数据库型框

E((text))

圆形框

F>text]

非对称框

G{text}

菱形框

H{{text}}

六边形框

I[/text/]

J[\text\]

平行四边形框

【注】可以将文本用引号引起&＃xff0c;避免引号中出现特殊字符无法正常显示的情况(此时引号可以使用MarkDown引号字符编码 #quot; )。

&＃96;&＃96;&＃96;mermaid

graph TB

A[text]

B(text)

C([text])

D[(text)]

E((text))

F>text]

G{text}

H{{text}}

I[/text/]

J[\text\]

&＃96;&＃96;&＃96;

3. 连线形状

命令

形状

添加文本

A1 --> B1

直线箭头

--text-->

A2 --- B2

直线

--text---

A3 -.-> B3

虚线箭头

-.text.->

A4 -.- B4

虚线

-.text.--

A5 &＃61;&＃61;&＃61; B5

加粗直线

&＃61;&＃61;text&＃61;&＃61;&＃61;

A6 &＃61;&＃61;> B6

加粗直线箭头

&＃61;&＃61;text&＃61;&＃61;>

【注】还有一种简单添加文本的方式&＃xff1a;连线后使用 |text| 来在连线上添加文本。

&＃96;&＃96;&＃96;mermaid

graph TB

A1 --> B1

A2 --- B2

A3 -.-> B3

A4 -.- B4

A5 &＃61;&＃61;&＃61; B5

A6 &＃61;&＃61;> B6

&＃96;&＃96;&＃96;

&＃96;&＃96;&＃96;mermaid

graph TB

A1 --text--> B1

A2 ---|text| B2

A3 -.text.-> B3

A4 -.-|text| B4

A5 &＃61;&＃61;text&＃61;&＃61;&＃61; B5

A6 &＃61;&＃61;>|text| B6

&＃96;&＃96;&＃96;

【注】可以使用 & 同时指定多个节点之间的多个连线。

&＃96;&＃96;&＃96;mermaid

graph TB

A --> D & E & F

B & C -.-> F

&＃96;&＃96;&＃96;

4. 子流程图

代码格式如下&＃xff1a;

subgraph xxx

······

end

其中&＃xff0c;xxx 为该子图的标题。

【注】不论 graph 还是 subgraph 中的节点标识都是全局的。

&＃96;&＃96;&＃96;mermaid

graph TB

subgraph one

A1 --> B1

end

subgraph two

A2 &＃61;&＃61;&＃61; B2

end

subgraph three

A3 -.-> B2

end

&＃96;&＃96;&＃96;

5. 注释

graph流程图中以 %% 为开头注释一行。

&＃96;&＃96;&＃96;mermaid

graph LR

A --> B %%此处为注释

&＃96;&＃96;&＃96;

6. 链接

graph流程图可以在节点标识上绑定 URL &＃xff0c;当点击对应节点时&＃xff0c;链接到对应的 URL。语法格式如下

click nodeID URL

举例如下&＃xff1a;点击节点 A 会跳转到百度搜索引擎页面。

&＃96;&＃96;&＃96;mermaid

graph LR;

A-->B;

click A "https://www.baidu.com"

&＃96;&＃96;&＃96;