Mermaid代码画图：语法生成21种图形

团队里写文档的人对 Mermaid 不陌生：用文本语法描述结构，渲染成图。这里内置了 Mermaid 在线编辑器，官方知识社区介绍其支持流程图、时序图、类图等 21 种图形。

为什么用代码画图

• 版本可控：Mermaid 源码是纯文本，能进代码仓库、能做 diff，改了什么一目了然；
• 修改快：加一个节点就是加一行代码，不用拖拽对齐；
• 便于复用：同一段语法换个主题风格就是一张新图。

基本用法

1. 进入 Mermaid 编辑器；
2. 按语法输入或粘贴代码，例如最简单的流程图语法从声明节点和箭头开始；
3. 画布实时渲染出对应图形；
4. 需要可视化微调时，点击顶部「图形化编辑」进入流程图编辑器手动优化——两种形态衔接顺畅，代码生成的图可以继续拖拽调整。

AI 与 Mermaid 的组合

官方知识社区提到一种「懒人」组合：在 Mermaid 编辑器里点击 AI 生成，选择流程图场景，直接用文字描述需求，AI 同时生成 Mermaid 代码和对应图形。这样既得到了可版本管理的代码，又省去了查语法的时间。

支持的图形范围

按官方知识社区文章的介绍，覆盖流程图、时序图、类图等 21 种图形，常用的还包括状态图、甘特图、类图等（完整清单以编辑器内置模板为准）。

适用边界

• 优点场景：开发文档配图、架构评审材料、需要频繁迭代的示意图；
• 不如可视化编辑的场景：复杂泳道布局、精确定位的排版图——这些直接用流程图编辑器更高效，见泳道图怎么画。

和导入功能的关系

产品页提到支持导入 Mermaid 格式；已有 Mermaid 源码文件时也可以走导入本地文件的路径进编辑器。