总阅读量:次

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

摘要: 原创出处 http://www.iocoder.cn/Fight/Drawio-guanfangjieruleClaude-Codehualiuchengtuzhongyubuyongzijidongshoule/ 「芋道源码」欢迎转载，保留摘要，谢谢！

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

  1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
  2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
  3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
  4. 新的源码解析文章实时收到通知。每周更新一篇左右。
  5. 认真的源码交流微信群。

画流程图这件事，程序员其实都不太乐意手动干。从 Visio 到 Draw.io 到 PlantUML，工具一直在进化，但核心问题没变：你得自己一个个拖方块、连线、对齐。

现在有个更偷懒的方案：让 Claude Code 帮你画。

drawio-mcp 是 Draw.io 官方发布的 MCP（Model Context Protocol）服务，让 AI 编程助手直接创建和编辑 Draw.io 文件——不需要打开 Draw.io 界面，不需要手动拖拽。

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

drawio-mcp：让 Claude Code 直接操作 Draw.io

drawio-mcp 是一个 MCP Server，运行后提供一组工具（Tool），Claude Code 可以直接调用这些工具来：

  • 创建新的 Draw.io 文件
  • 在画布上添加节点、连线、文本
  • 设置样式（颜色、字体、线型）
  • 导出为多种格式

本质上是把 Draw.io 的编辑能力变成了 API，AI 通过 API 操作画布，替代了人手拖拽。

四种集成方式

drawio-mcp 支持四种使用方式，覆盖不同开发场景：

方式 适用场景 说明
Claude Desktop 桌面聊天 在 Claude Desktop 配置中添加 MCP Server
Claude Code 终端开发 claude mcp add drawio-mcp 一行搞定
VS Code + Copilot 编辑器内 通过 MCP 扩展集成
Cursor AI 编辑器 在 Cursor 设置中配置 MCP Server

以 Claude Code 为例，配置就一行：

claude mcp add drawio-mcp npx drawio-mcp

之后在 Claude Code 里直接说”帮我画一个用户登录的流程图”，它就会自动调用 drawio-mcp 创建 .drawio 文件。

能导出什么格式

drawio-mcp 支持的导出格式覆盖了日常需求：

  • .drawio：原生格式，可在 Draw.io 桌面版或 VS Code 插件中继续编辑
  • .png / .jpg：适合嵌入文档和 PPT
  • .svg：矢量格式，适合技术博客和网页
  • .pdf：适合正式文档
  • .html：可交互的网页版本，支持折叠/展开

推荐工作流：先让 AI 生成 .drawio 文件 → 在 Draw.io 中微调细节 → 导出为目标格式。AI 生成初版，人工精修。

内置图形库：不只是方框和箭头

Draw.io 的一大优势是丰富的图形库，drawio-mcp 完全继承了这个能力：

  • 通用图形：基本形状、流程图符号、UML 图元
  • 架构图：AWS、Azure、GCP 的官方图标库
  • 网络拓扑：路由器、交换机、防火墙等网络设备图标
  • 软件架构：微服务、消息队列、数据库、缓存等组件图标
  • 序列图：生命线、激活条、消息箭头

告诉 Claude Code”用 AWS 图标画一个三层架构图”，它能直接调用 AWS 图标库生成带 EC2、RDS、S3 图标的架构图。

实际使用场景

技术设计文档：写设计文档时让 Claude Code 根据你的描述自动生成架构图和流程图，嵌入到 Markdown 文档中。比手画快 10 倍。

代码审查：让 AI 分析一段复杂的业务逻辑，自动生成对应的流程图，帮助审查者理解代码意图。

会议白板：会议中口头描述一个方案，让 AI 实时生成图表，比在白板上画草图清楚得多。

局限和注意事项

  • 复杂布局仍需人工调整：AI 生成的图表在节点位置和连线路径上不一定最优，复杂图表建议在 Draw.io 中二次调整
  • 依赖 MCP 协议：目前只有支持 MCP 的 AI 工具才能使用（Claude Code、Claude Desktop、部分 VS Code 扩展）
  • 图形样式有限：AI 生成的图表样式偏基础，想要精美效果还得手动设置

说白了，drawio-mcp 解决的是”从零到一”的效率问题——让 AI 帮你完成 80% 的绘图工作，剩下 20% 的精修由你来。 这已经比全手工画图效率高太多了。

文章目录
  1. 1. drawio-mcp：让 Claude Code 直接操作 Draw.io
  2. 2. 四种集成方式
  3. 3. 能导出什么格式
  4. 4. 内置图形库：不只是方框和箭头
  5. 5. 实际使用场景
  6. 6. 局限和注意事项