markdown方式绘图

使用markdown mermaid可快速绘制：流程图，时序图，甘特图等，程序员绘图必备技能

官方Demo

直接先看看效果

流程图

markdow

1
2
3
4
5
6

graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

流程图效果

时序图

markdown

1
2
3
4
5
6
7
8
9
10

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!

时序图效果

甘特图

markdown

1
2
3
4
5
6
7
8
9

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

甘特图效果

登陆系统-时序图举例

markdown

1
2
3
4
5
6
7
8
9
sequenceDiagram
participant web as 前端
participant auth as 认证服务
participant db as 数据库

web->>auth: 用户名和密码认证
auth->>db: 检验用户名和密码是否匹配
db-->>auth: 返回结果
auth-->>web: 返回结果

登陆系统时序效果图

VScode预览mermaid绘图效果

  • vsCode 安装插件：Markdown Preview Mermaid Support

more about mermaid