我关掉 draw.io 的那一刻，突然觉得画图这件事，AI 真该接手了

昨晚十一点，我打开 draw.io，开始拖第一个矩形。

拖到一半，产品经理发来消息："那个架构图能不能改一下，把认证服务单独拆出来？"

我看着那个还没画完的图，默默关掉了 draw.io。

可能你也懂这种感觉。不是不会画，是画图这件事本身就挺反人类的。你明明脑子里逻辑清晰，但非得被拖拽、对齐、调颜色、挪位置这些事情打断，等你把所有节点摆好，思路早不知道飞哪儿去了。

从手动拖拽到 AI 生成的转变，有那么难吗？

然后今天早上，我刷到了 GitHub trending。

draw.io 官方发了一个开源项目，叫 drawio-mcp。3200 多个 Star，官方团队自己维护的，不是第三方野路子。

我当时的反应是——卧槽，draw.io 终于想通了？

画图的痛，画过的人都懂

先说一句，draw.io 这个工具本身没什么问题。免费开源，功能齐全，据说是 99% 的财富 500 强公司都在用。不用登录，不用付费，导出不加水印，文件格式是开放的 XML，放十年都能打开。

说它是绘图工具里的瑞士军刀，不为过。

但这个工具再好，也解决不了一个根本问题——画图这件事，本质上是个体力活。

你想画一个时序图，得先拖出几个对象，然后一条一条连线，每条线还得标注调用关系。画完发现布局不对，又得调整位置。产品经理说逻辑要改，你可能整个图都得重新排版。

我之前帮一个创业公司做技术文档，光是一个业务流程图就改了七个版本。每改一次都得重新调整节点位置、连线走向、标注文字。前后花了三个多小时，真正花在"想清楚业务逻辑"上的时间可能不到二十分钟。

这种经历，我估计屏幕前的你也不陌生。

画图占用的不只是时间，还有注意力。你本来在思考业务逻辑，结果被拖拽、对齐、调色这些操作打断，思路就断了。等你好不容易把图画完，刚才想到的那个绝妙的设计思路可能早就忘了一半。

所以当我知道 draw.io 官方出了个 AI 工具的时候，我第一反应是——这东西早就该有了。

MCP 协议：让 AI 从"参谋"变成"助理"

drawio-mcp 这个项目，核心靠的是 MCP 协议。

MCP 全称 Model Context Protocol，是 Anthropic 推出的一套标准，定义了 AI 模型怎么调用外部工具。翻译成人话就是，给 AI 接了一套接口，让它能操作真实的工具。

这句话听起来好像没什么，但它的含义非常深。

以前的 AI 能干什么？生成文字。生成图片。生成代码。它给你一个结果，你自己去用。AI 是个"参谋"，不是"执行者"。

MCP 协议出现之后，AI 开始能调用工具了。它可以帮你发邮件、管理日历、操作数据库、现在还能帮你画图。AI 从"给你建议"变成了"帮你做事"。

这是一个质的飞跃。

你想啊，以前你让 AI 帮你画个图，它给你描述一下："你可以在 draw.io 里创建一个矩形，然后拖一条线连过去，标注上 API Gateway……"

你听完还是得自己动手。

现在不一样了。现在你跟 AI 说"画个微服务架构图"，它直接给你生成 draw.io 的 XML 文件，打开就能编辑。图准不准、布局好不好，AI 一次性搞定，你只需要微调细节。

这就不是参谋了，这是给你配了一个不用发工资的助理。

drawio-mcp 就是在这个框架下诞生的。它让 Claude 这类 AI 能直接调用 draw.io 的能力，生成可编辑的图表文件。整个流程变成了——你说话，AI 画图，你改细节。

省掉的那一步"自己动手拖拽"，听起来不多，但体验过就知道，完全是两种东西。

四种玩法，我推荐第三种

drawio-mcp 提供了四种接入方式，各有各的适用场景。我测试了一圈，发现这个项目在兼容性上是真的下了功夫的。

方式一：聊天窗口直接渲染

这种方式用的是 MCP Apps 协议，图表能直接显示在聊天界面里，不用跳转网址。官方提供了一个托管地址，配置到 Claude.ai 的远程 MCP 服务器里就行，不需要安装任何东西。

它提供两个核心工具：create_diagram，传入 draw.io XML，直接渲染成图表，支持缩放、平移、图层切换，还有一个"在 draw.io 中打开"的按钮，方便你后续继续编辑。search_shapes，搜索 draw.io 内置的 10000+ 个形状，覆盖 AWS、Azure、GCP、Kubernetes、UML、BPMN 等各类图形库。

用起来很简单，你直接在 Claude 里说："帮我画个用户注册流程图，包括邮箱验证和手机验证两个分支。"然后图就出来了。

说实话我当时试的时候还有点不敢相信——就这么一句话，图就出来了？结果还真是。

方式二：浏览器打开编辑器

这是最早发布的版本，已经发布到了 npm，一行命令就能启动：

npx @drawio/mcp

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

比如你在 Claude Desktop 里说："画个微服务架构图，包括 API Gateway、三个服务、Redis 缓存和 MySQL 数据库。"Claude 生成完之后，浏览器直接弹出 draw.io 编辑器，你可以在里面直接调整细节。

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

方式三：Claude Code Skill（我推荐这个）

如果你日常在写代码，顺便要画个图，这种方式是最顺滑的。它不需要单独运行 MCP 服务器，只需要复制一个技能文件到本地就行。

全局安装：

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 文件里，然后自动打开。不依赖任何外部服务，也没有网络请求，纯本地运行。

我自己用的是这种方式。原因很简单——我日常就是在 Claude Code 里写代码的，现在画图不需要切换工具，直接一个命令搞定，效率提升非常明显。

改图也很方便。你说"/drawio add phone verification branch"，AI 直接更新文件，再打开的时候图就变了。产品经理让你改七版，每版五分钟搞定，剩下的时间你可以喝杯咖啡。

方式四：零安装的 Project Instructions

如果你是临时需要，不想折腾安装，也有办法。只要把一段预设说明粘贴到 Claude.ai 的项目指令里，Claude 就会按照规范生成 draw.io 的 URL，直接能用。

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

一个细节，让 AI 生成的图真正能用

我测试了好几种 AI 画图工具，发现一个问题——AI 画出来的图，图标经常是不对的。

比如你说"AWS Lambda"，AI 可能给你画个普通方块，配色也不对。你说"Kubernetes Pod"，它可能给你画个圆形。你说"S3 存储桶"，出来的可能就是个文件夹图标。

这种图，你敢给客户看吗？给你老板看？

drawio-mcp 解决这个问题的方案挺聪明的。它内置了 search_shapes 工具，可以搜索 draw.io 官方的 10400+ 个图形，包括 AWS、Azure、GCP、Kubernetes、UML、BPMN、网络拓扑、电气图等等。

AI 生成图表的时候，如果你提到这些专业图标，它会先调用 search_shapes 找到对应的图标样式，然后生成带正确图标的 XML。你拿到的图，图标是对的，不需要自己再去改。

举个例子，你说"画个 AWS 架构图，包括 Lambda、API Gateway、DynamoDB 和 S3"。AI 会先搜索这些服务的官方图标，然后用正确的图标生成架构图。

不会出现 Lambda 被画成普通方块、S3 被画成文件夹这种情况。

这个设计让 AI 生成的图从"能用"变成了"能看"。专业度这块，拿出来汇报不丢人。

导出的文件，还能继续编辑

还有一个细节我觉得值得单独说一下——drawio-mcp 导出的 PNG、SVG、PDF 文件里，都内嵌了原始的 XML 数据。

也就是说，哪怕你导出的是一张图片，把这个图片拖回 draw.io，依然可以继续编辑所有元素。线条、节点、文字、布局，完整保留。

这个设计太重要了。

以前用其他 AI 画图工具，导出是什么就是什么，想要修改？对不起，重新生成。drawio-mcp 相当于给你留了个后悔药。AI 生成之后你觉得某个地方不太对，改就是了，不需要重新让 AI 跑一遍。

你还可以先让 AI 生成一个基础版本，然后自己在 draw.io 里微调。AI 负责 80% 的框架工作，你负责 20% 的精细调整。

这个分工比例，才是最高效的。

这件事背后的意义，比工具本身更大

说了这么多功能层面的东西，我想聊点更深的东西。

drawio-mcp 这件事，不只是一个 AI 画图工具的诞生。它代表了一个更大的趋势——AI 正在从"对话界面"迁移到"操作界面"。

什么叫对话界面？就是你现在跟 AI 交互的主要方式——你说话，它回答。你问，它答。你让它写文章，它给你一篇文章。你让它写代码，它给你一段代码。结果都是"文本"，你拿着文本自己去用。

什么叫操作界面？就是你告诉 AI 一个目标，AI 直接帮你做完一件事。画图、发邮件、管日历、调工具——AI 直接操作真实世界里的工具，把结果放到你手里，你只需要审核和微调。

MCP 协议就是干这个的。它定义了 AI 怎么调用工具的接口标准。有了这套标准，任何工具都可以被 AI 操作，不只是 draw.io，不只是 Claude，未来会有越来越多的工具接入 MCP，形成一个 AI 操作工具的生态系统。

这个趋势用一个类比可能会更清晰。

早期的计算机，需要专业人士用命令行操作。后来图形界面（GUI）出现，普通人也能用电脑了。计算机的受众从"专业人士"扩展到了"所有人"。

AI 现在的阶段，有点像早期的命令行——普通人不知道怎么跟 AI 高效交互，得学习 Prompt 技巧、得理解 AI 的能力边界、得自己把 AI 的输出落地到具体场景。

MCP 协议的出现，相当于 AI 领域的"图形界面时刻"。你不需要学习怎么跟 AI 说话，你只需要说"帮我画个图"，AI 直接帮你做了。门槛大幅降低，受众大幅扩展。

drawio-mcp 可能只是这个大趋势里的一个小例子。但小例子往往最能说明问题。

说真的，这几年我用过不少 AI 工具。有些确实能提效，有些就是噱头。drawio-mcp 这个东西，我觉得是那种真正能进日常流水线的。

不是什么颠覆性的大变革，就是把"拖拽画图"这个琐碎的体力活接走了。你原来得花半小时搞的事情，现在五分钟搞定，剩下的时间去想真正重要的事。

这就够了。

有时候，最好的技术进步不是让你"哇"一声，而是让你用着用着就回不去了，根本不想再碰以前那套落后的方式。

drawio-mcp，就是这种。

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

好了，聊到这儿。

你有没有发现过自己每天在用、但不知道背后是什么的工具？