Mermaid 在线编辑器 — 实时预览与导出

Mermaid 在线编辑器，图表实时预览

这款 Mermaid 在线编辑器让你用 Mermaid.js 语法以纯文本写图表，并在你输入的同时即时渲染出来。左右分栏布局一侧放代码、一侧放实时预览，从想法到成图全程都在同一个页面完成。

它专为开发者、技术文档作者，以及一切宁愿用代码描述图表、也不想手动拖框的人打造。可从九种图表类型中选择——流程图、时序图、类图、状态图、ER 图、甘特图、饼图、思维导图和 Git 图——再把成果导出为清晰的 SVG 或 PNG。

隐私优先设计：Mermaid 库完全在你的浏览器中运行。图表代码的渲染、保存和导出都在本地完成——任何内容都不会上传到服务器。

如何使用 Mermaid 编辑器

选择起点

编辑器打开时会有一个示例流程图。你可以直接在它的基础上修改，也可以打开模板菜单，从九种现成图表中挑一种作为起点。

编写代码

在左侧面板中输入 Mermaid 语法。行号会帮你跟踪结构，Tab / Shift+Tab 可随时增加或删除四个空格的缩进。

查看实时预览

你停止输入后，预览会自动重新渲染。如果语法有误，编辑器下方会出现清晰的错误提示，方便你及时修正。

导出或复制

把图表下载为 SVG 或 PNG，或者直接把 SVG 代码复制到剪贴板，粘贴到其他文档或工具中。

功能特色

实时预览

图表会随你输入自动重新渲染，借助 Mermaid.js 提供即时的视觉反馈。

9 种图表类型

用文本生成流程图、时序图、类图、状态图、ER 图、甘特图、饼图、思维导图和 Git 图。

内置模板

每种支持的图表都有一个可用示例，快速上手后再按需调整语法。

带行号的代码编辑器

行号加上 Tab、Shift+Tab 缩进，让多行图表代码整洁易读。

实时错误提示

语法问题会清晰地显示在编辑器下方，让你一眼看出需要修改什么。

导出 SVG 和 PNG

保存可缩放的 SVG 用于网页和文档，或导出以 2 倍比例渲染的高分辨率 PNG。

复制 SVG 到剪贴板

一键复制渲染好的 SVG 代码，直接粘贴到其他应用或代码库中。

25% 到 300% 缩放

用 +/− 按钮或 Ctrl + 鼠标滚轮缩放预览，并可随时重置为 100%。

可调节分栏

拖动分隔条重新分配编辑器与预览的比例，小屏幕上会自动改为上下堆叠。

自动保存

代码会自动保存到你的浏览器，下次回来时从你离开的地方原样恢复。

深色模式

切换主题时 Mermaid 图表主题也会跟着变，让图表始终与页面相配。

全程本地运行

所有渲染都在你的浏览器中完成——不上传、不登录，也不跟踪你的代码。

常见问题

Mermaid 图表是什么？

Mermaid 是一个开源的 JavaScript 库，能把基于文本的定义转换成图表。你不用手动画图形，只需写一段类似 Markdown 的简短结构描述，Mermaid 就会把它渲染成一张完整的可视化图表。

如何编写 Mermaid 语法？

最快的方式是打开模板菜单，加载你想要的图表类型的可用示例。看清楚节点、箭头和标签是怎么写的，然后修改代码、观察实时预览的变化。每种图表类型——流程图、时序图、类图等等——第一行都有各自简单的关键字。

这个编辑器支持哪些图表类型？

共九种：流程图、时序图、类图、状态图、ER（实体关系）图、甘特图、饼图、思维导图和 Git 图。每一种都有对应的内置模板可作起点。

如何把 Mermaid 图表导出为 PNG 或 SVG？

使用工具栏按钮。SVG 会下载一个可缩放的矢量文件，在任何尺寸下都保持清晰——非常适合文档和网页。PNG 会下载以 2 倍比例渲染的位图，在高分辨率屏幕上显示更清晰。你也可以用复制 SVG把代码粘贴到别处。

关闭标签页后我的代码会被保存吗？

会的。你的代码会自动保存到浏览器的本地存储中，下次回来时恢复。请注意，清除浏览器数据也会一并删除已保存的代码，因为它只存在于你的设备上。

为什么我的图表显示语法错误？

每种 Mermaid 图表类型都有自己的语法规则。常见的小失误有：漏掉箭头（-->）、开头关键字写错，或括号不匹配。看一看编辑器下方显示的错误提示——它会指出需要留意的那一行或那个标记。

可以在手机上使用这个编辑器吗？

可以。在窄屏上布局会改为上下排列，编辑器在上、预览在下，你可以拖动分隔条调整两者的高度。所有功能都照常可用。