Mermaid 线上编辑器
编写 Mermaid 语法、即时预览图表、切换主题，并将结果导出为 SVG 或 PNG。
Mermaid 线上编辑器
编写 Mermaid 语法、即时预览图表、切换主题，并将结果导出为 SVG 或 PNG。
关于 Mermaid 编辑器
在浏览器内渲染 Mermaid 语法
编辑器会在 client 端加载 Mermaid 库，短暂 debounce 后检查图表语法，并用您选择的主题渲染 SVG 预览。内置模板可快速开始 flowchart、sequence、class、state、ER、Gantt、pie、mindmap 与 timeline 示例。
为 GitHub、README 与 Wiki 准备流程图
将编辑器当成贴回 GitHub README、GitLab Wiki、Notion 或技术文档前的检查区。先预览流程图、时序图与架构草图，确认标签、连线与方向后再把 Mermaid 源码贴回 Markdown；若目标平台不支持 Mermaid，也可导出 SVG 或 PNG。
从预览导出 SVG 或 PNG
下载时会用当前的 Mermaid 代码与主题重新渲染 SVG。PNG 导出会再通过浏览器 canvas 将 SVG 转成位图，而编辑器的缩放控制只影响画面预览。图表源码可存进 URL hash 作为可分享的本地状态，因此分享 URL 时等同分享原始图表内容。
常见问题
关于这个主题的常见疑问与实用解答。
什么是 Mermaid？
Mermaid 是一种文本型图表语言，可通过类似 Markdown 的语法渲染流程图、时序图、类图等。广泛用于 GitHub、GitLab 与技术文档。
支持哪些图表类型？
流程图、时序图、类图、状态图、实体关系图、甘特图、饼图等。编辑器支持 Mermaid 库中所有可用的图表类型。
可以导出图表吗？
可以，您可以将渲染完成的图表下载为 SVG 或 PNG，用于演示、文档或其他项目。
我的数据会被发送到服务器吗？
不会，Mermaid 图表渲染完全在您的浏览器中执行。您的图表代码通过 JavaScript 在本地解析与渲染，不会发送至任何服务器。
如何编写 Mermaid 语法？
先声明图表类型（如 flowchart TD、sequenceDiagram、classDiagram），再用 Mermaid 文本语法定义节点、连线和标签。可使用内置模板探索不同图表类型。
可以在 GitHub 或 Markdown 中使用 Mermaid 吗？
可以。GitHub README、issue、pull request、GitLab Wiki、Notion 与许多 Markdown 渲染器都支持 Mermaid 围栏代码块。把图表代码包在 ```mermaid 区块中即可渲染；你也可以先在这里预览，确认无误后再贴回文档。