画流程图是很多开发者都绕不开的事。需求评审要画业务流程图，做系统设计要画架构图，写接口文档要画时序图。

工具不少，draw.io 是其中用得最广的一个，免费、开源、功能齐全。但不管哪个工具，画图本身还是麻烦：要拖拖拽拽，要一个节点一个节点地连线，要调整布局，稍微复杂一点的图就得花不少时间。

最近 draw.io 官方发布了一个叫 drawio-mcp 的开源项目，让 Claude Code、Claude.ai 这类 AI 工具直接生成 draw.io 图表，不用自己动手拖拽了。目前 GitHub 上已经有 2700+ Star，是 draw.io 团队亲自做的，不是第三方。

draw.io 是什么

draw.io 现在也叫 diagrams.net，是 JGraph 公司做的一款在线绘图工具。它完全免费，不需要注册账号，打开网页就能用。支持流程图、架构图、UML 图、ER 图等各种图形，还有桌面客户端，支持 Windows、macOS 和 Linux。

它在企业里用得很广。99% 的财富 500 强公司据称都在用它，在 Atlassian 的插件市场里，它是安装量第一的绘图工具。对开发者来说，它的格式是开放的 XML，文件可以直接用文本编辑器打开，也很方便做版本管理。

drawio-mcp 是什么

MCP 是 Model Context Protocol 的缩写，Anthropic 推出的一种协议。它定义了一套标准，让 AI 模型可以调用外部工具和服务。简单说，就是给 AI 接口，让它能做"调用工具"这件事。

drawio-mcp 就是 draw.io 的官方 MCP 服务器。它让 Claude 等 AI 可以直接操作 draw.io，生成图表文件、在浏览器里打开编辑器，或者把图表嵌入聊天窗口。

这个项目放在 GitHub 上，仓库地址：https://github.com/jgraph/drawio-mcp

四种接入方式

项目里提供了四种方式，针对不同场景，可以按需选择。

方式一：MCP App Server（嵌入聊天窗口）

这种方式用的是 MCP Apps 协议。AI 生成图表后，图表直接以交互式窗口的形式显示在聊天界面里，不用跳转到别的页面。

官方提供了一个托管好的服务地址：https://mcp.draw.io/mcp。把这个地址加到 Claude.ai 的远程 MCP 服务器里就行，不需要自己安装任何东西。

它提供了两个工具：

• • create_diagram：传入 draw.io XML，直接渲染成图表显示在聊天里，支持缩放、平移、图层切换，还有"在 draw.io 中打开"按钮- • search_shapes：搜索 draw.io 内置的 10000+ 个形状，覆盖 AWS、Azure、GCP、Kubernetes、UML、BPMN 等库，返回可以直接用的样式字符串> 注意：这个嵌入式渲染依赖 MCP Apps 扩展。如果你用的宿主工具不支持这个扩展，create_diagram 还是能用，只是会以纯文本 XML 的形式返回，而不是渲染成图。

方式二：MCP Tool Server（在浏览器里打开编辑器）

这是最早发布的 MCP 服务器版本，已经发布到了 npm，包名是 @drawio/mcp。

用起来也简单，一行命令启动：

`npx @drawio/mcp`

生成图表后，会在浏览器里自动打开 draw.io 编辑器。支持 XML、CSV、Mermaid.js 三种格式，还有灯箱模式和深色模式。

这种方式适合用 Claude Desktop 或者其他本地 MCP 客户端的人。

方式三：Claude Code Skill（推荐本地开发者用）

这种方式专门为 Claude Code 设计，不需要单独运行 MCP 服务器，只需要复制一个技能文件就行。

安装步骤很简单：

全局安装（所有项目都能用）：

`mkdir -p ~/.claude/skills/drawio
cp drawio/SKILL.md ~/.claude/skills/drawio/SKILL.md`

仅当前项目安装：

`mkdir -p .claude/skills/drawio
cp drawio/SKILL.md .claude/skills/drawio/SKILL.md`

装好之后，在 Claude Code 里直接用 /drawio 命令就能画图了。

使用示例：

`/drawio create a flowchart for user login
/drawio sequence diagram for API auth
/drawio png class diagram for the models in src/`

Claude Code 会生成 draw.io 的原生 XML，写到 .drawio 文件里，然后自动打开。不依赖任何外部服务，也没有网络请求。

方式四：Project Instructions（零安装，粘贴就能用）

如果你用的是 Claude.ai 的项目功能，还有一种更简单的方式：把一段说明贴到项目指令里，告诉 Claude 如何生成 draw.io 的 URL。不需要安装任何东西，Claude 会通过 Python 代码执行来生成可点击的链接。

适合临时使用、不想折腾安装的场景。

导出格式

Claude Code Skill 方式支持把图表导出成多种格式，不只是 .drawio 文件。

在命令里提到格式就行：

`/drawio png flowchart for user login     # → login-flow.drawio.png
/drawio svg: ER diagram for e-commerce   # → er-diagram.drawio.svg
/drawio pdf architecture overview        # → architecture-overview.drawio.pdf`

| 格式 | 文件扩展名 | 说明 || 默认 | .drawio | 原生 XML，可直接在 draw.io 里编辑 || PNG | .drawio.png | 图片格式，内嵌了 XML，可以重新拖入 draw.io 编辑 || SVG | .drawio.svg | 矢量图，内嵌 XML，同样可以二次编辑 || PDF | .drawio.pdf | 可打印，内嵌 XML，可二次编辑 |这里有个细节值得注意：导出的 PNG/SVG/PDF 文件里都内嵌了原始的 XML 数据。也就是说，即便导出成了图片，把文件拖回 draw.io 还是可以继续编辑，数据不会丢失。

10000+ 形状库

draw.io 内置了大量图标库，drawio-mcp 的 search_shapes 工具可以搜索这些形状。云服务方面有 AWS、Azure、GCP，容器编排有 Kubernetes，行业标准覆盖 UML、BPMN、P&ID、电气图、思科网络图等。总数超过 10000 个形状。

搜索之后返回的是可以直接用在 XML 里的样式字符串，AI 调用这个工具之后能确保图标准确，不会把 Lambda 画成普通方块。

技术设计

整个仓库有一个文件叫 shared/xml-reference.md，是所有方式共用的 XML 生成参考手册。里面详细写了边的路由规则、容器、图层、标签、元数据、深色模式、样式属性等内容。

MCP App Server 在启动时读取这个文件，MCP Tool Server 也在启动时读取，Claude Code Skill 则在运行时通过 GitHub Raw URL 拉取它。四种方式都用这一份文档，保证生成的 XML 风格一致。

形状搜索索引是离线预构建的，从 draw.io 客户端源码里提取，提交到了仓库里。不需要联网才能搜索形状。

小结

drawio-mcp 做的事情不复杂：让 AI 直接写 draw.io 的 XML，省掉手动拖拽的步骤。对于写代码时顺便需要画图的开发者来说，在终端里打一行命令就能得到一个可以继续编辑的 .drawio 文件，挺实用的。

四种接入方式覆盖了不同场景。只用网页的，添加一个 MCP 服务器地址，图表就能嵌在聊天里；用 Claude Desktop 的，装一个 npm 包，图表在浏览器里打开；用 Claude Code 的，复制一个技能文件，命令行直接画图；如果不想装任何东西，贴一段项目指令就能用。

项目地址：https://github.com/jgraph/drawio-mcp

目前已有 2700+ Star，是 draw.io 官方团队维护的，更新比较积极，有兴趣可以去看看。