Mermaid 在线编辑器
等待输入
什么是 Mermaid 图表编辑器？
Mermaid 是一款基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的文本语法来生成各种图表。无需手动拖拽图形，只需编写简单的文本描述，即可自动生成精美的流程图、时序图、类图等。本工具提供在线 Mermaid 编辑环境，支持实时预览、拖拽缩放和导出功能，帮助开发者快速创建和分享图表。 用于生产数据或真实代码库时，仍应结合解析器、测试结果和项目规范再次确认。
使用方法
使用方法
- 在左侧编辑器中输入 Mermaid 语法
- 右侧面板实时渲染图表
- 使用鼠标拖动平移，滚轮缩放视图
- 点击导出按钮保存为 PNG 或 SVG
图表检查
- 每次有意义的编辑后及时渲染；Mermaid 错误常由缩进问题、标点未转义或所选图表类型不支持该语法引起。
- 导出前请确认标签、箭头和换行在实际使用尺寸下依然清晰可读。
使用场景
技术原理
Mermaid 是由 Knut Sveidqvist 于 2014 年发起的开源图表渲染库。其核心思路是将人类可读的 DSL（领域特定语言）通过解析器转换为 SVG 图形。完整流水线分为三步：词法/语法解析器（由 jison 生成）将源码解析为内部数据结构；针对图表类型的布局算法计算节点和边的坐标；最后由 d3 将布局渲染为 SVG 元素。 不同图表使用不同的布局引擎：流程图默认使用 dagre（分层有向图布局），从 v10 起也支持 ELK（功能更强但体积更大）；时序图使用自定义的时序布局，将参与者水平排列、消息垂直堆叠；甘特图在时间轴上手动排列任务并支持依赖关系；类图和状态图同样依赖 dagre。布局算法决定了图表的可读性——dagre 遵循 Sugiyama 框架进行层级分配、边交叉最小化和间距收紧，对一般规模的流程图效果很好。 与 Graphviz 相比，Mermaid 的语法更接近自然语言（如 A --> B），且原生在浏览器中渲染并支持实时预览。Graphviz 的 DOT 语言更底层，其布局引擎（fdp、neato 等）更成熟，但需要本地安装且默认样式较旧。Mermaid 目前支持超过 15 种图表类型——flowchart、sequenceDiagram、classDiagram、stateDiagram、erDiagram、gantt、pie、journey、gitGraph、mindmap、timeline、quadrantChart、sankey、xychart、block 等——覆盖了绝大多数软件工程绘图需求。
- 解析：jison 生成的解析器将 DSL 文本转换为内部 AST；每种图表类型有独立的语法规则文件
- 布局算法：流程图使用 dagre 进行分层有向图布局，可切换为 ELK；时序图和甘特图使用各自专用的布局逻辑
- 渲染引擎：SVG 由 d3 绘制；节点使用 g/rect/path/text 元素，箭头通过 marker 定义
- 图表类型：支持流程图、时序图、类图、状态图、ER 图、甘特图、饼图、用户旅程图、gitGraph、思维导图等十余种
- 与 Graphviz 对比：Mermaid 语法更友好，原生支持 Web 端；Graphviz 布局更精细，适合大型复杂图
- 主题切换：通过 themeVariables 配置或 init 指令在 default、dark、forest、neutral 等内置主题间切换
示例
流程图
flowchart TD
A[开始] --> B{是否登录?}
B -- 是 --> C[首页]
B -- 否 --> D[登录页]
D --> E[输入账号密码]
E --> C
C --> F[结束]时序图
sequenceDiagram
participant Browser
participant Server
participant Database
Browser->>Server: GET /api/user
Server->>Database: SELECT * FROM users
Database-->>Server: 用户数据
Server-->>Browser: JSON 响应甘特图
gantt
title 项目计划
dateFormat YYYY-MM-DD
section 设计
需求分析 :a1, 2026-06-01, 7d
UI 设计 :a2, after a1, 10d
section 开发
前端 :b1, after a2, 20d
后端 :b2, after a2, 18d
section 测试
集成测试 :c1, after b1, 7d常见问题
Mermaid 支持哪些图表类型？
Mermaid 涵盖流程图、时序图、类图、状态图、实体关系图、甘特图、饼图、用户旅程图、Git 图、思维导图和象限图。代码第一行声明类型（如 'flowchart TD' 或 'sequenceDiagram'）。
为什么我的图表显示语法错误？
最常见原因是缺少分号或箭头符号、节点标签括号不匹配（含特殊字符的文本要加引号：A["Hello (world)"]）、箭头语法与图表类型不符（流程图用 -->、时序图用 ->>），以及子图缩进问题。错误面板通常会指向解析中断的那一行。
如何把图表导出为图片？
使用导出按钮可保存为 SVG（矢量、可缩放，推荐用于幻灯片和文档）或 PNG（位图，便于聊天和邮件分享）。如果想直接嵌入 HTML 或在 Figma、Illustrator 中继续编辑，可复制 SVG 源码。
可以自定义颜色和样式吗？
可以。用 'classDef' 定义类似 CSS 的样式，再用 'class A,B,C myStyle' 应用。一次性修改可用 'style A fill:#f9f,stroke:#333' 等内联写法。全局主题可在第一行写 %%{init: {'theme':'forest'}}%%——内置主题包括 default、forest、dark、neutral 和 base。
对图表长度或复杂度有限制吗？
Mermaid 渲染数百个节点没有问题，但超过这个量级布局时间会非线性增长。如果图表渲染慢或难以阅读，建议拆分成多个互相链接的图，或用子图分组相关节点；边过多交叉时，自动布局效果会变差。
如何为节点添加超链接或点击事件？
使用 'click NodeId "https://example.com"' 让节点变成链接，或用 'click NodeId callback "tooltip"' 触发通过 mermaid.parseError 注册的 JavaScript 回调。导出的 SVG 中链接也会保留，只要嵌入页面不剥离它们即可。
同样的 Mermaid 代码还能在哪里渲染？
GitHub Markdown、GitLab、Notion、Obsidian、Typora、VS Code（带扩展）以及大多数现代文档工具都原生支持 Mermaid 代码块。把同样的代码粘贴过去，它就会按各平台所选的主题渲染。