Generación automática de diagramas de arquitectura AWS desde plantillas SAM con draw.io MCP

Introducción

El servidor MCP (Model Context Protocol) de draw.io ha sido lanzado, así que lo probé para generar automáticamente diagramas de arquitectura AWS a partir de plantillas SAM.

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

¿Qué es MCP?

MCP (Model Context Protocol) es un protocolo estándar propuesto por Anthropic para conectar asistentes de IA con herramientas externas. GitHub Copilot también soporta MCP, permitiendo la integración con diversos servicios y herramientas externas a través de servidores MCP.

El servidor MCP de drawio utilizado en este artículo permite a los agentes de IA crear y editar directamente diagramas de Draw.io.

Configuración del entorno

1. Instalar la extensión de VS Code

Primero, instala la extensión Draw.io Integration en VS Code.

1. Abre la pestaña de Extensiones en VS Code (Ctrl/Cmd + Shift + X)
2. Busca "Draw.io Integration"
3. Instala "hediet.vscode-drawio"
   

O instálala directamente desde este enlace:
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawiohttps://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Esta extensión te permite editar y previsualizar archivos .drawio directamente dentro de VS Code.

2. Configurar el servidor MCP de drawio

El servidor MCP de drawio se puede usar de dos formas:

Método A: Ejecutar con npx (Recomendado)

Añade lo siguiente a la configuración de VS Code (settings.json):

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

El flag -y descarga y ejecuta el paquete automáticamente sin confirmación.

Método B: Instalación global

npm install -g @drawio/mcp

Añade lo siguiente a la configuración de VS Code (settings.json):

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

3. Verificar la configuración

Abre Copilot Chat y verifica que las herramientas del servidor drawio estén disponibles en la sección [Configure Tools...] de la ventana de chat.

Preparar la plantilla SAM

Para este ejemplo, asumimos una plantilla SAM para una aplicación serverless con los siguientes componentes:

• API Gateway
• Funciones Lambda (múltiples)
• DynamoDB
• Bucket S3
• CloudWatch Logs
• Roles IAM

Generación automática de diagramas de arquitectura

Crear el prompt

Proporciona la siguiente instrucción a GitHub Copilot Chat:

Analiza esta plantilla SAM y crea un diagrama de arquitectura AWS en draw.io.

Requisitos:
1. Usa iconos oficiales de AWS
2. Expresa claramente las relaciones entre recursos con flechas
3. Si hay VPCs o grupos de seguridad, representa su agrupación
4. Crea un diseño que haga fácil entender la dirección del flujo de datos
5. Etiqueta en español (o inglés)
6. Genera un archivo .drawio

Las herramientas del servidor MCP están siendo utilizadas:

Resultados generados

En cuestión de segundos, se genera un diagrama de arquitectura AWS con los siguientes elementos:

• Todos los recursos AWS representados con iconos apropiados
• Relaciones de conexión entre funciones Lambda y API Gateway
• Patrones de acceso a DynamoDB
• Propósitos del bucket S3
• Salida de logs a CloudWatch Logs
• Asociaciones entre roles IAM y recursos

El archivo .drawio generado puede abrirse y verificarse directamente dentro de VS Code. La extensión Draw.io Integration renderiza visualmente el diagrama en el editor, permitiendo ajustes manuales según sea necesario.
A excepción de algunos textos y flechas superpuestos, el diagrama de arquitectura AWS es casi exactamente el esperado.

Consejos prácticos

1. Verificación y edición inmediata en VS Code

• Vista previa en tiempo real: Simplemente haz clic en el archivo .drawio generado para mostrar el diagrama dentro de VS Code
• Ajustes manuales: Realiza ajustes finos de posición y cambios de color manualmente basándote en el diagrama generado por GitHub Copilot
• Exportación: Exporta directamente a PNG, SVG, PDF y otros formatos desde la extensión
• Visualización lado a lado: Muestra las plantillas SAM y los diagramas de arquitectura uno al lado del otro para verificar la consistencia mientras trabajas

2. Genera plantillas complejas por partes

Primero, crea un diagrama de arquitectura general.
Luego, crea un diagrama detallado separado de la capa de API.

3. Integración con control de versiones

Trabajar dentro de VS Code permite el siguiente flujo de trabajo eficiente:

1. Editar la plantilla SAM
2. Generar el diagrama de arquitectura con GitHub Copilot
3. Verificar y ajustar el diagrama en el mismo VS Code
4. Confirmar la plantilla y el diagrama juntos usando la integración de Git

4. Refinamiento gradual

1ª iteración: Generar arquitectura básica
2ª iteración: Añadir flujo de datos
3ª iteración: Visualizar grupos de seguridad y políticas IAM
4ª iteración: Añadir configuraciones de monitoreo y alertas

Beneficios y casos de uso

Beneficios

✅ Reducción significativa del tiempo: Reduce el tiempo de creación de diagramas en más de un 90%
✅ Alineación perfecta con IaC: No hay divergencia ya que se genera directamente desde las plantillas
✅ Actualizaciones continuas: Los diagramas pueden actualizarse inmediatamente cuando las plantillas cambian
✅ Experiencia de desarrollo fluida: Completa el desarrollo hasta la generación y verificación de diagramas dentro de VS Code
✅ Ajustes manuales flexibles: Ajusta con la extensión Draw.io basándote en la generación de IA

Casos de uso

• 🚀 Creación de documentos de diseño para nuevos proyectos
• 📝 Organización de documentación para sistemas existentes
• 🔄 Generación automática de documentación en pipelines CI/CD
• 👥 Explicación de arquitecturas a miembros del equipo
• 📊 Creación de materiales de propuesta para clientes

Conclusión

Combinando el servidor MCP de drawio con la extensión Draw.io Integration de VS Code, ahora podemos generar automáticamente diagramas de arquitectura AWS a partir de plantillas SAM. Esto permite:

1. Creación eficiente de documentación: Dramáticamente más rápido comparado con la creación manual
2. Calidad mejorada: Garantiza alineación perfecta con IaC
3. Mantenibilidad mejorada: Sigue inmediatamente los cambios en las plantillas
4. Experiencia de desarrollo mejorada: Completa el desarrollo hasta la creación de documentación dentro de VS Code

El hecho de que todo pueda completarse dentro de VS Code es una gran ventaja:

• Escribir código
• Generar diagramas con GitHub Copilot
• Verificar y editar diagramas en el mismo editor
• Gestionar juntos con Git

Si enfrentas desafíos con la documentación del entorno AWS, especialmente si usas VS Code como editor principal, por favor prueba esto.

Enlaces de referencia

• Servidor MCP de drawio (npm)
• Draw.io Integration - Extensión de VS Code
• Documentación de Model Context Protocol
• Documentación de GitHub Copilot
• Documentación de AWS SAM
• draw.io