流程图
用节点、箭头和圆角框、菱形等 Mermaid 形状描绘流程与决策。
Mermaid 在线查看器
在左侧粘贴 Mermaid 代码，右侧立即渲染出图表。支持一键分析并修复 Mermaid 语法错误、优化代码，并将结果导出为 PNG、SVG 或 PDF——完全免费、数据不出浏览器、无需注册。
- 完全免费
- 无需注册
- 全部在浏览器内运行
- 支持 12+ 种图表
实时 Mermaid 编辑器与图表查看器
这款 Mermaid 图表查看器会在你停止输入时自动刷新预览，画一张简单的 Mermaid 图和写几行文字一样容易。当代码出错时，内置的 Mermaid 修复器会定位问题并自动修复最常见的语法错误——每一处修改都附有通俗的解释，中文全角标点、隐形字符等常见坑也能一键搞定。
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
支持的 Mermaid 图表类型
从流程图到时间线，所有 Mermaid 图表类型开箱即用，无需安装任何软件即可在线画图。下方每张预览都由查看器内置的同一渲染引擎实时生成，点击任意模板即可载入编辑器继续修改。
时序图
展示参与者之间随时间往来的消息，支持循环、分支与激活期。
ER 图
以鸦脚符号描述数据库实体、属性与关系。
类图
描述类、接口、成员与继承关系，用于软件设计。
状态图
追踪系统的各个状态以及状态之间的迁移。
甘特图
用任务、里程碑、依赖和日期规划项目排期。
饼图
把几行数据变成直观的占比饼图。
用户旅程图
按任务与满意度评分描绘完整的用户旅程。
时间线
在垂直时间线上记录事件，适合历史脉络与路线图。
思维导图
纯文本缩进即可生成分支思维导图，输入文字、输出层级。
Git 图
可视化 Git 仓库的分支、提交与合并。
四象限图
按两个轴把事项划入四个象限，例如优先级与工作量。
Mermaid 语法速查
Mermaid 语法就是纯文本：一行一条语句，用箭头连接节点。下表列出了最常用的 Mermaid 形状——点击任意示例即可载入查看器继续编辑。
| 语法 | 绘制效果 |
|---|---|
A[标签] | 矩形（流程） |
A(标签) | 圆角框 |
A{标签} | 菱形（判断） |
A([标签]) | 体育场形 |
A[(标签)] | 圆柱（数据库） |
A((标签)) | 圆形 |
A-->B | 箭头（连线） |
A-->|文字|B | 带标签的箭头 |
A---B | 无箭头连线 |
subgraph 标题 … end | 节点分组 |
迷你模板
在线把 Mermaid 图表转换为图片
想知道如何在线把 Mermaid 图表转换成图片？只需三步：粘贴代码、等待预览渲染、点击工具栏中的 PNG、SVG 或 PDF。全部转换都在你的浏览器中完成，不上传任何文件。
Mermaid 转 PNG
最高 4 倍分辨率导出，幻灯片、文档、聊天里都清晰锐利。需要位图时选它。
Mermaid 转 SVG
真正的矢量文件：无限缩放不失真，可在 Figma、Illustrator 中继续编辑，适合印刷与高分屏。
Mermaid 转 PDF
一键生成与图表等大的 PDF 页面，适合报告、工单与归档。
常见问题
什么是 Mermaid 在线查看器？
Mermaid 查看器会把用 Mermaid 语法写成的图表代码渲染成真正的图表。本站集查看、绘制、修复、导出于一页：边输入边在线渲染，自动发现语法问题并修复，还能把结果导出为 PNG、SVG 或 PDF。
如何修复无效的 Mermaid 语法？
粘贴代码后点击「修复」按钮。Mermaid 修复器会自动处理：智能引号与隐形 Unicode 字符、中文全角标点（如全角括号、分号）、括号不配对、把 end 等保留字用作节点名、subgraph 或循环缺少 end、误粘贴的 Markdown 代码围栏等常见错误，每一处修改都会在诊断列表中说明原因。
如何把 Mermaid 转换为 PNG、SVG 或 PDF？
在上方查看器中渲染图表，然后点击预览工具栏中的 PNG、SVG 或 PDF。PNG 下载高分辨率位图，SVG 下载矢量文件，PDF 生成可打印文档。免费、不限次数、全程在浏览器端完成。
PlantUML 和 Mermaid 该选哪个？
Mermaid 直接在浏览器中渲染，GitHub、GitLab 和大多数 Markdown 平台都原生支持，做文档首选它；PlantUML 覆盖的 UML 2 规范更全，但需要 Java 或服务端才能渲染。如果图表主要放在文档和网页里，Mermaid 通常更省事——你可以先在这里试试语法效果。
「Mermaid」这个名字有什么含义？
这个图表工具以神话中的美人鱼（mermaid）命名——寓意纯文本也能像美人鱼的歌声一样，把一幅漂亮的图「唱」出来。在图表领域，Mermaid 代表「代码即绘图」：你用文字描述节点和箭头，库负责把图画出来。
Mermaid 图表有哪些不同类型？
最常用的有流程图、时序图、ER 图、类图、状态图、甘特图、饼图、用户旅程图、时间线和思维导图，完整画廊见上方。每种类型都以一行关键字开头（如 flowchart TD 或 sequenceDiagram），随后一行一条语句。
我的图表代码会被上传到服务器吗？
不会。渲染、修复、优化和导出全部在你的浏览器本地完成，不向任何服务器发送或存储数据——页面加载后即使断网也能继续使用。