使用 draw.io MCP 从 SAM 模板自动生成 AWS 架构图

介绍

draw.io MCP（Model Context Protocol）服务器已经发布，我尝试用它从 SAM 模板自动生成 AWS 架构图。

https://x.com/drawio/status/2020918870375370825https://x.com/drawio/status/2020918870375370825

什么是 MCP？

MCP（Model Context Protocol）是 Anthropic 提出的用于连接 AI 助手与外部工具的标准协议。GitHub Copilot 也支持 MCP，允许通过 MCP 服务器与各种外部服务和工具集成。

本文中使用的 drawio MCP 服务器使 AI 代理能够直接创建和编辑 Draw.io 图表。

环境设置

1. 安装 VS Code 扩展

首先，在 VS Code 中安装 Draw.io 集成扩展。

1. 在 VS Code 中打开扩展标签（Ctrl/Cmd + Shift + X）
2. 搜索"Draw.io Integration"
3. 安装"hediet.vscode-drawio"
   

或从以下链接直接安装：
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawiohttps://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

此扩展允许你直接在 VS Code 中编辑和预览 .drawio 文件。

2. 设置 drawio MCP 服务器

drawio MCP 服务器有两种使用方式：

方式 A：使用 npx 执行（推荐）

在 VS Code 设置（settings.json）中添加以下内容：

{
  "github.copilot.chat.mcp.servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"]
    }
  }
}

-y 标志会自动下载并执行包，无需确认。

方式 B：全局安装

npm install -g @drawio/mcp

在 VS Code 设置（settings.json）中添加以下内容：

{
  "github.copilot.chat.mcp.servers": {
    "drawio": {
      "command": "drawio-mcp"
    }
  }
}

3. 验证设置

打开 Copilot Chat，在聊天窗口的 [配置工具...] 部分确认 drawio 服务器工具可用。

准备 SAM 模板

本示例假设使用以下组件的无服务器应用 SAM 模板：

• API Gateway
• Lambda 函数（多个）
• DynamoDB
• S3 存储桶
• CloudWatch Logs
• IAM 角色

自动生成架构图

编写提示词

向 GitHub Copilot Chat 提供以下指令：

分析这个 SAM 模板，在 draw.io 中创建一个 AWS 架构图。

要求：
1. 使用官方 AWS 图标
2. 用箭头清晰表示资源之间的关系
3. 如果有 VPC 或安全组，表示它们的分组
4. 创建便于理解数据流方向的布局
5. 用日语（或英语）标注
6. 输出 .drawio 文件

MCP 服务器工具正在使用中：

生成结果

在几秒钟内，生成了包含以下元素的 AWS 架构图：

• 所有 AWS 资源均以适当图标表示
• Lambda 函数与 API Gateway 之间的连接关系
• DynamoDB 访问模式
• S3 存储桶用途
• 输出日志到 CloudWatch Logs
• IAM 角色与资源关联

生成的 .drawio 文件可以直接在 VS Code 中打开并验证。Draw.io 集成扩展在编辑器中直观渲染图表，允许根据需要手动微调。
除了一些文字和箭头重叠外，AWS 架构图与预期几乎完全一致。

实用技巧

1. 在 VS Code 中即时验证和编辑

• 实时预览：只需点击生成的 .drawio 文件即可在 VS Code 中显示图表
• 手动调整：基于 GitHub Copilot 生成的图表手动进行位置微调和颜色修改
• 导出：直接从扩展导出为 PNG、SVG、PDF 等格式
• 并排显示：将 SAM 模板和架构图并排显示，在工作时验证一致性

2. 分步生成复杂模板

首先，创建整体架构图。
接下来，为 API 层分别创建详细图表。

3. 版本控制集成

在 VS Code 中工作能够实现以下高效工作流：

1. 编辑 SAM 模板
2. 使用 GitHub Copilot 生成架构图
3. 在同一个 VS Code 中验证和微调图表
4. 使用 Git 集成将模板和图表一起提交

4. 逐步细化

第 1 次迭代：生成基本架构
第 2 次迭代：添加数据流
第 3 次迭代：可视化安全组和 IAM 策略
第 4 次迭代：添加监控和告警配置

优势与使用场景

优势

✅ 显著节省时间：减少 90% 以上的图表创建时间
✅ 与 IaC 完美对齐：直接从模板生成，不会产生偏差
✅ 持续更新：模板更改时可立即更新图表
✅ 无缝开发体验：在 VS Code 中完成从开发到图表生成和验证的全过程
✅ 灵活的手动调整：基于 AI 生成内容使用 Draw.io 扩展进行微调

使用场景

• 🚀 为新项目创建设计文档
• 📝 整理现有系统的文档
• 🔄 CI/CD 流水线中的自动文档生成
• 👥 向团队成员解释架构
• 📊 为客户创建提案材料

结论

通过将 drawio MCP 服务器与 VS Code 的 Draw.io 集成扩展相结合，我们现在可以从 SAM 模板自动生成 AWS 架构图。这实现了：

1. 高效文档创建：与手动创建相比速度大幅提升
2. 质量提升：保证与 IaC 的完美对齐
3. 可维护性增强：立即跟随模板更改
4. 开发体验改善：在 VS Code 中完成从开发到文档创建的全过程

一切都能在 VS Code 中完成这一点是一个重大优势：

• 编写代码
• 使用 GitHub Copilot 生成图表
• 在同一编辑器中验证和编辑图表
• 使用 Git 一起管理

如果你在面临 AWS 环境文档方面的挑战，特别是将 VS Code 作为主编辑器的话，请务必尝试一下。

参考链接

• drawio MCP Server (npm)
• Draw.io Integration - VS Code 扩展
• Model Context Protocol 文档
• GitHub Copilot 文档
• AWS SAM 文档
• draw.io