Mermaid图表实时预览器
在线编写Mermaid语法并实时渲染SVG预览，支持流程图、时序图、甘特图、类图等常见图表类型，可下载渲染结果。
免费在线工具
Loading…
使用说明
1. 在左侧代码框输入 Mermaid 语法，右侧预览区会在停止输入约 350ms 后自动重新渲染 SVG 图表，无需手动点击按钮。
2. 顶部下拉框内置流程图（flowchart）、时序图（sequenceDiagram）、甘特图（gantt）、类图（classDiagram）四种典型示例，选择后点击「加载示例数据」即可一键填入对应代码并渲染，方便快速上手不同图表类型的语法。
3. 语法有误时右侧会显示具体的错误信息，方便定位问题（例如箭头写法错误、缺少必要关键字等）。
4. 渲染成功后可点击「下载 SVG」将当前图表导出为 .svg 矢量文件，可直接用于文档、PPT 或进一步用矢量编辑软件调整。
功能介绍
本工具是一个纯前端的 Mermaid 图表实时预览器：左侧输入 Mermaid 文本语法，右侧渲染引擎实时生成对应的 SVG 图表。
支持 Mermaid 常见的多种图表类型，包括流程图（flowchart，节点/分支/箭头连线）、时序图（sequenceDiagram，参与者之间的消息交互）、甘特图（gantt，项目排期与任务依赖）、类图（classDiagram，类的属性/方法与继承关系）等，只要是标准 Mermaid 语法均可尝试渲染。
渲染引擎（mermaid 库）已完整打包进本地静态资源，页面加载和渲染过程不依赖任何外部 CDN，在网络受限环境下同样可以正常使用。渲染结果支持直接下载为 SVG 矢量图文件。
使用场景
撰写技术文档时预览流程图
在 Markdown 文档、README、技术方案中习惯用 Mermaid 语法描述流程图或架构图，编写时用本工具实时预览效果，确认无误后再粘贴进文档源文件。
会议前快速画时序图讲解交互流程
需要给团队讲解一个接口调用时序或系统间交互流程，用 sequenceDiagram 语法几分钟内画出图表，比手动拖拽绘图工具更快。
项目排期甘特图快速草拟
用 gantt 语法快速列出任务、起止时间和依赖关系，实时预览排期是否合理，再导出 SVG 用于汇报材料。
学习/调试 Mermaid 语法
不确定某段 Mermaid 语法写得对不对、渲染出来是什么效果，直接粘贴到左侧代码框实时查看渲染结果和报错信息，比在文档工具里反复保存预览更高效。
常见问题
支持哪些 Mermaid 图表类型？
内置示例覆盖流程图（flowchart）、时序图（sequenceDiagram）、甘特图（gantt）、类图（classDiagram）四种最常用类型；渲染引擎是完整的 mermaid 库，理论上支持该库能解析的所有标准语法，不仅限于这四种示例。
渲染是否依赖外部网络或 CDN？
不依赖。mermaid 渲染引擎已经完整打包进本工具的本地静态资源文件，整个渲染过程在浏览器本地完成，不会向任何外部 CDN 发起请求，网络环境受限时也能正常使用。
语法写错了会怎样？
右侧预览区下方会显示具体的错误提示信息（如缺少关键字、箭头语法错误等），帮助你定位是哪里写错了，修正后会在短暂延迟后自动重新渲染。
下载的 SVG 文件能用来做什么？
SVG 是矢量图格式，可以无损缩放，能直接插入 Word/PPT/网页，也可以用 Illustrator、Figma、Inkscape 等矢量编辑软件继续调整颜色、字体等细节。