什么是 Mermaid?
Mermaid 可以把文本定义转换为图表。由于源文件是文本,团队可以在 Pull Request 中评审、通过 Git 跟踪改动,并让图表与技术文档保持同步。
编辑器支持流程图、时序图、类图、ER 图和甘特图,全部在浏览器本地渲染。可以从模板开始修改,然后导出 SVG 或 PNG。
如何选择图表类型
- 流程图适合描述决策和业务流程。
- 时序图适合展示系统之间随时间发生的消息。
- ER 图适合记录实体和数据库关系。
- 类图适合描述类型、成员和继承。
- 甘特图适合沟通计划和依赖。
最小流程图示例
flowchart LR
请求 --> 校验{有效?}
校验 -->|是| 发布
校验 -->|否| 修改安全的本地渲染
源码只保存在当前浏览器的 localStorage 中,不会由 DevToy 上传。渲染使用 Mermaid 严格安全模式,禁用标签中的不安全 HTML 和交互链接。
常见问题
应该导出 SVG 还是 PNG?
文档和设计工具优先使用可无损缩放的 SVG;目标平台不接受 SVG 时再使用 PNG。
看似正确的语法为什么报错?
检查图表关键字、缩进、保留字、引号和版本差异。建议从最接近的模板开始逐行增加。
图表源码会自动保存吗?
当前源码会保存在本设备,刷新后可以恢复;清理浏览器存储后会被删除。