draw.io
一款适合画流程图、架构图和数据库图的开源图表工具，也适合让 AI Agent 生成可编辑图表。
简要说明#
如果你经常需要画流程图、架构图、数据库关系图，draw.io 值得放进工具箱。它也叫 diagrams.net，在线版可以直接在浏览器里用，桌面版适合离线保存本地图表。
它最适合的场景，是画那种需要反复修改的正式图。比如项目架构、接口流程、系统模块关系、网络拓扑、ER 图。你画完之后可以导出 PNG、SVG、PDF，也可以保留 .drawio 源文件，后面继续改。
如果你只是想画一张轻松的手绘风配图，Excalidraw 会更贴近那种感觉。draw.io 的气质更像工程图工具：规整、可编辑、图形库多，适合放进文档和知识库里长期维护。
版本选择#
在线版适合快速画图。打开 app.diagrams.net，选一个保存位置，就能开始画。它适合临时画流程图、和别人分享图，或者不想安装桌面软件的时候使用。
桌面版适合更重视本地文件和隐私的人。官方桌面端强调隔离和安全，默认不会把图表数据发到外部，也不会发送使用分析数据。它除了启动时检查更新，整体更适合离线工作流。更新检查也可以通过环境变量或启动参数关闭。
如果你只是偶尔画图，在线版够用。如果图表会进入长期文档、项目资料库或工作目录，桌面版 更适合。
与截图的比较#
很多图表工具都能导出图片，但 draw.io 更值得保留的是源文件。
.drawio 文件本质上是 XML。图里的节点、连接线、样式和页面信息都可以被结构化保存。你下次打开文件，可以改一个节点名称，移动一组模块，补一条连接线，再重新导出图片。
这点对技术文档很重要。系统会变，接口会变，文章也会更新。如果只有一张截图，后面改图会很麻烦。保留 .drawio 文件，图就不会变成一次性素材。
它还支持把图表数据嵌进 PNG 或 SVG。这样导出的图片可以直接展示，同时仍然能在 draw.io 里恢复编辑。这个细节很适合写文档：发布时用图片，维护时留源数据。
AI Agent 也能用它画图#
正是由于它的原始数据实际上是图像的结构化信息吗，所以 AI Agent 可以直接生成 .drawio XML，而不是只生成一张图片。
这带来一个很实际的工作流：你把需求告诉 Agent，比如“画一个登录流程图”或“画一个三层架构图”。Agent 生成 draw.io XML，保存成 .drawio 文件，或者生成一个能在 app.diagrams.net 打开的链接。你打开之后再人工调整布局和文字。
在线的 draw.io 中使用 generate 以对话的方式生成图形。
如果要在自己的 AI Agent 中使用，可以官方网站提供的几种方法：
- MCP Tool Server
- Skill + CLI
- Project Instructions
| MCP App Server | MCP Tool Server | Skill + CLI | Project Instructions | |
|---|---|---|---|---|
| How it works | Renders diagrams inline in chat | Opens diagrams in your browser | Generates .drawio files, optional PNG/SVG/PDF export or browser URL | Claude generates draw.io URLs via Python |
| Diagram output | Interactive viewer embedded in conversation | draw.io editor in a new tab | .drawio, .drawio.png / .svg / .pdf, or browser URL | Clickable link to draw.io |
| Requires installation | No (hosted at mcp.draw.io) | Yes (npm package) | Copy skill file (draw.io Desktop only for PNG/SVG/PDF export) | No — just paste instructions |
| Supports XML, CSV, Mermaid | XML only | ✅ All three | XML only (native format) | ✅ All three |
| Editable in draw.io | Via “Open in draw.io” button | ✅ Directly | ✅ Directly | Via link |
| Works with | Claude.ai, VS Code, any MCP Apps host | Claude Desktop, any MCP client | Claude Code | Claude.ai (with Projects) |
| Best for | Inline previews in chat | Local desktop workflows | Local development workflows | Quick setup, no install needed |
这个方向很值得关注。很多 AI 生图工具的问题是图片不可维护。draw.io 让 Agent 生成的是可编辑图表，用户还能继续修改。这更适合文档、知识库和项目资料。
和 Mermaid、Excalidraw 怎么选#
Mermaid 更适合文本优先的图。你可以把图写成代码，放进 Markdown 或 Git 仓库里。它适合简单流程、时序图、类图和文档里的轻量图表。缺点是视觉控制有限，复杂图会变得难调。
Excalidraw 更适合草图和手绘感表达。它很适合做文章配图、临时白板、思路整理。它的图看起来轻松，不会太正式。
draw.io 更适合正式图表。它没有 Mermaid 那么适合纯文本版本管理，也没有 Excalidraw 那种手绘风，但它在图形库、布局、导出、可编辑文件和工程图场景上更完整。
如果你要写一份技术文档，三者可以这样分工：Mermaid 负责简单图，Excalidraw 负责草图表达，draw.io 负责需要长期维护的正式结构图。
它有哪些限制#
draw.io 不是专业 SVG 编辑器。它可以导出 SVG，但官方也提醒，SVG 导出主要用于网页嵌入，不是为了拿到其他 SVG 软件里继续精修。
它也不适合所有协作场景。核心版本当前不主打实时多人协作。如果你的需求是团队白板、评论、权限管理和多人同时编辑，可能要看 Miro、FigJam、tldraw 或其他协作工具。
还有一个容易忽略的点：项目代码是 Apache-2.0，但图标集、模板和 stencil libraries 有额外限制。普通用户导出自己的图通常不用担心，但如果你要把内置素材重新打包进商业插件或其他产品，就要认真看授权说明。
适合谁#
如果你经常写技术文档、整理项目结构、画流程图，draw.io 很适合。它不像一些轻量工具那样只适合临时表达，也不像大型设计工具那样需要完整设计流程。
它更像一个耐用的图表工作台：打开快，功能够，导出格式多，文件还能留着以后改。
如果你正在用 AI Agent 写文档或整理知识库，也可以把 draw.io 当成“可编辑图表输出格式”。让 Agent 先生成结构，再由人来调整视觉细节。这样出来的图通常比一次性图片更容易维护。