什么是 Mermaid？
Mermaid 是一个基于 JavaScript 的图表绘制工具，允许用户通过简单的文本语法（Markdown 风格）生成复杂的图表。相比于传统的拖拽式绘图软件（如 Visio、Draw.io），Mermaid 最大的优势在于「代码即图表」：你可以像写代码一样写流程图，图表的版本控制、修改和维护因此变得异常简单。本编辑器即基于官方 Mermaid 引擎在浏览器中运行，打开网页即可使用，无需安装任何软件。
支持的图表类型
本编辑器完整继承 Mermaid 引擎能力，「模板」下拉框内置以下 18 种图表类型，选择即可载入可运行的示例代码：
流程图 Flowchart
描述系统流程、算法逻辑或业务审批步骤，支持判断分支、子流程、多种连线样式与节点形状。
时序图 Sequence
展示参与者之间按时间顺序发生的消息交互，常用于接口设计、协议说明与系统时序分析。
类图 Class
面向对象设计中的类结构与关系表达，支持属性、方法以及继承、组合、关联等关系标注。
状态图 State
描述对象或订单等实体在其生命周期内的状态流转，以及触发状态迁移的事件与条件。
ER 实体关系图
数据库建模利器，表达实体、属性与一对一、一对多、多对多关系，可直接对照设计表结构。
用户旅程图 Journey
按阶段描绘用户在各接触点的体验与情绪评分，适合用户体验设计与客户旅程分析。
甘特图 Gantt
项目排期利器，可视化任务阶段、起止时间、依赖关系与完成进度，自动按日期排布时间轴。
饼图 Pie
用一行一个数据项的极简语法展示各分类占比，适合资源构成、市场份额等比例数据。
四象限图 Quadrant
在双轴网格上按两个维度摆放事项，做优先级排序与战略评估，如可行性 × 收益分析。
Git 图 GitGraph
直观呈现分支策略、提交历史、合并与标签，适合讲解版本控制工作流与发布流程。
时间线 Timeline
沿时间轴罗列里程碑事件，按时期分组展示公司沿革、产品路线图与项目历史。
思维导图 Mindmap
从中心主题向外层级发散，整理需求拆解、知识结构与会议议题，缩进即代表层级关系。
看板 Kanban
按工作流阶段分列组织任务卡片，适合敏捷项目管理、任务追踪与团队协作看板。
桑基图 Sankey
用宽度与流量成正比的流线展示节点间的能量、资金或流量分配（当前引擎版本标签仅支持英文与数字）。
XY 图表 XY Chart
用柱状图与折线图组合展示数值随类别的变化趋势，自带坐标轴配置，适合运营报表。
块状图 Block
用行列网格排列组件块并连接箭头，快速搭建系统架构与模块组成的结构化概览。
架构图 Architecture
使用云服务图标绘制云上系统架构与服务依赖（图标来自 Iconify 在线图标库，需联网渲染）。
数据包图 Packet
可视化网络协议数据包的字段布局与位区间，是编写网络协议文档的专用图型。
广泛的平台集成
Mermaid 语法已被 GitHub、GitLab、Gitea、Notion、Obsidian、语雀、飞书文档等主流平台原生支持。在本工具中调试好的图表代码，可以直接粘贴到这些平台的 Markdown 文档或代码仓库的 README 中自动渲染为图表，无需上传任何图片文件。配合 SVG / PNG 导出，还可以将图表放入 PPT、论文、工单和即时通讯消息中。掌握 Mermaid，已成为现代开发者和技术写作者常用的效率技能。
常见问题
Mermaid 是什么？适合画哪些图？
Mermaid 是一种「用文字画图」的图表描述语言及对应的 JavaScript 渲染引擎：你只需要按规则写出节点和连线文本，引擎就会自动生成排版整齐的图表。它最常用于技术文档中的流程图、时序图、类图、状态图、甘特图，也支持饼图、思维导图、ER 图等类型。凡是能被表达为「节点 + 关系」的结构化内容，都适合用 Mermaid 绘制。
写好的代码怎么用到 GitHub、Notion、Obsidian 里？
在 GitHub/GitLab 的 Markdown 文件（如 README.md）中，插入一个标注为 mermaid 的代码块，把本工具中的源码粘贴进去即可自动渲染；Notion 中输入 /code 创建代码块后把语言选择为 Mermaid；Obsidian 原生支持 Mermaid 代码块；语雀、飞书文档等平台也提供了同名图表块。需要放进 PPT、Word 或聊天窗口时，直接使用本页的「下载 PNG」或「下载 SVG」按钮即可。
代码写错了会怎样？会影响之前的图吗？
不会。当代码存在语法错误时，预览区会继续保留上一次成功渲染的图表，同时在预览区下方显示引擎返回的错误信息，通常包含出错的行号与原因（如节点名拼写错误、缺少箭头、括号未闭合等）。修正代码后图表会自动恢复实时渲染。
Mermaid 图表支持中文吗？
支持。本页面以 UTF-8 编码运行，节点文本、标签、甘特图任务名、思维导图节点等所有位置均可直接使用中文和中英文混排，无需任何转义或额外配置。导出的 SVG 与 PNG 图片同样完整保留中文内容。
下载的 PNG 图片模糊怎么办？
本工具导出 PNG/JPG 时按 2 倍分辨率绘制，常规屏幕与打印均清晰。若图表尺寸很大但在文档中被缩小显示，建议优先下载 SVG 矢量图——矢量格式任意放大都不会模糊，PPT、Word、浏览器和大多数设计软件均可直接插入 SVG。
支持导出 PDF 和 JPG 吗？四种格式有什么区别？
支持。点击右上角「下载文件」可从中选择四种格式：SVG 矢量图任意缩放不失真，适合论文、PPT 与印刷；PNG 无损位图（2 倍分辨率）适合粘贴到文档与聊天窗口；JPG 同为 2 倍分辨率位图但体积更小，适合传输与占位要求低的场景；PDF 为单页文档，页面尺寸与图表一致，便于打印归档。JPG/PNG/PDF 均自动填充与当前主题一致的底色（日间白色、夜间深色）。
经典 / 暗黑 / 手绘三种风格有什么区别？
经典（Classic）是 Mermaid 的传统直角外观；暗黑（Dark）强制使用暗色主题配色，适合深色背景文档与夜间使用；手绘（Hand-drawn）用草图笔触绘制节点边框，像白板手绘，适合头脑风暴与内部分享。风格选择会自动保存在本机，刷新后依然生效。饼图、甘特图、桑基图等以数据呈现为主的图表不响应风格切换，属于正常现象。
架构图（Architecture）渲染失败怎么办？
架构图的节点图标来自 Iconify 在线图标库，首次渲染时需要联网加载图标资源；离线或网络受限环境会提示错误。此时可改用流程图或块状图绘制架构示意，两者均完全离线可用。其余 17 种图表全部离线渲染，不受影响。
导出的 SVG/PNG 图片背景是透明的吗？
SVG 默认使用透明背景，方便叠加到任意底色的幻灯片或设计稿上；PNG 为保证在各类文档中的可读性，会自动填充与当前预览主题一致的背景色（日间模式白色、夜间模式深色），将图片粘贴到深色背景文档时可先切换到夜间模式再导出。
我输入的图表代码会被上传保存吗？
不会。渲染引擎（Mermaid 库）已在本地内置，图表的解析与绘制全部在你的浏览器中完成，编辑过程中不向服务器发送图表内容。草稿仅保存在你本机浏览器的 localStorage 中（用于刷新后恢复），清除浏览器数据即会删除，可放心绘制涉及未发布产品与内部系统的图表。