使用 opencode + draw.io MCP 实现流程图绘制 — 从配置到实战

AI 不仅能帮你写代码，还能帮你画图。本文介绍如何在 opencode 中接入官方 draw.io MCP，让 AI 直接生成可编辑的流程图、架构图和数据流图。

---

1. 什么是 MCP

MCP（Model Context Protocol）是 Anthropic 提出的开放协议，用于标准化 AI 模型与外部工具之间的通信。有了 MCP，AI 可以直接调用 draw.io 编辑器——生成的不是文本，而是一个可以立即查看、编辑的 diagram URL。

---

2. 环境搭建

2.1 前置条件

确保你已经安装了 opencode 和 Node.js（npx 需要）。

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_xml	draw.io XML	架构图、网络拓扑、云服务部署图	高（完全控制）
open_drawio_mermaid	Mermaid.js 语法	流程图、时序图、ER 图、状态图	低（自动布局）
open_drawio_csv	CSV 表格	组织架构图、角色矩阵	中（表格驱动）

选择建议： 流程图优先用 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 工作流

1. 写代码 → 需要图表 → 让 AI 用 draw.io MCP 生成
2. 浏览器打开 draw.io → 微调节点/颜色 → 保存为 .drawio
3. 提交 .drawio 源文件到 git

---

6. 结语

MCP 让 AI 从"对话助手"进化成了"工具使用者"。draw.io MCP 打通了从代码到图表的最后一公里。未来，更多领域的 MCP 工具（云架构、BPMN、UML）将逐渐出现，AI 辅助开发的边界会持续扩展。

---

相关资源：

• draw.io MCP GitHub
• draw.io 在线编辑器
• opencode 官网
• MCP 协议规范