什么是 Mermaid 图表编辑器？

Mermaid 图表编辑器是一个交互式工具，让您使用 Mermaid.js 语法编写图表代码，并即时查看渲染结果。无论您需要快速流程图、详细的时序图还是项目甘特图，都可以在浏览器中用简单的文本代码创建。

Mermaid 是一种流行的开源图表语言，可将类似 Markdown 的文本转换为专业图表。该编辑器提供分割面板界面，一侧是代码编辑器，另一侧是实时预览，您可以在输入时看到更改。

为什么选择 Mermaid？基于文本的图表可版本控制、易于更新，可直接嵌入文档中，无需外部图像文件。

支持的图表类型

流程图

流程、决策树和工作流

时序图

系统或参与者之间随时间的交互

类图

面向对象的类结构和关系

状态图

状态机和转换

ER 图

数据库的实体关系模型

甘特图

项目时间表和任务计划

饼图

数据分布和比例

思维导图

头脑风暴和想法组织

Git 图

分支和提交可视化

如何使用 Mermaid 图表编辑器

快速开始

加载示例图表

编辑器加载时会显示一个示例流程图。您可以立即开始编辑，或从模板下拉菜单中选择不同的图表类型。

编写代码

在左侧面板中编写 Mermaid 代码。图表预览会在您输入时自动更新，为您提供即时的视觉反馈。

修复错误

如果出现语法错误，编辑器下方会显示错误消息，帮助您快速识别和修复问题。

使用模板

点击工具栏中的模板按钮，从 9 个内置图表模板中选择。每个模板都提供一个可工作的示例，您可以根据需要修改。

专业提示：模板是学习 Mermaid 语法的最快方式。从与您目标相似的模板开始，然后逐步自定义。

编辑代码

智能缩进

用于高效代码格式化的键盘快捷键

按Tab插入缩进（4 个空格）
按Shift+Tab移除缩进

行号与自动保存

增强的编辑体验

行号帮助跟踪代码结构
您的代码会自动保存，返回时恢复

预览控制

使用缩放按钮（+/−）或Ctrl + 鼠标滚轮在 25% 到 300% 之间缩放
点击重置按钮返回 100% 缩放
拖动面板之间的调整手柄调整编辑器/预览分割

导出图表

SVG 导出

下载可缩放矢量文件，适合网络使用和文档。可缩放到任何大小而不失质量。

PNG 导出

下载高分辨率图像（2x 缩放），适合演示和在高 DPI 屏幕上共享。

复制 SVG

将 SVG 代码复制到剪贴板，用于粘贴到其他工具或嵌入网页。

功能特性

实时预览

在您输入时实时查看图表渲染。预览会自动更新，延迟很短，为您提供即时的视觉反馈，不会中断您的工作流。

9 种图表类型

使用 Mermaid.js 语法从文本代码创建流程图、时序图、类图、状态图、ER 图、甘特图、饼图、思维导图和 Git 图。

内置模板

使用为每种支持的图表类型准备的现成模板快速开始。每个模板都包含一个演示语法和结构的工作示例。

带行号的代码编辑器

编辑器具有行号、Tab/Shift+Tab 缩进和实时错误反馈。语法错误清晰地显示在编辑器下方，您可以立即修复问题。

灵活的导出选项

将完成的图表导出为SVG（可缩放矢量图形）或PNG（2x 缩放的高分辨率图像）。您也可以直接将 SVG 代码复制到剪贴板。

缩放和调整大小

使用按钮或 Ctrl + 鼠标滚轮将预览从 25% 缩放到 300%。拖动调整手柄调整编辑器和预览面板的大小以符合您的偏好。

自动保存

您的代码会自动保存到浏览器的本地存储。当您返回编辑器时，您的工作完全保持原样。

深色模式

编辑器完全支持深色模式。当您切换主题时，Mermaid 图表主题会自动更新以匹配，确保您的图表始终看起来正确。

您的数据保持私密

所有渲染都在您的浏览器中进行

无上传——您的代码永远不会离开您的设备
无跟踪——我们不收集使用数据

常见问题

什么是 Mermaid.js？

Mermaid.js 是一个开源 JavaScript 库，可从基于文本的定义生成图表和图形。您无需手动绘制图表，只需编写简单的代码来描述结构，Mermaid 就会将其渲染为可视化图表。

这种方法使图表可版本控制、易于更新，非常适合嵌入文档、Wiki 和 Markdown 文件中。

我可以创建哪些图表类型？

该编辑器支持 9 种图表类型：

流程图
时序图
类图
状态图
ER（实体关系）图
甘特图
饼图
思维导图
Git 图

我如何学习 Mermaid 语法？

最简单的方法是从下拉菜单中选择模板。每个模板都提供一个可工作的示例，您可以研究和修改。

Mermaid.js 文档还为每种图表类型提供了全面的语法参考。从简单的示例开始，随着您对语法的熟悉，逐步增加复杂性。

SVG 和 PNG 导出有什么区别？

SVG

矢量格式

可缩放到任何大小而不失质量
适合文档和网站
可在矢量图形软件中编辑
简单图表的文件大小较小

PNG

光栅图像

以 2x 分辨率导出，显示清晰
适合演示和共享
在高 DPI 屏幕上效果好
通用兼容性

我的代码会被保存吗？

是的，您的代码会自动保存到浏览器的本地存储。当您重新访问编辑器时，您的最后一个代码会被恢复。

重要提示：清除浏览器数据也会清除保存的代码。对于重要的图表，请将其导出为 SVG 或 PNG 文件进行备份。

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

Mermaid 对每种图表类型都有特定的语法规则。常见问题包括：

缺少箭头（例如-->或--->）
不正确的关键字或图表类型声明
括号或引号不匹配
无效的节点 ID 或特殊字符
某些图表类型中的缩进不当

检查编辑器下方的错误消息以了解出错的详细信息。该消息通常会指示行号和错误类型。

我可以在移动设备上使用吗？

可以。在较小的屏幕上，布局会切换为垂直排列，编辑器在上方，预览在下方。所有功能都保持可用，包括模板、导出选项和缩放控制。