![b4223391f7f3cbb70d74a21c4b195130.png](https://img-blog.csdnimg.cn/img_convert/b4223391f7f3cbb70d74a21c4b195130.png)
当撰写文档的时候,需要使用第三方工具绘制流程图,然后再将流程图导入 Markdown 有时会显得特别繁琐。Mermaid.js 可以用来解决这一痛点。简单说, Mermaid.js 可以看成是 Markdown 文档中一款绘图插件,其语法完全是 markdownish 的,绘图时不需要切换软件,也不需要切换思维。下面给出几个例子,大家可以感受一下,Mermaid.js 的简洁优雅。
在 VSCode 中,安装2个扩展
- Markdown Preview Enhanced
- Mermaid Markdown Syntax Highlighting
基本类型
流程图
graph TB
id1(圆角矩形)--普通线-->id2[矩形];
subgraph 子图
id2==粗线==>id3{菱形}
id3-.虚线.->id4>右向旗帜]
id3--无箭头---id5((圆形))
end
![69e173b52ad3ecbf2cbd69d1d09a7a5a.png](https://img-blog.csdnimg.cn/img_convert/69e173b52ad3ecbf2cbd69d1d09a7a5a.png)
时序图
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob : How about you?
Bob-->>John : Jolly good!
![032e92d892e9a344ad7022aa9ff0bdac.png](https://img-blog.csdnimg.cn/img_convert/032e92d892e9a344ad7022aa9ff0bdac.png)
Gantt 图
gantt
section Section
Completed: done, des1, 2014-01-06, 2014-01-08
Active : active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
![62230837f2f18ee8155d072fd136e71d.png](https://img-blog.csdnimg.cn/img_convert/62230837f2f18ee8155d072fd136e71d.png)
统计类型
饼图
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
![631b9d4bfec5dc8892432ae829816878.png](https://img-blog.csdnimg.cn/img_convert/631b9d4bfec5dc8892432ae829816878.png)
其他类型
类别图
classDiagram
Class01 <|-- AveryLongClass: Cool
<<interface>> Class01
Class09-->C2: Where am i?
Class09 --* C3
Class09 --|> Class07
Class07: equals()
Class07: Object[] elementData
Class01: size()
Class01: int chimp
Class01: int gorilla
class Class10 {
<<service>>
int id
size()
}
![716e0e7019bbfb542e679bf615ba425a.png](https://img-blog.csdnimg.cn/img_convert/716e0e7019bbfb542e679bf615ba425a.png)
状态图
stateDiagram
[*]-->Active
state Active {
[*]-->NumLockOff
NumLockOff-->NumLockOn : EvNumLockPressed
NumLockOn-->NumLockOff : EvNumLockPressed
--
[*]-->CapsLockOff
CapsLockOff-->CapsLockOn : EvCapsLockPressed
CapsLockOn-->CapsLockOff : EvCapsLockPressed
--
[*]-->ScrollLockOff
ScrollLockOff-->ScrollLockOn : EvCapsLockPressed
ScrollLockOn-->ScrollLockOff : EvCapsLockPressed
}
![db94cbe0be873062659b5dee1e62fcd6.png](https://img-blog.csdnimg.cn/img_convert/db94cbe0be873062659b5dee1e62fcd6.png)
实体关系图
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
![56cd866e079fd5c8bd69cc344315539c.png](https://img-blog.csdnimg.cn/img_convert/56cd866e079fd5c8bd69cc344315539c.png)
主题
Mermaid.js 内置了3种主题("default","forest","dark"),安装 Markdown Preview Enhanced 扩展后
![0ea866d2983ca0e77035ca9488439785.png](https://img-blog.csdnimg.cn/img_convert/0ea866d2983ca0e77035ca9488439785.png)
"ctrl"+"," 进入配置,点击右上角的图标,打开配置的 json 文件,加入如下配置。
![b04053d77ebd652b56d3549f709bc580.png](https://img-blog.csdnimg.cn/img_convert/b04053d77ebd652b56d3549f709bc580.png)
{
前景
目前,mermaid.js 支持的图型不断扩展,希望以后能成为 Markdown 中的 TikZ 吧。
更多详情,可以关注其官方文档。
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.mermaid-js.github.io