什么是 Mermaid 实时编辑器？

它是一款浏览器内工具，可实时将 Mermaid 代码转为已渲染的图表，让你在源代码旁预览流程图、时序图等，并将它们导出为 SVG。

Mermaid 实时编辑器支持哪些图表类型？

它渲染标准 Mermaid 语法，包括流程图、时序图、甘特图、类图和状态图，与 GitHub 和许多文档工具使用的语法相同。

如何将 Mermaid 图表导出为图像？

一旦图表渲染完成，点击下载即可将其保存为 SVG 文件，可放入文档或在任何矢量编辑器中打开。

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

渲染器会校验 Mermaid 代码并内联显示解析器消息；大多数错误来自缺失图表类型声明或括号与箭头不平衡。

渲染后的图表会匹配我的暗色模式吗？

会。Mermaid 实时编辑器会检测你是在明色还是暗色模式下查看，并自动应用匹配的 Mermaid 主题。

我的 Mermaid 图表代码会保持私密吗？

会。你的 Mermaid 源代码在你的浏览器中本地渲染，绝不会离开你的设备，因此不会上传到任何服务器。

Mermaid 图表渲染器

在浏览器中将 Mermaid 图表（流程图、时序图、甘特图）渲染为 SVG。

你的 Mermaid 代码在浏览器中本地渲染，不会上传到任何服务器。

需要缩小导出的图表？试试 SVG 优化工具。

关于 Mermaid 图表渲染器

这款 Mermaid 实时编辑器会在你输入时将纯 Mermaid 代码转为已渲染的图表，粘贴的那一刻就开始渲染。放入流程图、时序图、甘特图、类图或状态图，即可看到 SVG 在你的源代码旁即时出现。它专为在文档、README 文件或设计笔记中保存图表，并想要快捷预览和导出方式的开发者、技术文档撰写者和架构师打造。Mermaid 图表渲染器会自动检测明暗主题以匹配你的视图、内联报告语法错误以便你快速修复，并让你将结果下载为整洁的 SVG。由于一切都在你的浏览器本地处理，你的图表源代码不会离开你的设备，也不会上传到任何服务器。

功能特性

随输入将 Mermaid 代码实时渲染为 SVG
支持流程图、时序图、甘特图、类图、状态图等更多图表类型
内联语法错误消息精准定位代码中的问题
自动检测明暗主题以匹配你当前的视图
将渲染后的图表下载为整洁的 SVG 文件
严格安全模式在渲染期间净化图表内容
完全在你的浏览器中运行，因此不会上传到任何服务器

如何使用 Mermaid 图表渲染器

将你的 Mermaid 代码粘贴或输入到输入框。
在输出面板中观看图表自动渲染。
如果出现内联语法错误消息，请修复它们。
切换你的浏览器或应用主题以预览明暗样式。
点击下载将结果保存为 diagram.svg。

示例

输入

graph TD
  A[开始] --> B{可行吗?}
  B -->|是| C[上线]
  B -->|否| D[修复]
  D --> B

输出

一个渲染后的 SVG 流程图：一个“开始”框流向一个“可行吗?”决策菱形，“是”分支指向“上线”，“否”分支指向“修复”，“修复”再回环到该决策。

一个简单的流程图渲染为可下载的 SVG。

常见错误与故障排除

显示解析错误或 “Syntax error in text”，而非图表。 — 检查第一行是否声明了有效的图表类型（例如 graph TD、sequenceDiagram、gantt），并确保箭头和括号平衡。
带圆括号或引号等特殊字符的节点标签破坏了渲染。 — 将标签文本用双引号包裹，例如 A["我的 (标签)"]，让 Mermaid 按字面处理这些字符。
图表能渲染但颜色与你的背景不搭。 — 渲染器会自动跟随你的明暗主题；切换你的应用主题以获得匹配的样式。
缩进或制表符导致流程图布局异常。 — 使用一致的空格缩进，并将每个节点或链接各放一行。

常见问题

什么是 Mermaid 实时编辑器？: 它是一款浏览器内工具，可实时将 Mermaid 代码转为已渲染的图表，让你在源代码旁预览流程图、时序图等，并将它们导出为 SVG。
Mermaid 实时编辑器支持哪些图表类型？: 它渲染标准 Mermaid 语法，包括流程图、时序图、甘特图、类图和状态图，与 GitHub 和许多文档工具使用的语法相同。
如何将 Mermaid 图表导出为图像？: 一旦图表渲染完成，点击下载即可将其保存为 SVG 文件，可放入文档或在任何矢量编辑器中打开。
为什么我的 Mermaid 图表显示语法错误？: 渲染器会校验 Mermaid 代码并内联显示解析器消息；大多数错误来自缺失图表类型声明或括号与箭头不平衡。
渲染后的图表会匹配我的暗色模式吗？: 会。Mermaid 实时编辑器会检测你是在明色还是暗色模式下查看，并自动应用匹配的 Mermaid 主题。
我的 Mermaid 图表代码会保持私密吗？: 会。你的 Mermaid 源代码在你的浏览器中本地渲染，绝不会离开你的设备，因此不会上传到任何服务器。