Mermaid图形预览
在线Mermaid图形预览工具，支持实时渲染流程图(Flowchart)、时序图(Sequence)、甘特图(Gantt)、类图(Class)、状态图(State)、ER图等。输入Mermaid语法代码即可即时预览SVG图形，支持多种主题切换与错误提示，适用于技术文档编写、架构设计演示与流程梳理。
Mermaid代码编辑与实时预览
输入Mermaid代码后点击「渲染预览」查看图形
功能特性
实时渲染
输入Mermaid语法代码即可即时渲染为SVG矢量图形，所见即所得，修改代码后一键刷新预览结果。
多图型支持
支持流程图、时序图、甘特图、类图、状态图、ER图、用户旅程图等多种Mermaid图形语法。
主题切换
内置default、forest、dark、neutral四种渲染主题，适配不同文档风格与明暗展示场景。
示例代码
内置流程图示例代码，一键加载即可体验渲染效果，快速上手Mermaid语法编写。
错误提示
语法错误时清晰提示错误信息与行号，帮助快速定位并修正Mermaid代码问题。
本地渲染
图形渲染完全在浏览器本地完成，代码不上传服务器，保护技术文档与架构设计隐私。
使用说明
基础用法
- 在左侧代码输入框中编写Mermaid语法代码，开头需声明图形类型，如
flowchart TD。 - 点击「渲染预览」按钮，右侧预览区将即时显示渲染后的SVG矢量图形。
- 如需查看示例，点击「加载示例」按钮可一键填入流程图示例代码并自动渲染。
- 点击「清空」按钮可清空代码输入框与预览区，重新开始编写。
主题切换
- 在「渲染主题」区域选择不同的Mermaid渲染主题：
default（默认浅色）、forest（绿色森林）、dark（深色）、neutral（中性灰）。 - 切换主题后会自动重新渲染当前代码，方便对比不同主题下的展示效果。
- 页面右上角的主题开关控制的是整站明暗主题（影响输入框、按钮等界面元素），与Mermaid图形渲染主题相互独立。
支持的图形类型
- 流程图（Flowchart）：使用
flowchart TD或graph LR声明，用于绘制流程、决策分支。 - 时序图（Sequence）：使用
sequenceDiagram声明，用于绘制对象间消息交互。 - 甘特图（Gantt）：使用
gantt声明，用于绘制项目进度与任务排期。 - 类图（Class）：使用
classDiagram声明，用于绘制面向对象的类结构关系。 - 状态图（State）：使用
stateDiagram-v2声明，用于绘制状态机转换。 - ER图（Entity Relationship）：使用
erDiagram声明，用于绘制数据库实体关系。
典型使用场景
- 技术文档编写：在Markdown文档中嵌入Mermaid图形，预览效果后复制到文档系统。
- 架构设计演示：快速绘制系统架构图、服务调用时序图，辅助方案评审与沟通。
- 业务流程梳理：用流程图梳理业务流转与判断分支，可视化复杂逻辑。
- 项目排期规划：用甘特图编排任务时间线，明确里程碑与依赖关系。
- 语法学习调试：实时验证Mermaid语法正确性，快速排查渲染错误。
常见问题
Mermaid是什么？支持哪些图形类型？
Mermaid是一个基于JavaScript的图表生成库，通过类Markdown的文本语法描述图表，并在浏览器中渲染为SVG矢量图形。支持流程图（Flowchart）、时序图（Sequence Diagram）、甘特图（Gantt）、类图（Class Diagram）、状态图（State Diagram）、ER图（Entity Relationship Diagram）、用户旅程图（User Journey）、饼图（Pie Chart）等多种图形类型，广泛用于技术文档与架构设计。
渲染主题default、forest、dark、neutral有什么区别？
default是默认浅色主题，配色清新明亮；forest以绿色为主色调，适合自然生态相关主题；dark为深色背景主题，适合暗色文档或夜间展示；neutral为中性灰色调，风格简约低调。可根据文档风格与展示场景选择合适的主题，切换后会自动重新渲染。
图形渲染失败提示语法错误怎么办？
渲染失败时会在错误提示区显示具体的错误信息。常见原因包括：图形类型声明关键字拼写错误（如
flowchart写成flowchrt）、节点ID重复、箭头语法不正确、特殊字符未转义等。建议根据错误信息定位行号，对照Mermaid官方语法文档修正代码后重新渲染。
渲染出的SVG图形可以下载或复制吗？
本工具主要提供实时预览功能，渲染结果为SVG矢量图形，可直接在预览区查看。如需保存，可右键预览区选择「检查」获取SVG源码，或使用浏览器截图功能保存为图片。生成的SVG可无损缩放，适合嵌入技术文档与演示文稿。
本工具是免费的吗？代码会上传到服务器吗？
完全免费，无需注册登录。Mermaid图形渲染完全在浏览器本地通过mermaid.js完成，您输入的代码不会上传到服务器，保护技术文档与架构设计的隐私安全。可放心粘贴内部业务流程图与系统架构代码进行预览。
页面主题开关和渲染主题有什么区别？
页面右上角的主题开关控制的是整站明暗主题，影响输入框、按钮、预览区背景等界面元素的配色；而「渲染主题」选择器控制的是Mermaid图形本身的渲染配色（default/forest/dark/neutral），仅影响生成的SVG图形外观。两者相互独立，可自由组合搭配。