Mermaid 图表编辑器

工具简介

一个在线 Mermaid 图表编辑器，用文本语法就能画出流程图、时序图、类图等各种图表。支持 8 种常用图表模板，输入代码实时预览，可以导出 SVG 图片或复制 Markdown 代码。

适合写技术文档、画架构图、做项目规划的开发者和产品经理使用。

功能说明

流程图：用 flowchart 语法画流程图，支持判断节点、分支和子图。

时序图：用 sequenceDiagram 语法画交互时序，展示参与者之间的消息传递。

类图：用 classDiagram 语法画类图，展示类的属性和继承关系。

状态图：用 stateDiagram 语法画状态流转，适合描述订单、工作流等场景。

甘特图：用 gantt 语法画项目排期，直观展示任务时间线和依赖关系。

饼图：用 pie 语法画数据分布图，简单直观。

ER图：用 erDiagram 语法画实体关系图，展示数据库表结构和关联。

思维导图：用 mindmap 语法画思维导图，适合头脑风暴和知识整理。

使用方法

选择模板：点击模板区的任意模板加载示例代码，快速上手。

编写代码：在左侧编辑器输入或修改 Mermaid 语法代码。

查看预览：右侧区域实时渲染图表，支持放大查看。

导出结果：点击「SVG」按钮下载矢量图，点击「Markdown」复制代码块，也可以直接复制纯代码。

隐私说明

所有图表渲染都在浏览器中完成，代码不会上传到服务器。无需注册登录，不存储任何用户数据。

常见问题

支持哪些图表类型？ 流程图、时序图、类图、状态图、甘特图、饼图、ER图、思维导图共 8 种。

导出的 SVG 可以用于商业用途吗？ 可以。SVG 是标准矢量格式，可以用于文档、网页、印刷品等任意场景。

支持自定义样式吗？ Mermaid 语法支持节点样式定义，你可以给节点设置不同的颜色和形状。主题会自动跟随系统深色/浅色模式切换。

代码写错了怎么办？ 预览区会显示具体的错误提示，帮你定位问题。也可以点击「清空」从头开始，或点「重置」回到默认示例。

为什么选择这个工具？