Codex × Draw.io MCP：AI 自动绘制架构图

难度：🟢 入门级
耗时：⏱️ 8 分钟
适用环境：Codex / Claude Code / Antigravity

---

1. 场景价值与交付产物预览

在技术评审或系统方案设计中，手动在 Draw.io / Visio 中拖拽组件连线往往耗费半天时间，且稍有变更就需要全盘重排。通过 Draw.io MCP (Model Context Protocol) 服务，Agent 可以理解你的服务依赖与数据流向，自动生成标准的 Draw.io XML 图表文件或嵌入式图片。

• 输入：一段纯文本架构描述或微服务调用链路说明。
• 输出成果：可直接在 app.diagrams.net 导入并二次拖拽编辑的 .drawio / .xml 架构图。

---

2. 前置准备与环境配置

在本地或 Agent 全局配置中启用 Draw.io MCP Server：

# 确保 Node.js 具备 npx 运行环境
npx -y @modelcontextprotocol/server-everything --version

---

3. 核心配置文件 (开箱即用)

在你的 MCP 配置文件（如 ~/.codex/mcp.json 或 Claude Desktop 配置）中添加：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server"],
      "env": {
        "OUTPUT_DIR": "./diagrams"
      }
    }
  }
}

---

4. 黄金 Prompt 指令流

将以下 Prompt 复制发送给 Agent：

你是一名资深云原生架构师与系统拓扑设计专家。
请根据以下电商中台的技术架构描述，调用 Draw.io MCP 生成一份高清晰度微服务架构图：

【系统层级规范】：
1. 用户客户端层：包含 iOS App、Android App 与 Web 官网；
2. 接入网关层：Cloudflare CDN -> Nginx API Gateway（限流、鉴权、SSL 卸载）；
3. 核心微服务集群：
   - 订单服务 (Order Service)
   - 支付网关服务 (Payment Service)
   - 库存与履约服务 (Inventory Service)
   - 用户与会员服务 (User Service)
4. 数据基础设施层：
   - Redis 集群（热点缓存与分布式锁）
   - MySQL 读写分离集群
   - Kafka 消息总线（异步解耦）

【视觉排版要求】：
- 从上到下使用清晰的泳道分组（Layered Swimlanes）；
- 服务间请求连线标明协议（HTTP / gRPC / PubSub）；
- 核心数据库与存储使用圆柱体图元，重要链路使用醒目的连线高亮；
- 输出保存为 `architecture.drawio`。

---

5. 排障与避坑指南 (Troubleshooting)

1. Draw.io 提示 XML 格式非法无法打开：
   • 原因：大模型偶尔在 XML 头部生成了多余的 Markdown 标记代码块。
   • 解法：检查文件首尾，确保以 <?xml 或 <mxfile> 开头并以 </mxfile> 闭合。
2. 节点过多导致重叠：
   • 解法：在 Prompt 中指定布局算法参数（如 layout: hierarchical, spacing: 60）。

---

6. 示例源码与产物资源

• 📁 示例架构图 XML 源码：samples/drawio-ecommerce.xml
• 💡 有定制图形样式需求？在社区提交你的建议