进阶(mermaid画图)

markdown代码块中的mermaid模块能够实现画图功能,这一部分只有简单流程图比较常用(只是个人觉得), 简单看看就行

简单流程图

graph LR
%%A指向B(两个百分号代表注释)
A-->B

mermaid语法以graph标记开头, 后接图像的走向方向, 按照T: top, B: bottom, L: left, R: right, D: down

TB代表从上到下, LR代表从左到右, 以此类推

节点形状

节点名<形状符号>节点内容<形状符号>

不加形状符号时节点名就是节点内容, 形状为默认的文本节点(方形)

graph TB
默认节点
B[文本节点]
C(圆角节点)
D((圆形节点))
E>非对称节点]
F{菱形节点}

连线形状

箭头连接 A1-->B1 开放连接 A2---B2 标签连接 A3--text---B3 箭头标签连接 A4--text-->B4 虚线开放连接 A5-.-B5 虚线箭头连接 A6-.->B6 标签虚线连接 A7-.text.-B7 标签虚线箭头连接 A8-.text.->B8 粗线开放连接 A9===B9 粗线箭头连接 A10==>B10 标签粗线开放连接 A11==text===B11 标签粗线箭头连接 A12==text==>B12 标签写法还可以是下面的:(可能会更方便一点) a -->|标签| b a -.-> |标签| b a ==>|标签| b ...

可以通过添加相应的 - = . 来增大线条的长度

类型\长度	1	2	3
正常	`---`	`----`	`-----`
虚线	`-.-`	`-..-`	`-..-`
加粗	`===`	`====`	`=====`

子图

mermaid支持子图, 即图和图之间相互包含

子图以subgraph开头, end结尾, 所有的节点都是全局的, 即不同子图的不同节点可以相互连接

graph LR

subgraph 子图名称
子图代码
end

使用 direction 设置子图方向

graph LR

subgraph 1
direction LR
a1-->b1
end

subgraph 2
direction LR
a2-->b2
end

subgraph 3
direction LR
a3-->b3
end

a3-->a2

时序图

时序图用来描述两个或更多模块之间的交互过程，markdown 也同样提供了绘制时序图的功能。

绘制时序图的关键字是 sequenceDiagram

模块声明

使用 participant 关键字声明一个模块, 模块声明的顺序决定时序图中展示的顺序

sequenceDiagram  
participant B
participant A

示例

sequenceDiagram participant server participant CA participant client server->>CA: 这是我的公钥 CA-->>server: 下发证书 server->client: 建立连接 client->>server: 我要 RSA 算法加密的公钥 server-->>client: 下发证书与公钥 client-->>server: 上报通过公钥加密的随机数 server->>server: 生成对称加密秘钥 client-->server: 加密通信 client-->server: 加密通信 client-xserver: 关闭连接

饼图

pie 
title 标题
"类别名称": 数量
"类别名称": 数量
...

每个类别的占比会自动计算

状态图

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

甘特图

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h

16 十月 2024