夜雨聆风画流程图这件事，让无数工程师又爱又恨。
爱它，是因为一张清晰的架构图能顶过千言万语的需求文档；恨它，是因为在 draw.io、Visio 里对齐节点、调整连线、挑颜色，动辄耗掉一两个小时。
今天介绍draw.io MCP，它可以自动生成可交互、可二次编辑的专业图表。
一、draw.io MCP 是什么？
draw.io MCP是 draw.io 官方出品的MCP集成方案。它将 draw.io 强大的图表能力以"工具"的形式暴露给大语言模型（Claude、Cursor、VS Code 等），让 AI 在对话中直接生成、预览、编辑专业级图表。
一句话概括：你说需求，AI 建图，draw.io 渲染，浏览器里打开继续改。
二、实战演示
2.1、配置 MCP
以Cursor为例，画一张带颜色区分、含解决方案标注的 Redis 缓存穿透问题流程图。
{"mcpServers": {"drawio": {"command": "npx","args": ["-y", "@drawio/mcp"]},"drawio-app": {"url": "https://mcp.draw.io/mcp"}}}
或直接在对话中让Cursor为你配置MCP。
2.2、在 Agent 对话框输入需求
使用drawio-mcp为我绘制以下提示词的对应的流程图：生成一个专业清晰的Redis缓存穿透问题完整流程图，采用标准的BPMN流程图规范。流程图需要包含以下核心节点和流程：1. 开始节点：客户端发起数据查询请求2. 第一步：请求到达应用服务器3. 第二步：应用服务器查询Redis缓存4. 分支判断：缓存中是否存在该数据？- 是：从Redis获取数据，返回给客户端，流程结束- 否：继续执行下一步5. 第三步：应用服务器直接查询后端数据库6. 分支判断：数据库中是否存在该数据？- 是：将数据写入Redis缓存，然后返回给客户端，流程结束- 否：返回空结果/错误信息给客户端，流程结束7. 突出显示"缓存穿透问题区域"：当大量请求查询数据库中不存在的数据时，所有请求都会直接打到数据库，导致数据库压力过大甚至宕机8. 增加"常见解决方案"并行分支：- 解决方案1：布隆过滤器拦截（在查询Redis之前增加布隆过滤器判断）- 解决方案2：空值/默认值缓存（数据库查询为空时也缓存一个短时间的空值）- 解决方案3：接口层增加参数校验和限流视觉要求：- 使用横向布局，流程从左到右清晰流动- 不同类型节点使用不同颜色区分：- 开始/结束节点：绿色圆角矩形- 处理节点：蓝色矩形- 判断节点：黄色菱形- 问题区域：红色虚线框标注- 解决方案区域：紫色虚线框标注- 箭头使用黑色实线，方向明确- 每个节点内文字简洁准确，不超过15个字- 字体使用无衬线字体，大小适中，清晰可读- 整体风格专业简洁，适合技术文档和PPT演示使用- 增加标题："Redis缓存穿透问题及解决方案流程图"
2.3、AI 自动生成流程图
AI 自动生成draw.io XML 并调用 MCP，AI 解析需求 → 生成符合规范的 mxGraphModel XML → 通过 MCP 工具发送 → 浏览器自动打开 draw.io 编辑器，完整图表已经就位。
2.4、在 draw.io 中微调保存
图表可直接在 draw.io 中调整位置、修改文字、导出 PNG/SVG/PDF，嵌入 Confluence、飞书、Notion 文档。
整个过程：描述需求 → 等待 AI → 打开浏览器 → 微调保存，不超过 5 分钟。
三、核心能力拆解
3.1、四种接入方式
这是 draw.io MCP 最值得称道的地方——它不强迫你改变工作流，而是提供了四种接入路径，按需选择：
| 方式 | 输出效果 | 需要安装 | 最适合 |
|---|---|---|---|
| MCP App Server（在线托管） | 对话内 iframe 交互预览，可缩放/全屏 | 否，直接填 URL | Claude.ai、Cursor 等 MCP 宿主 |
| MCP Tool Server（本地 npm） | 在浏览器新标签页打开 draw.io 编辑器 | 是（npx @drawio/mcp） | Claude Desktop、本地桌面 |
| Skill + CLI | 生成本地 .drawio 文件，可导出 PNG/SVG/PDF | 复制一个 SKILL.md | Claude Code、本地开发 |
| Project Instructions | 生成点击链接 | 否，粘贴说明即可 | 零安装快速体验 |
小提示： 在 Cursor 里使用最推荐前两种——在 ~/.cursor/mcp.json 里加几行配置，重启即用，全程不超过 3 分钟。
3.2、三大格式支持
draw.io MCP 的 Tool Server 提供三个核心工具，覆盖绝大多数绘图场景：
① open_drawio_mermaid（推荐首选）
直接发送 Mermaid.js 语法，支持 26 种图表类型：
流程图（flowchart LR/TD）
时序图（sequenceDiagram）
类图（classDiagram）
ER 图（erDiagram）
甘特图（gantt）
思维导图（mindmap）
状态机、C4 架构图……
② open_drawio_xml（精细控制首选）
当你需要精确坐标、自定义颜色、复杂容器嵌套，或使用 AWS/Azure/GCP/Kubernetes 专业图标时，用 draw.io 原生 XML 格式，完全掌控每一个像素。
③ open_drawio_csv（数据驱动制图）
将表格数据自动转为组织架构图等，适合汇报时快速从 Excel/CSV 生成可视化层级图。
3.3、万级图形库搜索
MCP App Server 还提供了一个隐藏神器：search_shapes。
它对 draw.io 内置的 1 万+专业图形库 建立了搜索索引，覆盖：
☁️云服务：AWS、Azure、GCP
🌐 网络：Cisco、Rack 机架
⚙️ 工业：P&ID 管道仪表、电气电路
☸️ 容器：Kubernetes
📋 企业流程：BPMN、UML
你只需告诉 AI"画一张包含 EC2 和 RDS 的 AWS 架构图"，它会先调用 search_shapes 找到标准图标样式，再调用 create_diagram 生成带官方图标的专业架构图。
四、适合哪些人群
软件架构师 / 技术经理：系统架构图、微服务拓扑、数据流图、部署架构图，需要频繁更新、频繁向非技术人员展示，AI 辅助生成极大降低沟通成本。
后端 / 全栈工程师：代码评审时快速出时序图、接口调用链、数据库 ER 图，再也不用"口头描述"了。
技术产品经理：业务流程图、用户旅程图、甘特图——用自然语言驱动，把时间花在思考上而不是拖拽上。
技术写作 / 文档工程师：一键生成符合企业规范的图表，嵌入技术文档，告别截图糊、排版乱。
AI 工具探索者：MCP 生态正在快速成熟，draw.io MCP 是目前落地效果最扎实的 MCP 工具之一，是学习和体验 MCP 协议的极佳切入点。
最后：
如果你觉得文章对你有帮助，欢迎点赞、收藏并分享给你的朋友。
往期文章：
剪辑师慌了！阿里新王炸Pixelle-Video！10 分钟为你生成一条短视频。
