使用 opencode draw.io MCP 实现流程图绘制 — 从配置到实战AI 不仅能帮你写代码还能帮你画图。本文介绍如何在 opencode 中接入官方 draw.io MCP让 AI 直接生成可编辑的流程图、架构图和数据流图。1. 什么是 MCPMCPModel Context Protocol是 Anthropic 提出的开放协议用于标准化 AI 模型与外部工具之间的通信。有了 MCPAI 可以直接调用 draw.io 编辑器——生成的不是文本而是一个可以立即查看、编辑的 diagram URL。2. 环境搭建2.1 前置条件确保你已经安装了 opencode 和 Node.jsnpx 需要。2.2 配置opencode.json在项目根目录的opencode.json中添加 draw.io MCP{mcp:{drawio:{type:local,command:[cmd,/c,npx,-y,drawio/mcp]}}}Windows 用户注意必须用[cmd, /c, npx, ...]的形式。PowerShell 不会自动识别 npm 命令需要通过cmd /c做桥接。2.3 验证安装保存配置后重启 opencode尝试发送以下指令。如果浏览器自动打开了 draw.io 编辑器并显示图表说明配置成功。3. 三工具一览draw.io MCP 提供三个工具分别对应三种输入格式工具输入格式适用场景上手难度open_drawio_xmldraw.io XML架构图、网络拓扑、云服务部署图高完全控制open_drawio_mermaidMermaid.js 语法流程图、时序图、ER 图、状态图低自动布局open_drawio_csvCSV 表格组织架构图、角色矩阵中表格驱动选择建议流程图优先用 Mermaid架构图用 XML组织数据用 CSV。4. 实战示例4.1 认证流程图在 opencode 对话框中输入使用 open_drawio_mermaid 画一个登录认证流程图包含开始登录、接收请求、验证格式、验证用户判断分支成功→处理登录→生成JWT→返回结果失败→返回错误、推送结果给客户端。要求用绿色表示成功、红色表示错误、橙色表示输出。生成结果4.2 三层架构图在 opencode 对话框中输入使用 open_drawio_xml 画一个三层 Web 应用架构图从左到右依次是用户蓝色→ 前端 SPA紫色→ API 服务 Go绿色→ 数据库 PostgreSQL黄色圆柱体。箭头上分别标注 HTTP、REST API、SQL。生成结果4.3 请求处理流程图在 opencode 对话框中输入使用 open_drawio_xml 画一个 HTTP 请求处理流程使用垂直泳道Client、Middleware、Handler、Service、DB展示从接收请求到返回响应的完整链路包含 JWT 验证中间件、业务逻辑处理、数据库查询每个泳道用不同颜色区分。生成结果4.4 登录流程图参考风格在 opencode 对话框中输入使用 open_drawio_xml 画一个登录流程图使用垂直布局绿色椭圆作为开始节点蓝色矩形作为处理步骤接收请求、验证格式、处理逻辑红色菱形作为判断用户验证橙色矩形作为输出结果返回结果、推送错误给客户端。用黑色箭头连接判断节点分出是“否”异常三个分支。生成结果5. 最佳实践5.1 版本管理docs/ ├── *.drawio # draw.io XML 源文件可 commit ├── screenshots/ # 截图可选 commit └── blog-*.md # 文档.drawio是纯 XML 文本git diff 可追踪变更。5.2 Windows 踩坑问题解决方案npx在 PowerShell 报错用[cmd, /c, npx, -y, ...]draw.io 桌面版 CLI 不存在用网页版导出或只保存.drawio源文件5.3 工作流写代码 → 需要图表 → 让 AI 用 draw.io MCP 生成浏览器打开 draw.io → 微调节点/颜色 → 保存为.drawio提交.drawio源文件到 git6. 结语MCP 让 AI 从对话助手进化成了工具使用者。draw.io MCP 打通了从代码到图表的最后一公里。未来更多领域的 MCP 工具云架构、BPMN、UML将逐渐出现AI 辅助开发的边界会持续扩展。相关资源draw.io MCP GitHubdraw.io 在线编辑器opencode 官网MCP 协议规范
