Mermaid 实时编辑器：将图表渲染为 SVG

随输入即时将流程图、时序图和甘特图渲染为 SVG 的 Mermaid 实时编辑器。

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

由 Udit Agarwal 开发和维护

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

关于 Mermaid 图表渲染器

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

功能特性

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

如何使用 Mermaid 图表渲染器

1. 将你的 Mermaid 代码粘贴或输入到输入框。
2. 在输出面板中观看图表自动渲染。
3. 如果出现内联语法错误消息，请修复它们。
4. 切换你的浏览器或应用主题以预览明暗样式。
5. 点击下载将结果保存为 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 源代码在你的浏览器中本地渲染，绝不会离开你的设备，因此不会上传到任何服务器。

相关工具

• JSON 格式化工具 — 美化、压缩并验证 JSON，并定位错误位置。
• YAML ↔ JSON — 在 YAML 与 JSON 之间相互转换。
• Markdown 预览 — 将 Markdown 渲染为 HTML 并实时预览。
• MDX 转换工具 — 将 MDX 渲染为文本、将 HTML → MDX，并将文本转义为 MDX 字面量。
• SVG 优化工具 — 压缩 SVG：移除注释、元数据和编辑器残留，并合并空白。
• XML 格式化工具 — 美化、压缩和验证 XML，并在 XML ↔ JSON 之间转换。
• GraphQL 格式化工具 — 格式化或压缩 GraphQL 查询和模式，验证语法并提取操作。
• JSON 转代码 — 从 JSON 生成 Go、Rust、Python、Java、Kotlin、C# 和 TypeScript 类型。

更多代码格式化工具

• SVG 优化工具 — 压缩 SVG：移除注释、元数据和编辑器残留，并合并空白。
• MongoDB 查询美化工具 — 在浏览器中美化并缩进 MongoDB 查询和 find() 语句。
• MongoDB 聚合美化工具 — 在浏览器中美化并缩进 MongoDB 聚合管道。
• MongoDB 浏览器 — 浏览 MongoDB 文档或集合样本，并推断其字段架构和类型。
• OpenAPI / Swagger 格式化工具 — 格式化并验证 OpenAPI / Swagger 规范（JSON 或 YAML），并统计路径与操作数量。
• CSS 单位转换器 — 在 px、rem、em、pt 和 % 之间实时转换 CSS 长度单位。
• Glob 转 Regex — 将 glob 模式转换为 JavaScript 正则表达式并测试路径。
• HTML 转 Markdown — 将 HTML 转换为整洁的 Markdown，支持 GFM 表格。
• TOML 格式化 — 格式化 TOML 并在它与 JSON 之间互相转换。
• logfmt 转 JSON — 把 logfmt key=value 日志转为 JSON 并可反向转换。
• dotenv 转 JSON 转换器 — 在浏览器中把 .env 文件转成 JSON 对象并可转回 .env。
• CSV 转 Markdown 表格转换器 — 在浏览器中把 CSV 或 TSV 转成 GitHub 风格的 Markdown 表格。

查看全部代码格式化工具 (32) · 全部工具