mermaid文本绘图
介绍如何用 Mermaid 纯文本语法绘制常见数据结构图（数组、链表、栈、队列、树）和时序图，无需导入图片，轻松在文档中可视化算法与流程。
- 次阅读
145 字
阅读约 1 分钟
数据结构
之前写算法的时候，经常需要画一些数据结构图，最近发现使用mermaid来画图，效果非常好，而且不需要引入各种图片
数组
Note
使用rankSpacing可以调整层级的间距，让节点紧邻
%%{init: {'flowchart': {'nodeSpacing': 0, 'rankSpacing': 1}}}%%
graph TD
A["head ^"] --> B[Node 2]
B --> C[Node 3]
C --> D[Node 4]
D --> E["tail $"]
链表
%%{init: {'flowchart': {'nodeSpacing': 0, 'rankSpacing': 20}}}%%
graph TD
A["head ^"] --> B[Node 2]
B --> C[Node 3]
C --> D[Node 4]
D --> E["tail $"]
栈
%%{init: {'flowchart': {'rankSpacing': 50}}}%%
graph TD
subgraph "缓冲区"
进栈 ~~~ 出栈
end
缓冲区 e1@==> A
A e2@==> 缓冲区
e1@{ animate: true }
e2@{ animate: true }
A["head ^"] --> B[Node 2]
B --> C[Node 3]
C --> D[Node 4]
D --> E["tail $"]
队列
%%{init: {'flowchart': {'rankSpacing': 50}}}%%
graph TB
A["head ^"] --> B[Node 2]
B --> C[Node 3]
C --> D[Node 4]
D --> E["tail $"]
A e1@==> 出队
入队 e2@==> E
e1@{ animate: true }
e2@{ animate: true }
subgraph "缓冲区"
direction TB
出队 ~~~ spacer[ ] ~~~ 入队
end
style spacer fill:none,stroke:none
树
graph TB
A[Root] --> B[Child 1]
A --> C[Child 2]
B --> D[Grandchild 1]
B --> E[Grandchild 2]
C --> F[Grandchild 3]
C --> G[Grandchild 4]
时序图
以一个用户验证码登录流程为例，展示时序图的使用
sequenceDiagram
actor user as 用户
participant server as 登录服务
participant sms as 短信服务
participant redis@{ "type": "database" }
rect rgba(114, 160, 253, 0.3)
note over server,sms :用户获取验证码
user ->> server: 点击"获取验证码"按钮
server ->> redis: 生成并存储
server ->> sms: 调用SDK
sms ->> user: 发送验证码
end
rect rgba(114, 160, 253, 0.3)
note over server,sms: 验证码比对
user ->> server: 提交手机+验证码登录
server ->> redis: 获取验证码
server ->> server: 验证码比对
end
opt 验证码正确
server ->> user: 登录成功
end
opt 验证码错误
server ->> user: 登录失败
end
状态机
stateDiagram-v2
direction LR
[*] --> 新建
新建 --> 就绪 : 创建完成
就绪 --> 运行 : 调度
运行 --> 阻塞 : 等待事件
阻塞 --> 就绪 : 事件完成
运行 --> 就绪 : 时间片到
运行 --> 终止 : 结束
终止 --> [*]
饼图
pie title 全球浏览器占比
"Chrome": 71.37
"Firefox": 2
"Edge": 4.65
"Safari": 14.75
块图
我经常使用块图来展示一些二进制数据的结构，比如UTF-8编码的字节分布，下面是一些示例：
block
columns 5
a["a"]:1
block:binary1:1
%% 'a' = 97 = 0b01100001
b0["0"] b1["1"] b2["1"] b3["0"] b4["0"] b5["0"] b6["0"] b7["1"]
end
style b0 fill:#f96,stroke:#c60,color:#000
space
space
space
你["你"]:1
block:你utf8_1:1
%% byte1: E4 = 11100100
c0["1"] c1["1"] c2["1"] c3["0"] c4["0"] c5["1"] c6["0"] c7["0"]
end
block:你utf8_2:1
%% byte2: BD = 10111101
d0["1"] d1["0"] d2["1"] d3["1"] d4["1"] d5["1"] d6["0"] d7["1"]
end
block:你utf8_3:1
%% byte3: A0 = 10100000
e0["1"] e1["0"] e2["1"] e3["0"] e4["0"] e5["0"] e6["0"] e7["0"]
end
space
style c0 fill:#f96,stroke:#c60,color:#000
style c1 fill:#f96,stroke:#c60,color:#000
style c2 fill:#f96,stroke:#c60,color:#000
style c3 fill:#f96,stroke:#c60,color:#000
style d0 fill:#f96,stroke:#c60,color:#000
style d1 fill:#f96,stroke:#c60,color:#000
style e0 fill:#f96,stroke:#c60,color:#000
style e1 fill:#f96,stroke:#c60,color:#000
👍["👍"]:1
block:thumb_b1:1
%% byte1: F0 = 11110000
f0["1"] f1["1"] f2["1"] f3["1"] f4["0"] f5["0"] f6["0"] f7["0"]
end
block:thumb_b2:1
%% byte2: 9F = 10011111
g0["1"] g1["0"] g2["0"] g3["1"] g4["1"] g5["1"] g6["1"] g7["1"]
end
block:thumb_b3:1
%% byte3: 91 = 10010001
h0["1"] h1["0"] h2["0"] h3["1"] h4["0"] h5["0"] h6["0"] h7["1"]
end
block:thumb_b4:1
%% byte4: 8D = 10001101
i0["1"] i1["0"] i2["0"] i3["0"] i4["1"] i5["1"] i6["0"] i7["1"]
end
style f0 fill:#f96,stroke:#c60,color:#000
style f1 fill:#f96,stroke:#c60,color:#000
style f2 fill:#f96,stroke:#c60,color:#000
style f3 fill:#f96,stroke:#c60,color:#000
style f4 fill:#f96,stroke:#c60,color:#000
style g0 fill:#f96,stroke:#c60,color:#000
style g1 fill:#f96,stroke:#c60,color:#000
style h0 fill:#f96,stroke:#c60,color:#000
style h1 fill:#f96,stroke:#c60,color:#000
style i0 fill:#f96,stroke:#c60,color:#000
style i1 fill:#f96,stroke:#c60,color:#000