Mermaid 图表生成器
用文本快速绘制流程图、时序图与甘特图，右侧实时渲染，支持导出 SVG。
Mermaid 实时渲染
正在渲染...
Mermaid 图表生成器使用指南
📌 简介
Mermaid 图表生成器是一款面向开发者、产品经理与文档写作者的在线绘图工具。它基于 Mermaid.js 引擎，让你通过编写类似 Markdown 的纯文本语法，实时生成流程图、时序图、甘特图、类图等专业图表，彻底告别拖拽连线的繁琐操作。
📖 Mermaid 的核心优势
传统的绘图工具（如 Visio、Draw.io）依赖鼠标拖拽，修改结构时往往需要重新布局。Mermaid 将图表定义为代码，你可以像写文档一样描述节点与关系（例如 A --> B 表示 A 指向 B），渲染引擎会自动计算最佳布局。这不仅极大提升了修改效率，还让图表能够纳入 Git 版本管理，适合在技术文档、README 或博客中嵌入使用。
💼 常见应用场景
- 技术架构图：快速描述微服务调用关系、数据流向或系统部署结构。
- 业务流程梳理：用流程图清晰表达审批流、订单状态机或用户操作路径。
- 项目排期：用甘特图语法直观展示任务时间线与依赖关系。
- 文档配图：在 Markdown 笔记或 GitHub README 中直接生成图表，无需外部图片链接。
⚙️ 使用步骤
- 在左侧文本框中输入 Mermaid 语法（默认已填入一个流程图示例）。
- 右侧面板会实时渲染出对应的图表。
- 如果语法有误，右侧会显示具体的错误提示，方便你快速定位。
- 确认图表无误后，点击“下载 SVG”按钮，即可获得矢量格式的图表文件。
⚠️ 注意事项
- 本工具依赖 Mermaid 官方 CDN，如果网络环境受限，图表可能无法渲染。
- Mermaid 语法对缩进和符号敏感，请确保箭头与节点定义的格式正确。
- 导出的 SVG 为矢量图，可在 Illustrator、Figma 等设计软件中二次编辑。
❓ 常见问题 (FAQ)
Q: 支持哪些图表类型？
A: 支持流程图（graph / flowchart）、时序图（sequenceDiagram）、甘特图（gantt）、类图（classDiagram）、状态图（stateDiagram）等 Mermaid 主流图表。
Q: 导出的 SVG 在 Word 里能直接插入吗？
A: 现代版本的 Word 支持插入 SVG，但部分旧版本可能需要先转换为 PNG。你可以用浏览器打开 SVG 后截图，或使用在线转换工具处理。