支持 Mermaid、PlantUML、D2 输出 PNG / SVG 的免费图表生成器
在浏览器中实时渲染 Mermaid、PlantUML、D2、Graphviz、C4 (Structurizr)、WaveDrom 等 16 种图表语言。可从代码生成流程图、时序图、ER 图、甘特图、网络图,并保存为 PNG / SVG。无需注册,完全免费。
为什么要用代码绘制图表
相比拖放式绘图工具(Visio / draw.io 等),代码型图表有 3 大优势:
1. **可用 Git 管理版本** — 图表的修改历史会包含在 Pull Request 中 2. **可在文本编辑器中编辑** — 在 VS Code / Vim 中也能工作 3. **易于复用** — 可模板化,团队全员保持统一风格
尤其在工程团队的架构图、运维流程图、API 时序图中效果显著。
支持的图表语言
・**Mermaid**: 流程图 / 时序图 / ER 图 / 甘特图 / 饼图。可直接嵌入 Markdown,通用性强 ・**PlantUML**: 类图、用例图、活动图等 UML 全集 ・**D2**: 2023 年问世的现代声明式语言。擅长架构图 ・**Graphviz (DOT)**: 图论领域的老牌工具。适合节点边数量多的图 ・**Structurizr DSL**: 用 C4 模型分层描述软件架构 ・**WaveDrom**: 数字电路时序波形 ・**TikZ / Vega 等其他 10 余种** 同样支持
PNG 还是 SVG?
**SVG** 是矢量图,放大不会失真。嵌入文档或网页时首选 SVG,还可进行文本搜索。
**PNG** 是位图。粘贴到 Slack 或 Notion 等无法良好处理 SVG 的工具时,或嵌入 Word / PowerPoint 时较为方便。
本工具一键即可下载两种格式,渲染后可自由选择保存类型。
想让 AI 自动生成图表
如果遇到「想画用户注册流程」「想可视化微服务间时序」这样的自然语言需求,可使用 **AI 图表生成器**(高级功能),AI 会选择最合适的语法并生成代码。在纠结该用 Mermaid / PlantUML / D2 之前,不妨先用中文输入需求试试。