Markdown画图
本文最后更新于：December 3, 2021 pm
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中，是一种基于 Javascript 的图表和图表工具。使用集成了Mermaid渲染功能的Markdown编辑器，如Typora。使用时，只需将代码块的语言选择为Mermaid即可。
目录
mermaid官方文档
Mermaid能绘制的图：
- 饼状图：使用pie关键字。
- 流程图：使用graph关键字。
- 序列图：使用sequenceDiagram关键字。
- 甘特图：使用gantt关键字。
- 类图：使用classDiagram关键字。
- 状态图：使用stateDiagram关键字。
- 用户旅程图：使用journey关键字。
1.流程图
用法：
1 | |
布局方向：
| 用词 | 含义 |
|---|---|
| TB | 从上到下 |
| BT | 从下到上 |
| RL | 从右到左 |
| LR | 从左到右 |
示例：
1 | |
graph TB;
A-->B
B-->C
C-->A
1 | |
graph LR;
A-->B
B-->C
C-->A
1.1 节点定义和形状
即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid 中每个节点都有一个 id，以及节点的文字。需要注意的是，如果节点的文字中包含标点符号，需要时用双引号包裹起来。
| 表述 | 说明 | 含义 |
|---|---|---|
| id[文字] | 矩形节点 | 表示过程，也就是整个流程中的一个环节 |
| id(文字) | 圆角矩形节点 | 表示开始和结束 |
| id((文字)) | 圆形节点 | 表示连接。为避免流程过长或有交叉，可将流程切开。成对 |
| id{文字} | 菱形节点 | 表示判断、决策 |
| id>文字] | 右向旗帜状节点 |
示例：
1 | |
graph TB
A
B(圆角矩形节点)
C[矩形节点]
D((圆形节点))
E{菱形节点}
F>右向旗帜状节点]
graph TB
A([the text])
B[[the text]]
C[(the text)]
D{{the text}}
E[/the text/]
F[\the text\]
G[/the text\]
H[\the text/]
1.2 连线形式
| 表述 | 说明 |
|---|---|
> |
添加尾部箭头 |
- |
不添加尾部箭头 |
-- |
单线 |
--text-- |
单线上加文字 |
== |
粗线 |
==text== |
粗线加文字 |
-.- |
虚线 |
-.text.- |
虚线加文字 |
示例：
1 | |
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
1.2.1 连接形式
1 | |
graph TB
a --> b & c--> d
1 | |
graph TB
a & b --> c & d
1.3 子图表
用法：
1 | |
示例：
1 | |
graph TB
subgraph 买炸鸡前
begin(出门)--> buy[出门买炸鸡]
end
buy --> IsRemaining{"还有没有炸鸡？"}
IsRemaining --没有--> sad["伤心"]--> goBack(回家)
IsRemaining -->|有|happy[买完炸鸡开心]--> goBack
2.时序图
用法：
1 | |
消息线：
| 类型 | 描述 |
|---|---|
| -> | 无箭头的实线 |
| –> | 无箭头的虚线 |
| ->> | 有箭头的实线（主动发出消息） |
| –->> | 有箭头的虚线（响应） |
| -x | 末端为叉的实线（表示异步） |
| –x | 末端为叉的虚线（表示异步） |
从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。
在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。
示例：
1 | |
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
99 ->> seller: 还有炸鸡吗？
seller -->> 99: 没有，要现炸。
99 -x +seller:给我炸！
seller -->> -99: 您的炸鸡好了！
或者使用以下语法直接说明某个参与者进入“处理中”状态。用法：
1 | |
2.1 标注
用法：
1 | |
其中位置表述可以为
| 表述 | 含义 |
|---|---|
| right of | 右侧 |
| left of | 左侧 |
| over | 在当中，可以横跨多个参与者 |
示例：
1 | |
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
Note over 99,seller : 热爱炸鸡
Note left of 99 : 女
Note right of seller : 男
99 ->> seller: 还有炸鸡吗？
seller -->> 99: 没有，要现炸。
99 -x +seller : 给我炸！
seller -->> -99: 您的炸鸡好了！
2.2循环
用法：
1 | |
相当于编程语言中的 while 语句。
示例：
1 | |
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
99 ->> seller: 还有炸鸡吗？
seller -->> 99: 没有，要现炸。
99 ->> +seller:给我炸！
loop 三分钟一次
99 ->> seller : 我的炸鸡好了吗？
seller -->> 99 : 正在炸
end
seller -->> -99: 您的炸鸡好了！
2.3 选择
在多个条件中作出判断，每个条件将对应不同的消息序列。相当于 if 及 else if 语句。
示例：
1 | |
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
99 ->> seller : 现在就多少只炸好的炸鸡？
seller -->> 99 : 可卖的炸鸡数
alt 可卖的炸鸡数 > 3
99 ->> seller : 买三只！
else 1 < 可卖的炸鸡数 < 3
99 ->> seller : 有多少买多少
else 可卖的炸鸡数 < 1
99 ->> seller : 那我明天再来
end
seller -->> 99 : 欢迎下次光临
2.4 可选
在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。
示例：
1 | |
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
99 ->> seller : 买炸鸡
opt 全都卖完了
seller -->> 99 : 下次再来
end
2.5 并行
将消息序列分成多个片段，这些片段并行执行。
示例：
1 | |
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
99 ->> seller : 一个炸鸡，一杯可乐！
par 并行执行
seller ->> seller : 装可乐
and
seller ->> seller : 炸炸鸡
end
seller -->> 99 : 您的炸鸡好了！
3.饼图
4.甘特图
本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/2636253839.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！
