1、前言
在日常记笔记的过程中，难免会需要绘制一些流程图。之前都是选择用专业的软件或者在线工具来绘制，画完再导出到文档中。
但是如果我们记笔记的时候是使用的markdown的写法的话，直接在笔记中用markdown的写法去实现流程图，就避免了不断截图造成的时间浪费。
2、代码绘图的优点
- 不需要额外安装专业的画图软件，很多markdown的编译器都自带了这个功能。
- 截图的方式插入到笔记中还需要考虑图片大小已经清晰度的问题。另外，流程图内容更改起来不是很方便。而代码绘图就不需要考虑这些。
3、效果
4、插件
mermaid是一种Javascript的绘图工具，采用了类markdown的语法结构，用户可以方便快捷的通过代码创建图表。mermaid的写法已经在markdown中集成，我们在使用时可以直接在.md文件中书写。
不过VScode对mermaid语法的支持不完全，我们在使用mermaid的时候，需要下载插件Markdown Preview Enhanced来增加VScode的兼容。
5、语法
```mermaid
graph BT;
...代码位置
```
6、布局
- TB，从上到下（Top -> Bottom）
- TD，从上到下
- BT，从下到上（Bottom -> Top）
- RL，从右到左（Right -> Left）
- LR，从左到右（Left -> Right）
例如：
```mermaid
graph BT;
A-->B;
A-->C;
B-->D;
C-->D;
``&`
// 上一行&为了保持格式，使用时请删除
7、符号
1、起止框()
```mermaid
graph BT;
A(开始)
``&`
// 上一行&为了保持格式，使用时请删除
示例：
2、处理框[]
```mermaid
graph BT;
B[处理框]
``&`
// 上一行&为了保持格式，使用时请删除
示例：
3、判断框{}
```mermaid
graph BT;
C{判断框}
``&`
// 上一行&为了保持格式，使用时请删除
示例：
4、流程图连接样式
1. 实线、箭头、文字 A-- 文字描述 --->B
```mermaid
graph LR
A-- 文字描述 --->B
``&`
// 上一行&为了保持格式，使用时请删除
示例：
2. 实线、箭头、无文字 A-->B
```mermaid
graph LR
A-->B
``&`
// 上一行&为了保持格式，使用时请删除
示例：
3. 实线，无箭头，无文字 A---B
```mermaid
graph LR
A---B
``&`
// 上一行&为了保持格式，使用时请删除
示例：
4. 实线，无箭头，文字 A-- 文字描述 ---B
```mermaid
graph LR
A-- 文字描述 ---B
``&`
// 上一行&为了保持格式，使用时请删除
示例：
5. 虚线、箭头、无文字 A-.->B;
```mermaid
graph LR
A-.->B;
``&`
// 上一行&为了保持格式，使用时请删除
示例：
6. 实线，箭头，文字 A-. 文字 .->B;
```mermaid
graph LR
A-. 文字 .->B;
``&`
// 上一行&为了保持格式，使用时请删除
示例：
8、综合示例
```mermaid
graph TB
A(接口请求) --> B[参数校验]
B[参数校验] --> C{校验通过?}
C{校验通过?} -- 通过 --> d[处理业务逻辑]
C{校验不通过} -- 不通过 --> e[结束]
d[处理业务逻辑] --> e(结束)
``&`
// 上一行&为了保持格式，使用时请删除
评论区