Mermaid 图表编辑器

编写 Mermaid 图表代码,实时预览流程图等图表,生成 SVG 图形。

免费浏览器云端功能消耗积分,匿名试用额度用完后需注册。
Mermaid Editor
Mermaid Code111 chars
Loading...
Preview
Enter Mermaid code to see the diagram.

关于Mermaid 图表编辑器

编写 Mermaid 语法并预览流程图及其他支持图表。在本地调整源码、导出图形,或主动创建服务端分享链接。

如何使用Mermaid 图表编辑器

  1. 输入 Mermaid 源码或加载示例。
  2. 检查预览并修正语法错误。
  3. 导出图表,需要上传可分享版本时再使用分享功能。

输入与输出示例

输入与设置
graph TD
  A[Start] --> B[Finish]
预期输出
从 Start 节点指向 Finish 节点的流程图。

适用场景

  • 为技术文档准备流程图。
  • 在加入 Markdown 文件前验证图表。

使用前需要了解的限制

支持范围取决于当前 Mermaid 引擎。大图可能难以渲染或阅读,分享链接有服务规定的有效期。

数据处理与费用

编辑和渲染在本地完成。使用分享功能会上传图表源码,并在分享生命周期内保存。只有准备让链接可访问时,才应分享相应内容。

核心浏览器操作免费且无需登录,可选云端功能有独立的访问与积分要求。

常见问题

支持当前 Mermaid 版本支持的所有图表类型,包括流程图、时序图、类图、状态图、实体关系图、甘特图、饼图等。

点击 Share 后,图表源码会上传到我们的服务器,并生成一个短链接。分享内容会保存 30 天,之后会被自动删除。

可以。使用 Download SVG 按钮即可把渲染后的图表保存为可缩放矢量文件。SVG 可以在任意浏览器或矢量编辑器中打开,并可无损缩放到任意尺寸。

相关工具