利用Markdown画图(需勾选扩展语法)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Owisw7CO-1618749044825)(image-20200211211500416.png)]
markdown画图也是轻量级的,功能并不全。
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码。
(不同的编辑器渲染的可能不一样)
流程图(graph)
概述
graph 方向描述
图表中的其他语句...
关键字graph表示一个流程图的开始,同时需要指定该图的方向。
其中“方向描述”为:
用词 | 含义 |
---|---|
TB | 从上到下 |
BT | 从下到上 |
RL | 从右到左 |
LR | 从左到右 |
T = TOP,B = BOTTOM,L = LEFT,R = RIGHT,D = DOWN
最常用的布局方向是TB、LR。
graph TB;
A-->B
B-->C
C-->A
graph LR;
A-->B
B-->C
C-->A
流程图常用符号及含义
节点形状
表述 | 说明 | 含义 |
---|---|---|
id[文字] | 矩形节点 | 表示过程,也就是整个流程中的一个环节 |
id(文字) | 圆角矩形节点 | 表示开始和结束 |
id((文字)) | 圆形节点 | 表示连接。为避免流程过长或有交叉,可将流程切开。成对 |
id{文字} | 菱形节点 | 表示判断、决策 |
id>文字] | 右向旗帜状节点 |
单向箭头线段:表示流程进行方向
id即为节点的唯一标识,A~F 是当前节点名字,类似于变量名,画图时便于引用
括号内是节点中要显示的文字,默认节点的名字和显示的文字都为A
graph TB
A
B(圆角矩形节点)
C[矩形节点]
D((圆形节点))
E{菱形节点}
F>右向旗帜状节点]
graph TB
begin(出门)--> buy[买炸鸡]
buy --> IsRemaining{"还有没有炸鸡?"}
IsRemaining -->|有|happy[买完炸鸡开心]--> goBack(回家)
IsRemaining --没有--> sad["伤心"]--> goBack
连线
graph TB
A1-->B1
A2---B2
A3--text---B3
A4--text-->B4
A5-.-B5
A6-.->B6
A7-.text.-B7
A8-.text.->B8
A9===B9
A10==>B10
A11==text===B11
A12==text==>B12
子图表
使用以下语法添加子图表
subgraph 子图表名称
子图表中的描述语句...
end
graph TB
subgraph 买炸鸡前
begin(出门)--> buy[出门买炸鸡]
end
buy --> IsRemaining{"还有没有炸鸡?"}
IsRemaining --没有--> sad["伤心"]--> goBack(回家)
IsRemaining -->|有|happy[买完炸鸡开心]--> goBack