MarkDown教程画图篇1（typora）
MarkDown教程画图篇1(typora）
基础篇视频讲解链接
画图篇视频讲解链接
九、利用Markdown画图（需勾选扩展语法）
markdown画图也是轻量级的，功能并不全。
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。
（不同的编辑器渲染的可能不一样）
1、流程图(graph)
1>概述
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
A
B
C
graph LR;
A-->B
B-->C
C-->A
A
B
C
2>流程图常用符号及含义
节点形状
| 表述 | 说明 | 含义 |
|---|---|---|
| id[文字] | 矩形节点 | 表示过程，也就是整个流程中的一个环节 |
| id(文字) | 圆角矩形节点 | 表示开始和结束 |
| id((文字)) | 圆形节点 | 表示连接。为避免流程过长或有交叉，可将流程切开。成对 |
| id{文字} | 菱形节点 | 表示判断、决策 |
| id>文字] | 右向旗帜状节点 |
单向箭头线段：表示流程进行方向
id即为节点的唯一标识，A~F 是当前节点名字，类似于变量名，画图时便于引用
括号内是节点中要显示的文字，默认节点的名字和显示的文字都为A
graph TB
A
B(圆角矩形节点)
C[矩形节点]
D((圆形节点))
E{菱形节点}
F>右向旗帜状节点]
A
圆角矩形节点
矩形节点
圆形节点
菱形节点
右向旗帜状节点
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
text
text
text
text
text
text
A1
B1
A2
B2
A3
B3
A4
B4
A5
B5
A6
B6
A7
B7
A8
B8
A9
B9
A10
B10
A11
B11
A12
B12
A
B
子图表
使用以下语法添加子图表
subgraph 子图表名称
子图表中的描述语句...
end
graph TB
subgraph 买炸鸡前
begin(出门)--> buy[出门买炸鸡]
end
buy --> IsRemaining{"还有没有炸鸡？"}
IsRemaining --没有--> sad["伤心"]--> goBack(回家)
IsRemaining -->|有|happy[买完炸鸡开心]--> goBack
买炸鸡前
没有
有
出门买炸鸡
出门
还有没有炸鸡？
伤心
回家
买完炸鸡开心
2、序列图(sequence diagram)
概述
sequenceDiagram
[参与者1][消息线][参与者2]:消息体
...
sequenceDiagram为每幅时序图的固定开头
sequenceDiagram
Title: 买炸鸡
救救->>炸鸡店小哥: 还有炸鸡吗？
炸鸡店小哥-->>救救: 没有，要现炸
救救 炸鸡店小哥 还有炸鸡吗？ 没有，要现炸 救救 炸鸡店小哥 买炸鸡
参与者（participant）
传统时序图概念中参与者有角色和类对象之分，但这里我们不做此区分，用参与者表示一切参与交互的事物，可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。
sequenceDiagram
participant 参与者 1
participant 参与者 2
...
participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3
participant <参与者名称>声明参与者，语句次序即为参与者横向排列次序。
消息线
| 类型 | 描述 |
|---|---|
| -> | 无箭头的实线 |
| –> | 无箭头的虚线 |
| ->> | 有箭头的实线（主动发出消息） |
| –->> | 有箭头的虚线（响应） |
| -x | 末端为叉的实线（表示异步） |
| –x | 末端为叉的虚线（表示异步） |
处理中-激活框
从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。
在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
99 ->> seller: 还有炸鸡吗？
seller -->> 99: 没有，要现炸。
99 -x +seller:给我炸！
seller -->> -99: 您的炸鸡好了！
救救 炸鸡店小哥 还有炸鸡吗？ 没有，要现炸。 给我炸！ 您的炸鸡好了！ 救救 炸鸡店小哥 买炸鸡
注解（note）
语法如下
Note 位置表述 参与者: 标注文字
其中位置表述可以为
| 表述 | 含义 |
|---|---|
| right of | 右侧 |
| left of | 左侧 |
| over | 在当中，可以横跨多个参与者 |
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: 您的炸鸡好了！
救救 炸鸡店小哥 热爱炸鸡 女 男 还有炸鸡吗？ 没有，要现炸。 给我炸！ 您的炸鸡好了！ 救救 炸鸡店小哥 买炸鸡
循环（loop）
在条件满足时，重复发出消息序列。（相当于编程语言中的 while 语句。）
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
99 ->> seller: 还有炸鸡吗？
seller -->> 99: 没有，要现炸。
99 ->> +seller:给我炸！
loop 三分钟一次
99 ->> seller : 我的炸鸡好了吗？
seller -->> 99 : 正在炸
end
seller -->> -99: 您的炸鸡好了！
救救 炸鸡店小哥 还有炸鸡吗？ 没有，要现炸。 给我炸！ 我的炸鸡好了吗？ 正在炸 loop [三分钟一次] 您的炸鸡好了！ 救救 炸鸡店小哥 买炸鸡
选择（alt）
在多个条件中作出判断，每个条件将对应不同的消息序列。（相当于 if 及 else if 语句。）
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 : 欢迎下次光临
救救 炸鸡店小哥 现在就多少只炸好的炸鸡？ 可卖的炸鸡数 买三只！ 有多少买多少 那我明天再来 alt [可卖的炸鸡数 > 3] [1 < 可卖的炸鸡数 < 3] [可卖的炸鸡数 < 1] 欢迎下次光临 救救 炸鸡店小哥 买炸鸡
可选（opt）
在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
99 ->> seller : 买炸鸡
opt 全都卖完了
seller -->> 99 : 下次再来
end
救救 炸鸡店小哥 买炸鸡 下次再来 opt [全都卖完了] 救救 炸鸡店小哥 买炸鸡
并行（Par）
将消息序列分成多个片段，这些片段并行执行。
sequenceDiagram
participant 99 as 救救
participant seller as 炸鸡店小哥
99 ->> seller : 一个炸鸡，一杯可乐！
par 并行执行
seller ->> seller : 装可乐
and
seller ->> seller : 炸炸鸡
end
seller -->> 99 : 您的炸鸡好了！
救救 炸鸡店小哥 一个炸鸡，一杯可乐！ 装可乐 炸炸鸡 par [并行执行] 您的炸鸡好了！ 救救 炸鸡店小哥 买炸鸡