当前位置：首页 > draw.io文章

告别手动拖拽！AI 一键生成架构图！官方开源项目彻底解放双手

drawio2天前draw.io文章5
对于开发者、架构师、产品同学来说，绘图几乎是日常工作里最耗时又最刚需的一环。业务流程图要反复对齐节点，系统架构图要挨个拖组件、连关系，时序图、ER 图、UML 图更是细节拉满。很多人明明思路已经很清晰，却要花大量时间在拖拽、对齐、排版、改样式上，效率大打折扣。

draw.io一直是行业里公认的免费、开源、无水印、兼容性极强的绘图工具，企业覆盖率极高 —— 据称 99% 的财富 500 强公司都在使用，在 Atlassian 插件市场更是安装量排名第一。它秉持 “隐私优先” 原则，支持将数据存储在任意位置，官方无法访问用户数据，同时兼容 Google Workplace、Sharepoint、Git、Dropbox 等多种办公工具，还支持桌面端离线使用，甚至可通过插件嵌入 Notion，这些优势让它成为无数开发者的绘图首选。但它再好用，也没能解决一个根本问题：绘图依然要手动一点点拼。

最近，[draw.io]官方直接放出大招 —— 开源项目drawio-mcp正式上线，完美补齐这一短板，让 Claude 系列 AI 可以直接生成可编辑的 [draw.io]图表。不用手动布局，一句话生成 XML，打开就能改，目前该项目在 GitHub 上已收获大量关注，成为开发者效率工具的新热门。

01
draw.io
[draw.io]（现名 [diagrams.net](https://diagrams.net)）由 JGraph 开发，是一款完全开源免费的绘图工具。无需登录、无需付费、无导出水印，支持网页版与全平台客户端，Windows/macOS/Linux 都能流畅使用，甚至有 VS Code 专属版本，满足不同开发者的使用习惯。
在企业场景中，它的渗透率极高，几乎覆盖绝大多数技术团队。文件基于开放 XML 格式，可以直接用编辑器查看、版本管理，非常适合研发流程里的文档协作；支持流程图、架构图、网络拓扑、UML、BPMN、ER 图、云厂商图标等几乎所有研发常用图表，是真正意义上的全能型工具。更重要的是，它的兼容性极强，2005 年创建的图表文件至今仍能正常加载使用，还支持多人实时协作，共享光标同步编辑，这些特性让它在众多绘图工具中脱颖而出。
但它的短板也很明显：绘图过程依然高度依赖手动操作，复杂图表非常耗时。而 drawio-mcp 的出现，就是为了补上这最后一块短板，让绘图效率实现质的提升。

02
drawio-mcp 
drawio-mcp 是 [draw.io]官方推出的MCP 服务端，采用 Apache 2.0 开源协议，可放心用于商业和个人项目，无需担心版权问题。
要理解它的价值，首先要明确 MCP 的含义：MCP 全称 Model Context Protocol，由 Anthropic 定义，用于让 AI 模型安全调用外部工具。简单来说，它相当于给 AI 开了一个 “操作 [draw.io](draw.io)” 的权限，搭建起 AI 与 [draw.io]之间的 “桥梁”，让 AI 能直接生成符合 [draw.io]规范的内容。
drawio-mcp 的核心能力的具体体现为：

  • 让 Claude AI 直接生成标准 [draw.io]XML 结构，无需手动编写
  • 自动在浏览器打开编辑器，或在聊天界面内渲染图表，无需手动跳转
  • 支持搜索官方图形库，保证图标规范不走样，提升图表专业性
  • 导出图片、矢量图、PDF 并内嵌源文件，后续可随时二次编辑

值得一提的是，它不是第三方魔改，而是官方原生实现，仓库内包含 mcp-app-server、mcp-tool-server、shape-search 等多个核心模块，分工明确、持续更新，格式稳定且兼容未来迭代，这也是它能快速获得社区认可的关键原因。

03
四种接入方式
drawio-mcp 考虑到不同开发者的使用场景，提供了四种完全不同的使用路径，大家可根据自身需求灵活选择，具体差异如下表所示，一目了然：
图片


方式 1：MCP App Server（聊天内直接渲染）
这种方式的核心优势是无需跳转，图表可直接在聊天窗口内渲染，官方提供了现成的托管地址：
https://mcp.draw.io/mcp
不过经实际测试，该托管地址目前存在解析失败问题，具体报错信息为：“网页解析失败，可能是不支持的网页类型，请检查网页或稍后重试”。大家若遇到无法正常访问的情况，可优先尝试其他接入方式；若后续访问恢复，将其配置到 [Claude.ai](Claude.ai) 的远程 MCP 服务即可使用，无需额外安装。此外，该服务器也可通过 Node.js 本地运行，或部署到 Cloudflare Workers，灵活适配不同使用需求。
该方式包含两个核心工具，可满足基础绘图需求：

  • `create_diagram`：接收 XML 并在聊天内交互式渲染，支持缩放、平移、图层切换，还配备 “Open in [draw.io](draw.io)” 按钮，便于后续进一步编辑优化。
  • `search_shapes`：检索 10400 + 种图形，覆盖 AWS、Azure、GCP、Kubernetes、UML、BPMN 等各类图形库，返回可直接用于 XML 的样式字符串，确保图表元素规范。

这里有一个小注意点：inline 图表渲染依赖 MCP Apps 扩展，若所使用的宿主工具不支持该扩展，AI 会直接输出 XML 文本，将其复制进 [draw.io]即可正常使用，不影响核心功能。


方式 2：MCP Tool Server（浏览器打开编辑器）
这是 drawio-mcp 最早发布的 MCP 服务器版本，目前已正式发布到 npm 平台，包名为 `@drawio/mcp`，支持 Mermaid 和 ELK 格式预览，功能还在持续优化中。它的使用非常便捷，一行命令即可启动：


npx @drawio/mcp
启动成功后，AI 生成图表后会自动跳转到浏览器 [draw.io]编辑器，支持 XML、CSV、Mermaid.js 三种格式，同时提供灯箱模式和深色模式，适配不同开发者的使用习惯。若需本地开发调试，可进入 mcp-tool-server 目录，执行 `npm install` 和 `npm start` 命令启动本地服务即可。


方式 3：Claude Code Skill（本地开发首选）
对于日常写代码顺便画图的开发者来说，这种方式无疑是首选 —— 无网络依赖、纯本地运行，且新增了边缘路由后处理器，并已集成到所有服务器中，能进一步优化图表生成效果。
它的安装方式分为两种，可根据自身需求选择：


# 全局安装 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
安装完成后，使用起来非常简单，示例如下：


/drawio create a flowchart for user login /drawio sequence diagram for API auth /drawio png class diagram for the models in src/
执行命令后，会自动生成 `.drawio` 文件并打开，全程本地执行，安全又高效。默认生成原生 .drawio 文件，若在命令中指定格式（如 png、svg），则会通过 [draw.io]桌面 CLI 的 `--embed-diagram` 参数导出对应格式文件。


方式 4：Project Instructions（零安装即用）
如果只是临时需要生成图表，不想花费时间配置安装，这种方式就是最优选择。它无需安装任何软件或配置环境，只要使用的是 [Claude.ai](Claude.ai) 的项目功能，将一段预设说明粘贴到项目指令中，告知 Claude 如何生成 [draw.io]的 URL 即可。该方式采用 “单一信息源” 的 XML 生成提示，能确保图表格式规范，真正做到 “粘贴即用”，极大节省临时绘图的时间成本。

04
多格式导出
Claude Code Skill 支持直接指定导出格式，并且所有格式都内嵌原始 XML，这是它的核心优势之一，也是很多开发者青睐它的原因。
具体导出示例如下：


/drawio png flowchart for user login /drawio svg ER diagram for e-commerce /drawio pdf architecture overview
目前支持的导出类型及特点如下：

  • `.drawio`：原生源文件，可直接在 [draw.io]中编辑，保留所有原始结构。
  • `.drawio.png`：图片格式，内嵌 XML，后续将图片拖回 [draw.io]仍可继续编辑。
  • `.drawio.svg`：矢量图格式，内嵌 XML，放大不失真，且支持二次编辑。
  • `.drawio.pdf`：PDF 格式，可直接打印，同时内嵌 XML，支持二次编辑。

最大亮点在于：哪怕你导出的是图片或 PDF，再次拖回 [draw.io]依然可以完整编辑，不会丢失任何结构，极大提升了图表的复用性，避免了重复绘图的麻烦。

05
超万种内置图形
绘图时，图标选择不规范、不精准，往往会影响图表的专业性，而 drawio-mcp 内置图形库超过10400+（据 GitHub 仓库最新更新），能完美解决这一问题，覆盖研发场景各类需求：

  • AWS / Azure / GCP 三大主流云厂商图标，满足云架构绘图需求。
  • Kubernetes 全套资源图标，适配容器编排相关图表绘制。
  • UML、BPMN、网络拓扑、电气图、思科网络图、P&ID 等行业标准图形，覆盖各类研发绘图场景。

这些图形的搜索索引采用离线预构建方式，从 [draw.io]客户端源码（app.min.js）中提取后，直接提交到仓库中，无需联网即可完成搜索，避免了网络问题对绘图效率的影响。通过 `searchshapes` 工具，AI 可以精准检索对应图形样式，避免把专业图标画成普通方框，保证架构图规范统一。若需更新形状索引，可进入 shape-search 目录，执行 `npm install` 和 `DRAWIODEV_PATH=../../drawio-dev node generate-index.js` 命令生成新索引，更新后需重建 MCP App Server worker 以嵌入新索引。

06
统一技术规范
drawio-mcp 之所以能实现四种接入方式的顺畅联动，核心在于其统一的技术规范 —— 项目内部维护了一份关键文件，所有接入方式都以此为标准：


shared/xml-reference.md
这份文件是所有接入方式共同遵循的 XML 生成规范，涵盖边的路由规则、容器、图层、标签、元数据、深色模式、样式属性、XML 规范性等核心内容，相当于 XML 生成的 “单一信息源”，确保了不同方式生成的图表格式一致。
四种接入方式访问该参考手册的方式虽有不同，但均严格遵循这份规范，具体如下：

  • MCP App Server：启动 / 构建时读取文件，将规范纳入工具描述。
  • MCP Tool Server：启动时读取文件，可从仓库或 prepack 打包副本中获取。
  • Claude Code Skill：运行时通过 GitHub Raw URL 拉取最新规范。
  • Project Instructions：用户将文件内容复制到 Claude Project 中，确保规范落地。

因此，若需更新 XML 生成规则，只需编辑 `shared/xml-reference.md` 文件，修改会自动同步到所有接入方式，无需单独调整，极大提升了项目维护效率。
同时，图形索引采用离线预构建，不从网络实时拉取，稳定性更强，避免因网络问题影响绘图效率，进一步保障了使用体验。

07
落地建议
结合实际工作场景，给大家整理了一套最实用的使用路径，可根据自身需求对号入座，提升绘图效率：

  1. 临时快速画图→ 使用 Project Instructions，零配置、粘贴即用，无需花费时间搭建环境。
  2. 经常用 Claude 网页→ 待 MCP App Server 托管地址恢复后配置使用，或暂时切换其他方式，实现聊天内内嵌预览，无需跳转工具。
  3. 本地开发、边写代码边画图→ 优先选择 Claude Code Skill，纯本地运行、无外部依赖，效率最高，且能与开发流程无缝衔接。
  4. 习惯桌面编辑器→ 使用 MCP Tool Server，一行命令启动，一键打开浏览器编辑，兼顾桌面操作的便捷性。

整体来看，drawio-mcp 并没有创造新的绘图工具，而是把绘图这件事从 “手工操作” 升级为 “AI 生成 + 微调”，让开发者摆脱繁琐的排版工作，把时间真正花在图表设计本身，这也是它的核心价值所在。
项目地址：

https://github.com/jgraph/drawio-mcp


Copyright Drawio.com.cn Some Rights Reserved.

Powered By Z-BlogPHP. Theme by TOYEAN.