Tips
Mermaid 是用文字画图的工具。写几行带箭头和括号的代码 → 自动渲染成流程图、时序图、甘特图。GitHub、Obsidian、VS Code 原生支持。AI 生成 Mermaid 代码比你手动画图快十倍。
- mermaid.live 是最好的练习场所——不用装任何东西
- 中文节点偶尔导致换行异常，加
<br>手动断行 flowchart TD是新语法，老教程用graph TD——效果一样，但flowchart功能更多- 从流程图开始学。流程图会了再看时序图——这两类覆盖 80% 的需求
为什么不用拖拽画图
画流程图的标准流程：打开 Visio/PPT/ProcessOn → 拖矩形 → 拖菱形 → 拉箭头 → 调对齐 → 调字号 → 调颜色 → 截图 → 贴到文档。图改了一点 → 重新拖拽 → 重新截图 → 重新粘贴。
Mermaid 把画图变成写代码。你写 A[开始] --> B[处理] → 自动渲染成两个方块和一根箭头。修改只需要改文字，图自动更新。因为它是纯文本，Git 能追踪图的每一次改动历史——这是拖拽工具做不到的。
核心语法
在线练习：mermaid.live — 左边写代码右边看效果。
流程图
flowchart TD
A[开始] --> B{是否登录?}
B -->|是| C[进入主页]
B -->|否| D[跳转登录页]
D --> E[输入账号密码]
E --> B
flowchart TD = Top-Down（从上到下）。也可以用 LR（从左到右）。
节点形状：[矩形] (圆角) {菱形} ((圆)) [[子程序]]。
时序图
sequenceDiagram
用户->>服务器: 发送登录请求
服务器->>数据库: 查询用户
数据库-->>服务器: 返回用户信息
服务器-->>用户: 返回登录结果
甘特图
gantt
title 项目计划
dateFormat YYYY-MM-DD
section 准备阶段
需求分析 :a1, 2026-03-01, 7d
方案设计 :a2, after a1, 5d
section 开发阶段
编码 :a3, after a2, 14d
测试 :a4, after a3, 5d
哪些平台能用
- GitHub：在 Issue、PR、README 的 Markdown 代码块里写
mermaid，自动渲染 - Obsidian：代码块标记为
mermaid，实时预览 - VS Code：装 "Markdown Preview Mermaid Support" 扩展
- Notion：暂不支持原生 Mermaid（需用 mermaid.live 导出图片）
AI 协作
Mermaid 和 AI 是绝配。描述需求 → AI 生成代码 → 粘贴到文档 → 渲染出图。
"画一个用户注册流程图：用户输入信息 → 验证格式 → 如果格式错误返回修改，如果正确 → 发送验证邮件 → 用户点击链接 → 注册完成。用 Mermaid flowchart TD 格式。"
AI 生成的代码直接贴到 GitHub/Obsidian，瞬间出图。改需求 → 让 AI 重新生成 → 图自动更新。不需要截图不需要拖拽。
进阶：AI 能生成复杂图表——类图（classDiagram）展示代码结构、状态图（stateDiagram）展示状态转移、ER 图展示数据库关系。