DevToy

Mermaid 图表编辑器

在本地编写文本、验证语法,并将图表导出为 SVG 或 PNG。

正在加载渲染器

Mermaid 代码编辑器

实时图表预览

No diagram to render.

什么是 Mermaid?

Mermaid 可以把文本定义转换为图表。由于源文件是文本,团队可以在 Pull Request 中评审、通过 Git 跟踪改动,并让图表与技术文档保持同步。

编辑器支持流程图、时序图、类图、ER 图和甘特图,全部在浏览器本地渲染。可以从模板开始修改,然后导出 SVG 或 PNG。

如何选择图表类型

  • 流程图适合描述决策和业务流程。
  • 时序图适合展示系统之间随时间发生的消息。
  • ER 图适合记录实体和数据库关系。
  • 类图适合描述类型、成员和继承。
  • 甘特图适合沟通计划和依赖。

最小流程图示例

flowchart LR
  请求 --> 校验{有效?}
  校验 -->|是| 发布
  校验 -->|否| 修改

安全的本地渲染

源码只保存在当前浏览器的 localStorage 中,不会由 DevToy 上传。渲染使用 Mermaid 严格安全模式,禁用标签中的不安全 HTML 和交互链接。

常见问题

应该导出 SVG 还是 PNG?

文档和设计工具优先使用可无损缩放的 SVG;目标平台不接受 SVG 时再使用 PNG。

看似正确的语法为什么报错?

检查图表关键字、缩进、保留字、引号和版本差异。建议从最接近的模板开始逐行增加。

图表源码会自动保存吗?

当前源码会保存在本设备,刷新后可以恢复;清理浏览器存储后会被删除。