Draw.io 官方接入了Claude Code，画流程图终于不用自己动手了！

阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/drawio-official-mcp-claude-code/ 「芋道源码」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

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

工具不少，draw.io 是其中用得最广的一个。但不管用哪个工具，画图本身还是麻烦，要拖拖拽拽，要一个节点一个节点连线，还要调布局。稍微复杂一点的图，半小时就没了。

最近 draw.io 官方发布了一个叫 drawio-mcp 的开源项目，让 Claude Code、Claude.ai 这类 AI 工具直接生成 draw.io 图表。它是 Apache-2.0 协议，仓库现在有五千六百多 Star，最新一次提交就在昨天。

仓库首页实时截图，Star 与 Fork 计数同时可见

官方自己下场了

这件事最值得说的不是功能，是出这个项目的人。

drawio-mcp 由 JGraph 官方团队维护，也就是 draw.io 背后的公司。官方账号在 X 上亲自发了公告，措辞很朴素，就一句话说我们发布了官方的 draw.io MCP 服务器，然后补了一条替代方案，说用 Claude Project Instructions 也能跑。

draw.io 官方账号发布 MCP 服务器的推文

官方下场和第三方包一层皮，差别在维护周期。这类工具最怕的就是跟到某个版本不跟了，而官方的项目会跟着 draw.io 自己的发版节奏走。

仓库社交卡片，当前 Contributors 与 Stars 与 Forks

它其实就是个 XML 编辑器

如果你没用过，两句话说清楚。

draw.io 现在也叫 diagrams.net，是 JGraph 公司做的一款在线绘图工具。完全免费，不需要注册账号，打开网页就能用。支持流程图、架构图、UML 图、ER 图这些常见图形。

draw.io 官网首页

它在企业里用得很广，99% 的财富 500 强公司据称都在用它，在 Atlassian 的插件市场里安装量排第一。

对开发者来说还有一点很关键，它的文件格式是开放的 XML。你可以直接用文本编辑器打开，也可以丢进 Git 做版本管理，还能 diff。这一点决定了它适合被 AI 接管，因为 AI 要生成的其实不是像素，是一段结构化的 XML。

四条路，差别不在功能

官方给了四种接入方式，针对不同场景。

	图在哪显示	需要装东西吗	适合谁
MCP App Server	聊天窗口里内嵌渲染	不用，有托管地址	用 Claude.ai、ChatGPT、Cursor 的人
MCP Tool Server	浏览器新标签页里的 draw.io	要，一个 npm 包	用 Claude Desktop 或本地 MCP 客户端的人
助手插件	本地 `.drawio` 文件	要，一条插件命令	用 Claude Code、Codex、Copilot CLI 的人
Project Instructions	一个可点开的链接	什么都不用装	只想临时用一下的人

很多人会按功能来选，觉得四条路差不多。其实分界不在功能。

图直接画在聊天里

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

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

它提供三个工具。create_diagram 接 draw.io XML 或者 Mermaid（后者支持 28 种图表类型），直接渲染成图，支持缩放、平移、图层切换，右上角还有一个「在 draw.io 中打开」的按钮。

search_shapes 搜 draw.io 内置的一万多个形状，覆盖 AWS、Azure、GCP、Kubernetes、UML、BPMN 这些库，返回可以直接用的样式字符串。get_drawio_reference 返回 XML 或 Mermaid 的生成参考，模型读一次就够了。

有个前提要说清楚。这个内嵌渲染依赖 MCP Apps 扩展，如果你用的宿主不支持，create_diagram 还是能跑，只是会以纯文本 XML 的形式返回，不会画成图。

它会把图丢进浏览器

第二条是最早发布的版本，已经发到 npm 上了，包名是 @drawio/mcp。

启动就一行。

npx @drawio/mcp

生成图表后，会在浏览器里自动打开 draw.io 编辑器。支持 XML、CSV、Mermaid.js 三种格式，还有灯箱模式和深色模式。适合用 Claude Desktop 或者其他本地 MCP 客户端的人。

装个插件，本地生成文件

第三条是给本地开发的，也是这篇里最需要更新认知的一条。

来源文章写的时候，这一路还是复制一个技能文件到 ~/.claude/skills/drawio。现在官方已经把它重构成了插件形态，同一份技能打包成六个宿主版本，装在 plugins/ 目录下。

Claude Code 的装法是在会话里跑两条命令。

/plugin marketplace add jgraph/drawio-mcp
/plugin install drawio@drawio

Codex CLI 走它自己的插件市场。

codex plugin marketplace add jgraph/drawio-mcp
codex plugin add drawio@drawio

GitHub Copilot CLI 的结构一样，把 codex 换成 copilot 就行。Cursor 是从市场里搜 drawio 安装，Antigravity 用 agy plugin install 指向仓库里的插件目录。OpenCode 最省事，它本来就会识别 .opencode/skills/ 和 .claude/skills/，连插件都不用装。

装好之后在 Claude Code 里直接用 /drawio 就能画。

/drawio create a flowchart for user login
/drawio sequence diagram for API auth
/drawio png class diagram for e-commerce

默认它会生成 draw.io 的原生 XML，写成 .drawio 文件然后自动打开，整个过程不依赖任何外部服务。想换输出格式，在命令里提到格式名就行。提到 png、svg 或 pdf，它会调用你本机装的 draw.io Desktop 命令行做导出。提到 url，它会用 Node 内置的 zlib 把 XML 压一下，在 app.diagrams.net 里打开，这条不需要装 Desktop。

导出的图还能再编辑，因为四种格式里后三种都把原始 XML 嵌在文件里了。拖着那张 .drawio.png 回 draw.io，照样能改。

什么都不装也能用

第四条是零安装。如果你用 Claude.ai 的项目功能，把一段说明贴到项目指令里，教会它用 Python 生成 draw.io 的 URL 就行。不需要 MCP 服务器，也不需要在本地装任何东西。

这条路唯一的前提是你得在 Claude.ai 里建一个项目。适合临时用一下、或者团队里有人不想折腾安装的场景。

图会不会离开你的机器

这一节是我建议你优先看的。

官方 README 里有一张表，写得很直白，把这四条路的数据路径摊开了。

托管版的 MCP App Server 会把图作为 MCP 请求发到 draw.io 的服务器上。想让它不出门，得自己部署，本地跑 Node、用官方 Docker 镜像、或者部署到自己的 Cloudflare Worker 都行。

MCP Tool Server 不外发。它把图放在 URL 的 #fragment 里，而浏览器不会把这个片段发到服务器。

助手插件也不外发，文件写在本地，导出靠你本机的 draw.io Desktop。

但有个细节容易漏。Claude Code 和 Cursor 的插件里打包了托管的 App Server，你一旦让它在聊天里内嵌渲染，图还是会去 mcp.draw.io。插件默认那条路是干净的，混用就不是了。

同一份技能，四条路，差别只在于图是留在你的磁盘上，还是被送到别人的服务器上。

还有一层，官方也写了。图是模型生成的，如果你用的是云端模型，图的内容在模型那边就已经产生了，跟你把 MCP 服务器放在哪没关系。真正的端到端隔离，得连模型一起本地化。

最后说说怎么选

把这四条路对上人，其实不难。

只在网页里用 AI 的，加一个托管地址，图就嵌在聊天里，代价是图会过一下 draw.io 的服务器。要图不出门又想要内联效果的，自己部署一份 App Server。

本地开发的，装插件。它默认就是干净的，文件落盘、导出走本机。你要做的只是记住别顺手打开那个内嵌渲染。

偶尔用一次的，贴一段项目指令，什么都不装。

至于形状库，search_shapes 那一万多个形状是离线索引，提交在仓库里，不联网也能搜。索引本身是从 draw.io 客户端源码里抓出来的，每次 draw.io 发版后由 GitHub Action 自动重建，所以新版本里的图标它也能跟上。

项目地址是 https://github.com/jgraph/drawio-mcp，Apache-2.0 协议，免费用。