Mermaid 教程：用文本绘制专业级流程图与图表 - 刀劍偏冷的博客

"代码即图表" 的沉浸式可视化方案

📌 核心优势

纯文本驱动：无需图形工具，用代码定义图表
无缝集成：原生支持 Markdown，GitHub/GitLab/Typora 全兼容
动态更新：修改数据自动重绘，维护成本降低 80%
多范式支持：流程图 / 时序图 / 甘特图 / 饼图 / 用户旅程图

🧰 环境准备

三秒上手方案

graph TD
    A[安装Mermaid CLI] --> B[本地渲染]
    C[浏览器引入CDN] --> D[网页实时预览]
    E[VSCode插件] --> F[智能语法提示]

开发者工具链

工具类型	推荐方案	特色功能
编辑器	Typora / Obsidian	内置实时渲染
IDE插件	VS Code Mermaid插件	语法校验+自动补全
在线工具	Mermaid Live Editor	即时调试+导出PNG/SVG

📘 基础语法速成

1. 流程图（Flowchart）

graph LR
    A[开始] --> B{条件判断}
    B -- 是 --> C[执行操作]
    B -- 否 --> D[结束流程]
    C --> D

进阶技巧：

graph LR
    subgraph 子流程
        E[数据库查询] --> F[数据处理]
    end

2. 时序图（Sequence Diagram）

sequenceDiagram
    participant 用户
    participant 系统
    participant 数据库

    用户->>+系统: 发送请求
    系统->>+数据库: 查询数据
    数据库-->>-系统: 返回结果
    系统-->>-用户: 展示信息

生命线控制：

sequenceDiagram
    participant 用户
    participant 系统

    opt 条件分支
        用户 -> 系统: 用户验证成功
        系统 --> 用户: 授权访问资源
    end

3. 甘特图（Gantt）

gantt
    title 项目时间线
    dateFormat  YYYY-MM-DD
    section 开发阶段
    需求分析   :a1, 2024-03-01, 7d
    原型设计   :a2, after a1, 5d

4. 饼图（Pie Chart）

pie
    title 资源占比
    "前端开发" : 40
    "后端开发" : 35
    "测试"     : 25

🛠 高级功能实战

1. 自定义样式

graph LR
    classDef custom fill:#f96,stroke:#333,stroke-width:4px;
    A[样式节点] --> B[目标节点]
    class A,B custom

2. 多图表联动

graph LR
    A[主控模块] --> B[子系统1]
    A --> C[子系统2]
    linkStyle 0 stroke:#f00,stroke-width:2px;

📊 典型应用场景

场景	解决方案	优势对比
技术文档	自动生成架构图	版本控制友好
项目管理	可编程甘特图	数据驱动更新
教学课件	可交互流程演示	动态教学演示
API设计	时序图可视化	需求沟通精准度提升

🚫 常见问题排查

1. 图表不显示？

✅ 检查代码块标记：
```
 而非 
```
graph
✅ 确认编辑器启用Mermaid支持（Typora需勾选偏好设置）
✅ CDN加载失败时尝试离线模式

2. 语法错误定位

使用 Mermaid CLI 进行严格校验：

mmdc -i input.mmd -o output.svg

📚 持续学习路径

官方文档 mermaid.js.org
社区资源 Awesome Mermaid
进阶课程 Mermaid Academy

📌 小技巧：在 VSCode 中按 Ctrl+Shift+P 输入 "Mermaid: Preview" 可快速调试

立即实践：将本教程中的示例代码粘贴到 Mermaid Live Editor 即刻生成你的第一张动态图表！