Mermaid 流程图怎么画：代码变图实时预览
Mermaid 用纯文本描述图形：改字就改图，天然适合写进文档和版本管理。本工具左侧写代码、右侧 0.5 秒防抖实时渲染，内置流程图、时序图、甘特图、类图四个中文示例，点一下即可在此基础上修改。
最近更新：2026年8月13日
需要马上处理？使用 流程图绘制 ，浏览器本地完成，不上传服务器。
打开 Mermaid 绘图先套模板，再改文字
不熟语法时，先点模板区的「流程图」「时序图」等示例，把节点文字换成自己的业务术语即可。箭头写法 A --> B 表示从 A 指向 B，大括号 { } 是判断分支。
甘特图适合表达排期：dateFormat 后用「任务 : 起始日期, 持续天数」描述；after a1 表示接在某任务之后。
报错与导出的常见处理
语法错误会在预览区显示中文提示，常见原因包括箭头写成单横线、节点文字含特殊符号未加引号、缩进不一致。对照模板逐项检查通常能快速定位。
导出建议：要插入网页或需要无损缩放选 SVG；要贴进 Word、PPT 选 2x PNG，背景会自动铺白底保证可读性。
操作步骤
- 打开「流程图绘制」，选择一个中文模板
- 把节点文字替换为自己的内容，观察右侧实时预览
- 按错误提示修正语法
- 导出 SVG 或高清 PNG 使用
常见问题
支持 ER 图、状态图吗？
支持。Mermaid 官方语法均可使用，模板区之外可直接手写对应代码。
渲染慢或卡住怎么办？
图过大时渲染会变慢，可拆成多个子图；也可以先暂停输入再一次性粘贴完整代码。
代码会上传吗？
不会。Mermaid 在浏览器本地完成解析与渲染，代码不离开本机。