Mermaid 的 mindmap（思维导图）从 Mermaid 10.5 起进入稳定版。它用缩进表达层级、用前缀字符表达节点形状，比 PlantUML 的 * / ** 更直观。本文给出一份能直接复用的语法模板，覆盖：根节点、缩进、形状、图标、配色、典型场景。
一句话入门
1
2
3
4
5
6
7
8
9
10
11
12
| mindmap
root((Mermaid 思维导图))
起源
GitHub 仓库
v10.5 GA
语法
缩进表达层级
前缀表达形状
用途
知识梳理
项目拆解
决策树
|
源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| ```mermaid
mindmap
root((Mermaid 思维导图))
起源
GitHub 仓库
v10.5 GA
语法
缩进表达层级
前缀表达形状
用途
知识梳理
项目拆解
决策树
```
|
根节点写法
| 写法 |
形状 |
用途 |
root(文本) |
圆角矩形 |
默认根节点 |
root((文本)) |
圆形 |
强调中心 |
root[文本] |
方形 |
强调分类 |
root((文本))icon:fa fa-book |
圆形 + FontAwesome 图标 |
带图标 |
1
2
3
4
5
6
7
| mindmap
root((中心主题))
子 A
子 B
root[分类主题]
类 A
类 B
|
源码：
1
2
3
4
5
6
7
8
9
| ```mermaid
mindmap
root((中心主题))
子 A
子 B
root[分类主题]
类 A
类 B
```
|
缩进与层级
层级靠空格缩进控制，建议每个层级用 2 或 4 个空格。Mermaid 解析器对缩进敏感，混用 Tab 和空格会出错。
1
2
3
4
5
6
7
8
9
| mindmap
root((缩进))
一级A
二级A1
三级A1a
三级A1b
二级A2
一级B
二级B1
|
源码：
1
2
3
4
5
6
7
8
9
10
11
| ```mermaid
mindmap
root((缩进))
一级A
二级A1
三级A1a
三级A1b
二级A2
一级B
二级B1
```
|
层级理论上无限深，但视觉上 3 层以内最清晰，再深就糊成一团。
节点形状（前缀）
在文本前面加特定前缀，节点就会用对应形状渲染：
| 前缀 |
形状 |
视觉效果 |
文本 |
圆角矩形 |
默认 |
((文本)) |
圆形 |
强调 |
([文本]) |
体育场形 |
长文本 |
[文本] |
矩形 |
类别 |
((文本))) |
爆炸形 |
警告/亮点 |
>文本] |
不对称 |
旗帜 |
实战：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| mindmap
root((形状对比))
默认
普通文本
圆形
((关键概念))
体育场
([一段很长的描述文字可以放进去])
矩形
[分类标签]
爆炸
)))警告)))
旗帜
>置顶]
|
源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| ```mermaid
mindmap
root((形状对比))
默认
普通文本
圆形
((关键概念))
体育场
([一段很长的描述文字可以放进去])
矩形
[分类标签]
爆炸
)))警告)))
旗帜
>置顶]
```
|
图标
Mermaid 内置 FontAwesome 图标库，节点文本前用 ::icon(fa fa-xxx) 即可：
1
2
3
4
5
6
7
8
9
10
11
12
13
| mindmap
root((系统架构))
前端
::icon(fa fa-browser)
React
::icon(fa fa-mobile)
移动端
后端
::icon(fa fa-server)
Go API
数据库
::icon(fa fa-database)
PostgreSQL
|
源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ```mermaid
mindmap
root((系统架构))
前端
::icon(fa fa-browser)
React
::icon(fa fa-mobile)
移动端
后端
::icon(fa fa-server)
Go API
数据库
::icon(fa fa-database)
PostgreSQL
```
|
常用图标：fa fa-book、fa fa-cog、fa fa-rocket、fa fa-bug、fa fa-check、fa fa-times、fa fa-question、fa fa-exclamation。
classDef 配色
跟 flowchart 一样，用 classDef 给节点染色。作用范围可以是整个子树：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| mindmap
root((配色))
安全
::icon(fa fa-shield)
HTTPS
::icon(fa fa-lock)
加密
性能
::icon(fa fa-bolt)
CDN
缓存
classDef 安全 fill:#fef3c7,stroke:#92400e,color:#1f2937
classDef 性能 fill:#dbeafe,stroke:#1e40af,color:#1f2937
class 安全,性能 classDefStyle
|
源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ```mermaid
mindmap
root((配色))
安全
::icon(fa fa-shield)
HTTPS
::icon(fa fa-lock)
加密
性能
::icon(fa fa-bolt)
CDN
缓存
classDef 安全 fill:#fef3c7,stroke:#92400e,color:#1f2937
classDef 性能 fill:#dbeafe,stroke:#1e40af,color:#1f2937
class 安全,性能 classDefStyle
```
|
实战模板（5 个）
1. 项目决策树
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| mindmap
root((要不要重构))
重构
::icon(fa fa-check)
代码更清晰
::icon(fa fa-check)
长期可维护
::icon(fa fa-times)
短期成本高
不重构
::icon(fa fa-check)
短期交付快
::icon(fa fa-times)
技术债累积
决策依据
团队规模
业务稳定性
重构 ROI
|
2. 学习路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| mindmap
root((学 Rust))
基础
::icon(fa fa-book)
所有权
借用
生命周期
进阶
::icon(fa fa-cog)
Trait
宏
异步
实战
::icon(fa fa-rocket)
Web 服务
命令行工具
嵌入式
|
3. 知识体系
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| mindmap
root((分布式系统))
理论基础
CAP
一致性模型
Paxos / Raft
通信
RPC
gRPC
消息队列
存储
分片
复制
最终一致性
调度
Kubernetes
服务网格
流量调度
|
4. Bug 排查路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| mindmap
root((线上问题排查))
现象
接口超时
数据不一致
内存飙升
定位
::icon(fa fa-search)
日志
::icon(fa fa-chart-line)
监控
::icon(fa fa-code-branch)
Trace
修复
回滚
限流
补丁
复盘
根因
流程改进
监控补齐
|
5. 会议纪要
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| mindmap
root((本周周会))
已完成
::icon(fa fa-check)
需求评审
::icon(fa fa-check)
接口定义
进行中
::icon(fa fa-cog)
后端开发
::icon(fa fa-cog)
前端联调
阻塞
::icon(fa fa-exclamation)
测试环境
下周计划
性能压测
文档补齐
灰度发布
|
配置项
通过 %%{init: {...}}%% 改全局行为：
1
2
3
4
5
6
7
| ```mermaid
%%{init: {"theme": "base", "themeVariables": {"fontSize": "14px"}}}%%
mindmap
root((配置示例))
主题 base
字号 14px
```
|
| 选项 |
作用 |
theme |
default / base / dark / forest / neutral |
themeVariables.fontSize |
全局字号 |
themeVariables.primaryColor |
主色 |
常见问题
1. 中文节点乱码或渲染失败
检查缩进：必须用空格，不要用 Tab。建议统一 2 空格。
2. 节点文字含特殊字符
#、&、<、> 等需要转义或包反引号：
1
2
3
4
5
6
| ```mermaid
mindmap
root((特殊字符))
含 `&` 的文字
含 `#` 的文字
```
|
3. 多根节点
Mermaid mindmap 不支持多根。要表达”多个并列主题”用 flowchart 或者把多个 mindmap 拆成多个代码块。
4. 节点顺序错乱
Mermaid 默认按声明顺序渲染。要固定左右走向，先用 _root 后用 _first / _second 提示：
1
2
3
4
5
6
7
| ```mermaid
mindmap
root
_root(中心)
_first 第一个分支
_second 第二个分支
```
|
评审 checklist
