Génération automatique de diagrammes d'architecture AWS à partir de templates SAM avec draw.io MCP

Introduction

Le serveur MCP (Model Context Protocol) de draw.io vient d'être publié, alors j'ai essayé de l'utiliser pour générer automatiquement des diagrammes d'architecture AWS à partir de templates SAM.

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

Qu'est-ce que MCP ?

MCP (Model Context Protocol) est un protocole standard proposé par Anthropic pour connecter les assistants IA avec des outils externes. GitHub Copilot supporte également MCP, permettant l'intégration avec divers services et outils externes via des serveurs MCP.

Le serveur MCP drawio utilisé dans cet article permet aux agents IA de créer et modifier directement des diagrammes Draw.io.

Configuration de l'environnement

1. Installation de l'extension VS Code

Commencez par installer l'extension Draw.io Integration dans VS Code.

1. Ouvrez l'onglet Extensions dans VS Code (Ctrl/Cmd + Shift + X)
2. Recherchez « Draw.io Integration »
3. Installez « hediet.vscode-drawio »
   

Ou installez directement depuis ce lien :
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawiohttps://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Cette extension vous permet d'éditer et prévisualiser directement les fichiers .drawio dans VS Code.

2. Configuration du serveur MCP drawio

Le serveur MCP drawio peut être utilisé de deux manières :

Méthode A : Exécuter avec npx (Recommandée)

Ajoutez ce qui suit aux paramètres VS Code (settings.json) :

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

Le flag -y télécharge et exécute automatiquement le package sans confirmation.

Méthode B : Installation globale

npm install -g @drawio/mcp

Ajoutez ce qui suit aux paramètres VS Code (settings.json) :

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

3. Vérification de la configuration

Ouvrez Copilot Chat et vérifiez que les outils du serveur drawio sont disponibles dans la section [Configurer les outils...] de la fenêtre de chat.

Préparation du template SAM

Pour cet exemple, nous partons d'un template SAM pour une application serverless avec les composants suivants :

• API Gateway
• Fonctions Lambda (multiples)
• DynamoDB
• Bucket S3
• CloudWatch Logs
• Rôles IAM

Génération automatique des diagrammes d'architecture

Formulation du prompt

Donnez l'instruction suivante à GitHub Copilot Chat :

Analyse ce template SAM et crée un diagramme d'architecture AWS dans draw.io.

Exigences :
1. Utiliser les icônes officielles AWS
2. Exprimer clairement les relations entre les ressources avec des flèches
3. Si des VPC ou des groupes de sécurité existent, représenter leur regroupement
4. Créer une disposition qui facilite la compréhension du sens du flux de données
5. Libellés en français (ou en anglais)
6. Générer un fichier .drawio

Les outils du serveur MCP sont utilisés :

Résultats générés

En quelques secondes, un diagramme d'architecture AWS est généré avec les éléments suivants :

• Toutes les ressources AWS représentées avec les icônes appropriées
• Relations de connexion entre les fonctions Lambda et API Gateway
• Schémas d'accès à DynamoDB
• Objectifs des buckets S3
• Sortie des logs vers CloudWatch Logs
• Associations entre rôles IAM et ressources

Le fichier .drawio généré peut être ouvert et vérifié directement dans VS Code. L'extension Draw.io Integration affiche le diagramme visuellement dans l'éditeur, permettant des ajustements manuels au besoin.
À l'exception de quelques chevauchements de texte et de flèches, le diagramme d'architecture AWS est presque exactement conforme aux attentes.

Conseils pratiques

1. Vérification et édition immédiates dans VS Code

• Aperçu en temps réel : Cliquez simplement sur le fichier .drawio généré pour afficher le diagramme dans VS Code
• Ajustements manuels : Effectuez des ajustements fins de position et de couleur manuellement à partir du diagramme généré par GitHub Copilot
• Export : Exportez directement aux formats PNG, SVG, PDF, et autres depuis l'extension
• Affichage côte à côte : Affichez les templates SAM et les diagrammes d'architecture côte à côte pour vérifier la cohérence tout en travaillant

2. Générer les templates complexes par parties

D'abord, créez un diagramme d'architecture global.
Ensuite, créez un diagramme détaillé séparé de la couche API.

3. Intégration avec le contrôle de version

Travailler dans VS Code permet le workflow efficace suivant :

1. Éditer le template SAM
2. Générer le diagramme d'architecture avec GitHub Copilot
3. Vérifier et affiner le diagramme dans le même VS Code
4. Committer le template et le diagramme ensemble avec l'intégration Git

4. Raffinement progressif

1ère itération : Générer l'architecture de base
2ème itération : Ajouter les flux de données
3ème itération : Visualiser les groupes de sécurité et les politiques IAM
4ème itération : Ajouter les configurations de monitoring et d'alertes

Avantages et cas d'utilisation

Avantages

✅ Réduction significative du temps : Réduire le temps de création de diagrammes de plus de 90 %
✅ Alignement parfait avec l'IaC : Pas de divergence car généré directement depuis les templates
✅ Mises à jour continues : Les diagrammes peuvent être mis à jour immédiatement lors des modifications de templates
✅ Expérience de développement fluide : Du développement à la génération et vérification de diagrammes, tout se passe dans VS Code
✅ Ajustements manuels flexibles : Affinez avec l'extension Draw.io basée sur la génération IA

Cas d'utilisation

• 🚀 Création de documents de conception pour de nouveaux projets
• 📝 Organisation de la documentation pour les systèmes existants
• 🔄 Génération automatique de documentation dans les pipelines CI/CD
• 👥 Expliquer l'architecture aux membres de l'équipe
• 📊 Création de matériaux de présentation pour les clients

Conclusion

En combinant le serveur MCP drawio avec l'extension Draw.io Integration de VS Code, nous pouvons désormais générer automatiquement des diagrammes d'architecture AWS à partir de templates SAM. Cela permet :

1. Création efficace de documentation : Dramatiquement plus rapide qu'une création manuelle
2. Qualité améliorée : Garantit un alignement parfait avec l'IaC
3. Maintenabilité améliorée : Suit immédiatement les modifications de templates
4. Expérience de développement améliorée : Du développement à la création de documentation, tout se passe dans VS Code

Le fait que tout puisse être accompli dans VS Code est un avantage majeur :

• Écrire le code
• Générer des diagrammes avec GitHub Copilot
• Vérifier et éditer les diagrammes dans le même éditeur
• Gérer ensemble avec l'intégration Git

Si vous rencontrez des difficultés avec la documentation de votre environnement AWS, en particulier si vous utilisez VS Code comme éditeur principal, essayez cette approche.

Liens de référence

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