MarkDown绘图mermaid流程图graph
hotarugali
发布于 2022-03-01 07:17:48
发布于 2022-03-01 07:17:48
代码可运行
运行总次数：12
代码可运行
【注】更多详情请参阅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\\] | 平行四边形框 |
【注】可以将文本用引号引起，避免引号中出现特殊字符无法正常显示的情况（此时引号可以使用 MarkDown 引号字符编码 " ）。
```mermaid
graph TB
A[text]
B(text)
C([text])
D[(text)]
E((text))
F>text]
G{text}
H{{text}}
I[/text/]
J[\text\]
<!--  -->
```mermaid
graph TB
A[text]
B(text)
C([text])
D[(text)]
E((text))
F>text]
G{text}
H{{text}}
I[/text/]
J[\text\]3. 连线形状
命令 | 形状 | 添加文本 |
|---|---|---|
A1 --> B1 | 直线箭头 | --text--> |
A2 --- B2 | 直线 | --text--- |
A3 -.-> B3 | 虚线箭头 | -.text.-> |
A4 -.- B4 | 虚线 | -.text.-- |
A5 === B5 | 加粗直线 | ==text=== |
A6 ==> B6 | 加粗直线箭头 | ==text==> |
【注】还有一种简单添加文本的方式：连线后使用 |text| 来在连线上添加文本。
```mermaid
graph TB
A1 --> B1
A2 --- B2
A3 -.-> B3
A4 -.- B4
A5 === B5
A6 ==> B6
<!--  -->
```mermaid
graph TB
A1 --> B1
A2 --- B2
A3 -.-> B3
A4 -.- B4
A5 === B5
A6 ==> B6```mermaid
graph TB
A1 --text--> B1
A2 ---|text| B2
A3 -.text.-> B3
A4 -.-|text| B4
A5 ==text=== B5
A6 ==>|text| B6
<!--  -->
```mermaid
graph TB
A1 --text--> B1
A2 ---|text| B2
A3 -.text.-> B3
A4 -.-|text| B4
A5 ==text=== B5
A6 ==>|text| B6【注】可以使用 & 同时指定多个节点之间的多个连线。
```mermaid
graph TB
A --> D & E & F
B & C -.-> F
<!--  -->
```mermaid
graph TB
A --> D & E & F
B & C -.-> F4. 子流程图
代码格式如下：
subgraph xxx
······
end其中，xxx 为该子图的标题。
【注】不论 graph 还是 subgraph 中的节点标识都是全局的。
```mermaid
graph TB
subgraph one
A1 --> B1
end
subgraph two
A2 === B2
end
subgraph three
A3 -.-> B2
end
<!--  -->
```mermaid
graph TB
subgraph one
A1 --> B1
end
subgraph two
A2 === B2
end
subgraph three
A3 -.-> B2
end5. 注释
graph流程图中以 %% 为开头注释一行。
```mermaid
graph LR
A --> B %%此处为注释
## 6. 链接
graph流程图可以在节点标识上绑定 URL ，当点击对应节点时，链接到对应的 URL。语法格式如下
```markdown
click nodeID URL举例如下：点击节点 A 会跳转到百度搜索引擎页面。
```mermaid
graph LR;
A-->B;
click A "https://www.baidu.com"本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-07-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
markdown绘图插件----mermaid简介
更多 >
腾讯云开发者
