目录
在日常工作中，难免会画一些流程图、时序图。之前都是选择使用在线的画图网站，画完然后截图插入到文档。我个人用的比较多的主要是 腾讯文档 。文章源自编程技术分享-https://mervyn.life/226.html
相较于截图的方式，代码画图都有哪些好处呢？文章源自编程技术分享-https://mervyn.life/226.html
- 使用比较轻便。
不需要额外安装类似draw.io之类的画图软件，很多 markdown 编辑器都自带了这个功能。 - 使用便捷简单。
如果截图的方式，需要考虑图片大小以及对齐问题。流程变动了需要先去在线平台重新绘制，然后重新截图，相对比较麻烦。而代码画图不需要考虑这些。只要按照语法即可快速画图。
下边就来看一下，通过 markdown 语法是如何进行画图的。文章源自编程技术分享-https://mervyn.life/226.html
markdown 语法
当我需要画图时插入如下这样的一个代码块：文章源自编程技术分享-https://mervyn.life/226.html
```mermaid
流程图/时序图代码
```流程图
流程图布局
流程图代码以「graph 《布局方向》」开头，布局方向主要有如下几种：文章源自编程技术分享-https://mervyn.life/226.html
- TB，从上到下
- TD，从上到下
- BT，从下到上
- RL，从右到左
- LR，从左到右
例：文章源自编程技术分享-https://mervyn.life/226.html
```mermaid
graph TB
```流程常用符号
A（起止框）B[处理框]可以使用 HTML 中的实体字符。文章源自编程技术分享-https://mervyn.life/226.html
A["双引号：#quot;"]C{判断框}D(（连接）)流程图连接样式
- 实线，箭头，文字
graph LR
A-- 文字描述 --->B
或
A--> |文字| B- 实线，箭头，无文字
graph LR
A-->B- 实线，无箭头，无文字
graph LR
A---B- 实线，无箭头，文字
graph LR
A-- 文字描述 ---B- 虚线，箭头，无文字
graph LR;
A-.->B;- 虚线，箭头，文字
graph LR;
A-. 文字 .->B;综合示例：文章源自编程技术分享-https://mervyn.life/226.html
时序图
时序图代码以「sequenceDiagram」开头。
时序图中包括如下常见元素：文章源自编程技术分享-https://mervyn.life/226.html
参与者
participant [别名 as ]《参与者名称》。语句次序即为参与者横向排列次序。文章源自编程技术分享-https://mervyn.life/226.html
消息
交互时一方对另一方的操作（比如接口调用）或传递出的信息。文章源自编程技术分享-https://mervyn.life/226.html
- 用单向箭头来表示——实线代表主动发出消息；
- 虚线代表响应；
- 末尾带「X」代表异步消息，无需等待回应。
消息语句格式为：文章源自编程技术分享-https://mervyn.life/226.html
<参与者> <箭头> <参与者> : <描述文本>。其中 <箭头> 的写法有：文章源自编程技术分享-https://mervyn.life/226.html
->> 显示为实线箭头（主动发出消息）
-->> 显示为虚线箭头（响应）
-x 显示为末尾带「X」的实线箭头（异步消息）示例：文章源自编程技术分享-https://mervyn.life/226.html
sequenceDiagram
participant A as lilei
participant B as hanmeimei
A ->> B: How are you.
Note left of A: 对象A的描述(提示)
B -->> A: Fine, Thank you.
Note right of B: 对象B的描述
A -x B: 我走了激活框
从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。文章源自编程技术分享-https://mervyn.life/226.html
<参与者> <箭头> [+/-]: <描述文本>。示例：文章源自编程技术分享-https://mervyn.life/226.html
sequenceDiagram
老板 ->> + 员工: 今年年终奖翻倍
员工 -->> - 老板: 持续鼓掌注解
sequenceDiagram
Note left of 老板A : 我脸盲
Note right of 老板B : 我对钱没兴趣
Note over 老板A,老板B : 996走起来循环
相当于编程代码中的 while 循环
循环格式为：文章源自编程技术分享-https://mervyn.life/226.html
loop 循环的描述
消息
end示例：文章源自编程技术分享-https://mervyn.life/226.html
sequenceDiagram
用户 ->> + 网站 : 账号实名认证
网站 -->> - 用户 : 资料提交成功，等待审核
loop 一天七次
用户 ->> + 网站 : 查看审核进度
网站 -->> - 用户 : 审核中
end选择(alt)
相当于 if 及 else if 语句。或者理解为 switch 也可以文章源自编程技术分享-https://mervyn.life/226.html
sequenceDiagram
学生 ->> 学校 : 查询成绩
学校 -->> 学生 : 成绩
alt 成绩 > 550
学生 ->> 学校 : 可以上一本了
else 400 < 成绩 < 550
学生 ->> 学校 : 上个二本吧
else 余额 > 300
学生 ->> 学校 : 考虑下专科吧
end可选
相当于单个分支的 if 语句。文章源自编程技术分享-https://mervyn.life/226.html
sequenceDiagram
美女 ->> 帅哥 : 我想找个高富帅
opt 我就是
帅哥 -->> 美女 : 加个微信吧
end并行
sequenceDiagram
老板 ->> 员工 : 开始实行996
par 开始摸鱼
员工 ->> 员工 : 刷微博
and
员工 ->> 员工 : 听音乐
end
员工 -->> 老板 : 9点下班基本上掌握这些就可以画出你想要的流程图和时序图。文章源自编程技术分享-https://mervyn.life/226.html
评论