Mermaid Editor

Mermaid 在线编辑器

输入 Mermaid 语法，实时预览流程图、时序图、甘特图、状态图、饼图等图表，并支持导出 SVG 图片。

源码

实时预览

等待输入
图表将在这里显示

Mermaid 说明与使用方法

什么是 Mermaid？

Mermaid 是一种用纯文本描述图表的语法。你只需要写出节点、关系和方向，就能生成流程图、时序图、甘特图、状态图、饼图等图表。

它适合写在 Markdown、技术文档、需求说明、架构设计和项目排期中，便于代码化维护和版本对比。

工具怎么用？

  1. 在左侧源码编辑器输入 Mermaid 语法。
  2. 右侧会自动实时预览图表，也可以点击“渲染”手动刷新。
  3. 点击上方示例按钮，可快速载入流程图、时序图、甘特图、饼图模板。
  4. 选择主题可切换图表样式。
  5. 图表确认后，可复制源码或下载 SVG。

常见图表类型

  • graph / flowchart：流程图、决策树、依赖关系
  • sequenceDiagram：接口调用、系统交互、消息流
  • gantt：项目排期、任务计划、里程碑
  • stateDiagram：状态机、订单状态、审批流
  • pie：占比展示、统计摘要

语法示例

流程图

graph TD
A[开始] --> B{是否登录?}
B -->|是| C[显示主页]
B -->|否| D[跳转登录页]
C --> E[结束]
D --> E

时序图

sequenceDiagram
participant A as 用户
participant B as 服务器
A->>B: 登录请求
B-->>A: 验证结果

甘特图

gantt
title 项目排期
dateFormat  YYYY-MM-DD
section 研发
需求确认 :done, des1, 2026-07-01, 2d
编码实现 :active, des2, after des1, 4d
联调验收 :des3, after des2, 2d

状态图

stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付: 支付成功
待支付 --> 已取消: 超时取消
已支付 --> 已完成: 发货完成

饼图

pie title 工具使用占比
"格式转换" : 42
"图片处理" : 28
"开发辅助" : 30

使用注意

  • 节点文本含特殊符号时，建议使用引号或方括号包裹。
  • 中文节点可以直接使用，但节点 ID 建议保持简短。
  • 渲染失败时，先检查首行图表类型和箭头语法。
  • 导出的 SVG 可用于文档、博客、设计稿和演示文稿。