Mermaid 图表

在线 Mermaid 图表编辑器,输入语法即时预览流程图、时序图、类图、ER 图、甘特图等,支持导出 SVG/PNG,纯浏览器本地运行。

工作区

本地渲染 Mermaid 图表。

可以用来做什么?

绘制流程图

用文字描述流程,实时渲染为专业流程图并导出

可视化系统架构

开发者用 Mermaid 语法绘制系统架构图,替代画图软件

制作甘特图

项目经理用甘特图语法快速生成项目进度可视化图表

为文档添加图表

在技术文档或 README 中插入 Mermaid 图,增强可读性

分享可视化设计图

将 Mermaid 图表导出为图片,发给设计师或非技术人员

绘制数据库 ER 图

用 Mermaid 语法定义实体关系,快速生成数据库结构图

为什么选这个工具?

10+ 图表类型

流程图、时序图、类图、ER 图、甘特图、饼图等,输入即渲染,无需安装任何工具

实时预览

左侧输入 Mermaid 语法,右侧 400ms 内实时渲染,语法错误有友好提示

导出 SVG / PNG

SVG 矢量无损,PNG 支持高清(2x)导出,文件名遵循 metool_mermaid 规范

代码不离开浏览器

渲染由 Mermaid.js 在本地完成,架构图、系统图等敏感内容全程留在设备内

如何使用?

1

输入 Mermaid 语法

在编辑区输入 Mermaid 图表语法,支持流程图/甘特图等

2

实时预览图表

右侧即时渲染图表,确认结构和节点连接无误

3

导出图表图片

将图表导出为 PNG/SVG,用于文档、演示或分享

常见问题

Mermaid 支持哪些图表类型?
本工具基于 Mermaid.js,支持流程图(flowchart/graph)、时序图(sequenceDiagram)、类图(classDiagram)、ER 图(erDiagram)、甘特图(gantt)、饼图(pie)、状态图(stateDiagram)、用户旅程图(journey)、Git 图(gitGraph)等 10+ 种图表类型。
导出的 SVG / PNG 质量如何?
SVG 是矢量格式,无限放大不失真,适合放入 PPT、文档、网页。PNG 导出时可使用设备像素比(通常 2×)渲染,高清屏幕下字体和线条依然清晰。
我的图表代码会上传到服务器吗?
不会。渲染完全在浏览器本地完成。你输入的任何代码、生成的图表都不会发送到服务器,适合绘制包含敏感架构信息的内部系统图。
如何在 Markdown 文档中嵌入 Mermaid?
GitHub、GitLab、Notion、Obsidian、Typora 等平台都支持 Mermaid 代码块。写法是用三个反引号包裹并标注语言为 mermaid。你可以在本工具调试好代码后直接复制粘贴到文档里。
出现语法错误怎么办?
预览区会显示错误提示。常见错误:① 第一行没有声明图表类型(如 flowchart TD / sequenceDiagram)② 节点或连线用了特殊字符但没有用引号包裹 ③ 箭头语法写错。可参考示例语法修正。

2026 年为什么 Mermaid 成为技术团队的默认图表语言?

在 2026 年,越来越多的技术团队把图表从 Visio、Draw.io 迁移到 Mermaid — 原因很简单:Mermaid 是代码,图表也是代码。就像 Markdown 让文档可以进 Git,Mermaid 让流程图、架构图、时序图也可以进 Git — diff 可读、Review 可查、历史可回溯。

GitHub 在 2022 年原生支持 Mermaid 渲染后,这个趋势彻底加速。现在 GitHub README、Issues、Discussions、Wiki 里的 Mermaid 代码块都会被自动渲染成图表。GitLab、Notion、Obsidian、Typora 也相继跟进。Markdown + Mermaid 的组合,正在成为技术文档的新标配。

无极工具 的 Mermaid 在线渲染器,是为“快速调试一段 Mermaid 代码”设计的。不需要安装 Node、不需要 Mermaid CLI,打开浏览器就能写、就能看渲染结果,写完复制代码贴回文档即可。

Mermaid 10 种图表类型速查

流程图(flowchart / graph)

最常用的图表类型。用 flowchart TD(从上到下)或 flowchart LR(从左到右)声明。节点用 [](矩形)、{}(菱形/判断)、(())(圆形/开始结束)等形状,连线用 -->(箭头)、---(无箭头)。

时序图(sequenceDiagram)

描述多个参与者之间的消息交互顺序,适合 API 调用链、微服务交互、用户登录流程。->>+ 表示激活,-->>- 表示返回并停用。

类图(classDiagram)

UML 类图,描述类的属性、方法、继承、组合关系。<|-- 表示继承,*-- 表示组合,o-- 表示聚合。

ER 图(erDiagram)

数据库 ER 图,描述表结构和表间关系。支持 PK / FK 标注,关系用 ||--o{(一对多)等符号。

甘特图(gantt)

项目管理时间线,自动计算任务起止、并行关系。支持 after 关键词设置前置依赖。

饼图(pie)

最简单的图表类型,适合展示比例分布。用 pie title 标题 声明,每行 "标签" : 数值。

状态图(stateDiagram)

有限状态机图,描述对象的状态转换。支持嵌套状态和并发状态。

用户旅程图(journey)

描述用户在产品中的体验旅程,每个步骤可以打分(1-5 分)并标注参与的角色。

Git 图(gitGraph)

展示分支、提交、合并关系,适合解释 Git 工作流与发布分支策略。

思维导图(mindmap)

用缩进层级快速生成思维导图,适合会议纪要与知识梳理。

把 Mermaid 融入你的 Markdown 工作流

推荐路径:在 无极工具 中调试图表语法 → 复制代码块 → 粘贴到 README / Notion / Obsidian。图表与文档同源,协作与版本管理成本更低。

若你还需要把 Markdown 一稿多发到公众号、小红书或 PDF,可继续使用 无极工具 的 Markdown 分类工具完成后续分发。

相关工具

Markdown 编辑器、LaTeX 公式、HTML 转 MD、MD 格式校验、MD 分享链接、MD 多格式导出