目 录CONTENT

文章目录

【mermaid语法】用VScode写类Markdown代码实现流程图绘制

萧瑟
2023-08-10 / 0 评论 / 0 点赞 / 873 阅读 / 30,874 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-08-11,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1、前言

在日常记笔记的过程中,难免会需要绘制一些流程图。之前都是选择用专业的软件或者在线工具来绘制,画完再导出到文档中。

但是如果我们记笔记的时候是使用的markdown的写法的话,直接在笔记中用markdown的写法去实现流程图,就避免了不断截图造成的时间浪费。

2、代码绘图的优点

  1. 不需要额外安装专业的画图软件,很多markdown的编译器都自带了这个功能。
  2. 截图的方式插入到笔记中还需要考虑图片大小已经清晰度的问题。另外,流程图内容更改起来不是很方便。而代码绘图就不需要考虑这些。

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;
``&`
// 上一行&为了保持格式,使用时请删除
ABCD

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
``&`
// 上一行&为了保持格式,使用时请删除

示例:

文字描述
A
B

2. 实线、箭头、无文字 A-->B

```mermaid
graph LR
A-->B
``&`
// 上一行&为了保持格式,使用时请删除

示例:

A
B

3. 实线,无箭头,无文字 A---B

```mermaid
graph LR
A---B
``&`
// 上一行&为了保持格式,使用时请删除

示例:

A
B

4. 实线,无箭头,文字 A-- 文字描述 ---B

```mermaid
graph LR
A-- 文字描述 ---B
``&`
// 上一行&为了保持格式,使用时请删除

示例:

文字描述
A
B

5. 虚线、箭头、无文字 A-.->B;

```mermaid
graph LR
A-.->B;
``&`
// 上一行&为了保持格式,使用时请删除

示例:

A
B

6. 实线,箭头,文字 A-. 文字 .->B;

```mermaid
graph LR
A-. 文字 .->B;
``&`
// 上一行&为了保持格式,使用时请删除

示例:

文字
A
B

8、综合示例

```mermaid
graph TB
    A(接口请求) --> B[参数校验]
    B[参数校验] --> C{校验通过?}
    C{校验通过?} -- 通过 --> d[处理业务逻辑]
    C{校验不通过} -- 不通过 --> e[结束]
    d[处理业务逻辑] --> e(结束)
``&`
// 上一行&为了保持格式,使用时请删除

通过
不通过
接口请求
参数校验
校验不通过
处理业务逻辑
结束

9、参考资料

1、mermaid-js 在线示例
2、知乎-陈修竹
3、掘金-MeetTanG

0

评论区