小白也能秒上手的 Mermaid 绘图攻略：用纯文本画出专业图表
摘要
Mermaid 是一款轻量级、零门槛的文本绘图工具，能让你用简单的代码快速生成流程图、时序图、类图等专业图表。本文从基础语法、核心图表类型、常见问题排查到场景选择，为小白提供一份完整的使用攻略，帮你告别繁琐的拖拽画图，实现 "写代码 = 出图表" 的高效可视化体验。
一、Mermaid 是什么？为什么适合小白？
Mermaid 不是传统的编程语言，而是一种声明式标记语言，核心是 "用纯文本描述图表结构，自动生成可视化图形"。
对小白来说，它的优势非常明显：
- 零环境依赖：无需安装复杂软件，打开在线编辑器就能用；
- 语法极简 ：像写句子一样画图，比如
A --> B就表示 "A 指向 B"； - 兼容性强：在 Typora、Notion、GitLab 等平台都能直接渲染；
- 效率极高：修改图表只需改代码，不用重新拖拽调整布局。
二、快速入门：3 步画出第一张图
1. 打开在线编辑器
访问官方编辑器：https://mermaid-js.github.io/mermaid-live-editor/，左侧写代码，右侧实时预览图表。
2. 输入极简代码
复制以下代码到左侧编辑区，右侧会自动生成流程图：
flowchart TD
A[开始] --> B{是否会用Mermaid？}
B -->|是| C[直接用]
B -->|否| D[看这篇攻略] --> C
C --> E[结束]
3. 理解核心语法
flowchart TD：表示 "从上到下的流程图"（TD = Top Down）；[]：矩形节点，代表操作 / 步骤；{}：菱形节点，代表决策 / 判断；-->：表示流程走向，|文字|是分支标注。
三、核心图表类型：小白必学 5 种
1. 流程图（Flowchart）
用途：描述业务流程、决策逻辑（如买手机、项目流程）。示例代码：
flowchart LR
A[明确需求] --> B[设定预算]
B --> C{预算充足？}
C -->|是| D[筛选机型]
C -->|否| E[调整预算] --> D
D --> F[下单购买]
2. 时序图（Sequence Diagram）
用途：描述角色 / 系统的交互顺序（如用户登录、接口调用）。示例代码：
sequenceDiagram
用户->>服务器: 发送登录请求
服务器->>数据库: 查询用户信息
数据库-->>服务器: 返回结果
服务器-->>用户: 登录成功
3. 饼图（Pie Chart）
用途：展示数据占比（如品牌分布、预算分配）。示例代码：
pie
title 手机品牌占比
"苹果" : 30
"华为" : 25
"小米" : 20
"其他" : 25
4. 状态图（State Diagram）
用途：描述对象的状态转换（如订单状态、设备状态）。示例代码：
stateDiagram
[*] --> 待支付
待支付 --> 已支付: 支付成功
已支付 --> 已发货: 商家发货
已发货 --> [*]: 确认收货
5. 类图（Class Diagram）
用途：面向对象设计，描述类与类的关系（如继承、关联）。示例代码：
classDiagram
class 手机 {
+品牌: string
+价格: int
+拍照()
}
class 智能手机 {
+系统: string
+联网()
}
智能手机 --|> 手机
四、常见问题：小白避坑指南
1. 生成失败怎么办？
- 检查符号：确保
[]{}-->都是英文半角符号； - 简化代码：先从极简示例开始，逐步添加节点；
- 换编辑器：优先用官方编辑器，避免第三方平台兼容问题。
2. 图表布局混乱？
- 调整方向：用
flowchart LR（从左到右）替代TD，优化布局； - 拆分节点：复杂图表拆分成多个子图，避免节点过多。
3. 中文显示乱码？
- 确保代码中没有隐藏的全角空格；
- 优先使用官方编辑器，避免旧版工具的兼容问题。
五、Mermaid vs PlantUML：小白该怎么选？
表格
| 维度 | Mermaid | PlantUML |
|---|---|---|
| 上手难度 | 极低，5 分钟入门 | 较高，需学习专业语法 |
| 环境依赖 | 纯前端，无需安装 | 需 Java/Graphviz 支持 |
| 适用场景 | 日常笔记、轻量协作、通用可视化 | 专业软件工程、复杂架构设计 |
小白建议：优先用 Mermaid 满足日常需求，若需要专业 UML 或深度定制，再考虑 PlantUML。
六、进阶技巧：让图表更专业
- 添加样式 ：用
style A fill:#f9f,stroke:#333,stroke-width:2px给节点设置颜色和边框； - 子图分组 ：用
subgraph 名称 ... end把相关节点分组，结构更清晰； - 导出图片：在官方编辑器点击「Download PNG/SVG」，保存高清图表。
七、综述
Mermaid 是小白可视化的 "神器"，它让画图从 "拖拽操作" 变成 "文本描述"，大幅提升效率。只要掌握核心语法和常见图表类型，你就能轻松应对日常的流程图、时序图等需求。