Mermaid 在线编辑器
用文本写图表，右侧实时出图。内置 28 类模板，支持语法高亮、自动补全与一键格式化
功能特性
图类型关键字、连线箭头、节点标签、注释与指令分色渲染，几十行的图也能一眼看清结构。
停笔约 0.35 秒自动重新渲染，右侧图表始终跟得上输入，无需手动点「运行」。
按当前图类型智能给出词条：流程图的 subgraph、时序图的 alt/loop、类图的关系箭头都能 Tab 补全。
流程图、时序图、类图、状态图、ER 图、甘特图、看板、饼图、雷达图、矩形树图、思维导图、时间线、用户旅程、Git 图、四象限、桑基图、柱线组合图、C4 架构图、部署架构图、目录树等，侧栏常驻且可搜索。
自动重排 subgraph / alt / else / 大括号的缩进层级，折叠多余空行与零散空格，代码风格立刻整齐。
编辑历史独立成栈，Ctrl + Z 撤销、Ctrl + Shift + Z 重做，换模板、格式化的结果也能一键回退。
支持 PNG（1x–4x 倍率）、矢量 SVG、PDF 与 .mmd 源文件，导出背景可选透明、白色或深色。
模板库、代码、预览三栏同屏，面板高度自动贴合窗口，滚动只发生在面板内部；预览跟随站点深色主题，也可单独切浅色 / 深色 / 森林 / 中性，缩放支持一键适应窗口与手动放大。
语法出错时不会静默失败：提示面板给出解析器原话与大致行号，并在左侧代码对应行标出红色底纹。
代码实时存入浏览器本地存储，刷新或误关页面后再打开自动恢复，不上传服务器。
使用步骤
模板库常驻在左侧并可搜索，挑一个最接近的图点击即填入编辑器；也可以直接手写代码，随时用 Ctrl + Z 撤回。
左侧编辑、右侧实时出图。输入时会有补全提示，按 Tab 接受、上下键切换候选。
点「格式化」规范缩进；若右侧出现红色提示，按提示行号定位修正语法。
先设好导出倍率与背景，再导出 PNG / SVG / PDF；需要继续编辑可下载 .mmd 源文件。
适用场景
常见问题
写的代码会被上传到服务器吗？
不会。Mermaid 的解析与渲染全部在浏览器里完成，代码只存在你自己的本地存储中，不经过任何服务器。
支持哪些图表类型？
内置流程图、时序图、类图、状态图、ER 图、甘特图、看板、饼图、雷达图、矩形树图、思维导图、时间线、用户旅程图、Git 分支图、四象限图、桑基图、柱线组合图、C4 上下文图与容器图、部署架构图、网络包结构、目录树、块图等共 28 类模板，Mermaid 支持的其他语法也可以直接手写。
导出的 PNG 为什么建议用 2x？
Mermaid 图里文字较小，1x 在 Retina 屏或插入文档放大后会发虚；2x 兼顾清晰度与体积，贴在 PPT 里基本看不出锯齿，需要打印可选 3x 或 4x。
导出的 SVG 还能再改文字吗？
可以。本工具关闭了 mermaid 的 HTML 标签渲染，文字是真正的 SVG <text> 元素，在 Illustrator、Figma、Inkscape 里可以选中直接改写。
自动补全怎么触发？
在编辑器里正常输入字母就会自动弹出候选，上下键选择、Tab 或回车接受；想主动看当前图类型的全部词条，按 Ctrl + Space。
提示语法错误但看不出来哪里错？
错误面板会显示解析器的原始提示与大致行号，左侧代码对应行也会标红。最常见的原因是少了 end 收尾、括号未闭合，或图类型声明的拼写（如 stateDiagram-v2 的 -v2）不完整。