Gerando Automaticamente Diagramas de Arquitetura AWS a partir de Templates SAM com o draw.io MCP

Introdução

O servidor MCP (Model Context Protocol) do draw.io foi lançado, então experimentei utilizá-lo para gerar automaticamente diagramas de arquitetura AWS a partir de templates SAM.

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

O Que é MCP?

O MCP (Model Context Protocol) é um protocolo padrão proposto pela Anthropic para conectar assistentes de IA com ferramentas externas. O GitHub Copilot também suporta MCP, permitindo integração com vários serviços e ferramentas externos por meio de servidores MCP.

O servidor MCP do drawio utilizado neste artigo permite que agentes de IA criem e editem diagramas do Draw.io diretamente.

Configuração do Ambiente

1. Instalando a Extensão do VS Code

Primeiro, instale a extensão Draw.io Integration no VS Code.

1. Abra a aba de Extensões no VS Code (Ctrl/Cmd + Shift + X)
2. Pesquise por "Draw.io Integration"
3. Instale "hediet.vscode-drawio"
   

Ou instale diretamente a partir deste link:
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawiohttps://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Esta extensão permite editar e pré-visualizar arquivos .drawio diretamente no VS Code.

2. Configurando o Servidor MCP do drawio

O servidor MCP do drawio pode ser utilizado de duas maneiras:

Método A: Executar com npx (Recomendado)

Adicione o seguinte às configurações do VS Code (settings.json):

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

A flag -y baixa e executa o pacote automaticamente sem confirmação.

Método B: Instalação Global

npm install -g @drawio/mcp

Adicione o seguinte às configurações do VS Code (settings.json):

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

3. Verificando a Configuração

Abra o Copilot Chat e verifique se as ferramentas do servidor drawio estão disponíveis na seção [Configure Tools...] da janela de chat.

Preparando o Template SAM

Para este exemplo, estamos assumindo um template SAM para uma aplicação serverless com os seguintes componentes:

• API Gateway
• Funções Lambda (múltiplas)
• DynamoDB
• Bucket S3
• CloudWatch Logs
• Funções IAM

Gerando Automaticamente Diagramas de Arquitetura

Elaborando o Prompt

Dê a seguinte instrução ao GitHub Copilot Chat:

Analise este template SAM e crie um diagrama de arquitetura AWS no draw.io.

Requisitos:
1. Use ícones AWS oficiais
2. Expresse claramente os relacionamentos entre recursos com setas
3. Se houver VPCs ou grupos de segurança, represente seu agrupamento
4. Crie um layout que facilite a compreensão da direção do fluxo de dados
5. Rotule em português (ou inglês)
6. Gere um arquivo .drawio

As ferramentas do servidor MCP estão sendo utilizadas:

Resultados Gerados

Em segundos, um diagrama de arquitetura AWS é gerado com os seguintes elementos:

• Todos os recursos AWS representados com ícones apropriados
• Relacionamentos de conexão entre funções Lambda e API Gateway
• Padrões de acesso ao DynamoDB
• Propósitos do bucket S3
• Saída de log para o CloudWatch Logs
• Associações de funções IAM com recursos

O arquivo .drawio gerado pode ser aberto e verificado diretamente no VS Code. A extensão Draw.io Integration renderiza visualmente o diagrama no editor, permitindo ajustes manuais conforme necessário.
Exceto por alguns textos e setas sobrepostos, o diagrama de arquitetura AWS ficou quase exatamente como esperado.

Dicas Práticas

1. Verificação e Edição Imediata no VS Code

• Pré-visualização em Tempo Real: Basta clicar no arquivo .drawio gerado para exibir o diagrama dentro do VS Code
• Ajustes Manuais: Faça ajustes finos de posição e mudanças de cor manualmente com base no diagrama gerado pelo GitHub Copilot
• Exportação: Exporte diretamente para PNG, SVG, PDF e outros formatos a partir da extensão
• Exibição Lado a Lado: Exiba templates SAM e diagramas de arquitetura lado a lado para verificar consistência durante o trabalho

2. Gerar Templates Complexos em Partes

Primeiro, crie um diagrama de arquitetura geral.
Em seguida, crie um diagrama detalhado separado da camada de API.

3. Integração com Controle de Versão

Trabalhar dentro do VS Code possibilita o seguinte fluxo de trabalho eficiente:

1. Editar template SAM
2. Gerar diagrama de arquitetura com GitHub Copilot
3. Verificar e ajustar o diagrama no mesmo VS Code
4. Fazer commit do template e do diagrama juntos usando a integração Git

4. Refinamento Gradual

1ª iteração: Gerar arquitetura básica
2ª iteração: Adicionar fluxo de dados
3ª iteração: Visualizar grupos de segurança e políticas IAM
4ª iteração: Adicionar configurações de monitoramento e alertas

Benefícios e Casos de Uso

Benefícios

✅ Redução Significativa de Tempo: Reduza o tempo de criação de diagramas em mais de 90%
✅ Alinhamento Perfeito com IaC: Sem divergência pois é gerado diretamente a partir de templates
✅ Atualizações Contínuas: Os diagramas podem ser atualizados imediatamente quando os templates mudam
✅ Experiência de Desenvolvimento Sem Costuras: Do desenvolvimento à geração e verificação de diagramas dentro do VS Code
✅ Ajustes Manuais Flexíveis: Ajuste fino com a extensão Draw.io com base na geração por IA

Casos de Uso

• 🚀 Criação de documentos de design para novos projetos
• 📝 Organização de documentação para sistemas existentes
• 🔄 Geração automática de documentação em pipelines CI/CD
• 👥 Explicação de arquitetura para membros da equipe
• 📊 Criação de materiais de proposta para clientes

Conclusão

Ao combinar o servidor MCP do drawio com a extensão Draw.io Integration do VS Code, agora podemos gerar automaticamente diagramas de arquitetura AWS a partir de templates SAM. Isso possibilita:

1. Criação Eficiente de Documentação: Dramaticamente mais rápido em comparação com a criação manual
2. Qualidade Melhorada: Garante alinhamento perfeito com IaC
3. Manutenibilidade Aprimorada: Segue imediatamente as mudanças de template
4. Experiência de Desenvolvimento Melhorada: Do desenvolvimento à criação de documentação dentro do VS Code

O fato de que tudo pode ser concluído dentro do VS Code é uma grande vantagem:

• Escrever código
• Gerar diagramas com o GitHub Copilot
• Verificar e editar diagramas no mesmo editor
• Gerenciar juntos com a integração Git

Se você está enfrentando desafios com a documentação do ambiente AWS, especialmente se usa o VS Code como editor principal, experimente isso.

Links de Referência

• drawio MCP Server (npm)
• Draw.io Integration - VS Code Extension
• Model Context Protocol Documentation
• GitHub Copilot Documentation
• AWS SAM Documentation
• draw.io