Mermaid 编辑器
流程图、时序图、甘特图在线编辑与预览，使用 Mermaid 语法。
模板选择
Mermaid 代码
预览
Mermaid 语法速查
流程图
graph TD
A[开始] --> B{判断}
B -->|是| C[执行]
B -->|否| D[结束]
C --> D时序图
sequenceDiagram participant A as 客户端 participant B as 服务器 A->>B: 发送请求 B-->>A: 返回响应
甘特图
gantt title 项目计划 section 阶段1 需求分析 :a1, 2024-01-01, 10d 开发 :a2, after a1, 20d
饼图
pie title 技术栈占比 "Vue" : 40 "React" : 30 "Angular" : 15 "其他" : 15
使用说明
功能介绍
Mermaid 是一种基于文本的图表描述语言，可以通过简单的标记语法生成流程图、时序图、甘特图、类图、状态图、饼图、ER 图、思维导图等多种图表，适合嵌入到文档和 Markdown 中。
操作步骤
点击顶部"模板选择"卡片中的按钮快速载入示例代码；在左侧文本框中编辑 Mermaid 代码，右侧自动渲染预览（带防抖）；如需手动刷新可点击"刷新"按钮；支持通过"下载图表"按钮导出 SVG、PNG、JPG、WebP 格式。
支持的图表类型
Flowchart 流程图（graph）、Sequence 时序图（sequenceDiagram）、Gantt 甘特图（gantt）、Class Diagram 类图（classDiagram）、State Diagram 状态图（stateDiagram-v2）、Pie Chart 饼图（pie）、ER Diagram 实体关系图（erDiagram）、Mindmap 思维导图（mindmap）。
注意事项
Mermaid 库通过 CDN 动态加载，首次使用需联网；securityLevel 已设为 loose 以支持复杂语法；渲染失败时会在预览区显示错误信息；导出位图时使用 SVG 转 Canvas 方式，建议使用 2x 或 3x 倍率获得更清晰图像。