Einführung
Der draw.io MCP (Model Context Protocol) Server wurde veröffentlicht, daher habe ich versucht, ihn zur automatischen Generierung von AWS-Architekturdiagrammen aus SAM-Templates zu verwenden.
https://x.com/drawio/status/2020918870375370825
Was ist MCP?
MCP (Model Context Protocol) ist ein von Anthropic vorgeschlagenes Standardprotokoll zur Verbindung von KI-Assistenten mit externen Tools. GitHub Copilot unterstützt ebenfalls MCP und ermöglicht die Integration mit verschiedenen externen Diensten und Tools über MCP-Server.
Der in diesem Artikel verwendete drawio MCP-Server ermöglicht es KI-Agenten, Draw.io-Diagramme direkt zu erstellen und zu bearbeiten.
Umgebungseinrichtung
1. VS Code Extension installieren
Installieren Sie zunächst die Draw.io Integration-Erweiterung in VS Code.
- Öffnen Sie den Extensions-Tab in VS Code (Ctrl/Cmd + Shift + X)
- Suchen Sie nach „Draw.io Integration"
- Installieren Sie „hediet.vscode-drawio"
Oder installieren Sie es direkt über diesen Link: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
Diese Erweiterung ermöglicht das direkte Bearbeiten und Vorschauen von .drawio-Dateien in VS Code.
2. Den drawio MCP-Server einrichten
Der drawio MCP-Server kann auf zwei Arten verwendet werden:
| Element | Methode A: npx-Ausführung (Empfohlen) | Methode B: Globale Installation |
|---|---|---|
| Vorbereitung | Nicht erforderlich | npm install -g @drawio/mcp |
| Startgeschwindigkeit | Beim ersten Start langsam (Download), danach Cache-Nutzung | Schnell |
| Versionsverwaltung | Holt immer automatisch die neueste Version | Manuelles npm update -g erforderlich |
| Umgebungsauswirkung | Verschmutzt die globale Umgebung nicht | Fügt Paket global hinzu |
| Geeignet für | Erstanwender, die eine saubere Umgebung bevorzugen | Tägliche Nutzer, die Startgeschwindigkeit priorisieren |
Methode A: Mit npx ausführen (Empfohlen)
Fügen Sie Folgendes zu den VS Code-Einstellungen (settings.json) hinzu:
{
"github.copilot.chat.mcp.servers": {
"drawio": {
"command": "npx",
"args": ["-y", "@drawio/mcp"]
}
}
}
Das Flag -y lädt das Paket automatisch herunter und führt es ohne Bestätigung aus.
Methode B: Globale Installation
npm install -g @drawio/mcp
Fügen Sie Folgendes zu den VS Code-Einstellungen (settings.json) hinzu:
{
"github.copilot.chat.mcp.servers": {
"drawio": {
"command": "drawio-mcp"
}
}
}
3. Einrichtung überprüfen
Öffnen Sie Copilot Chat und überprüfen Sie, ob die drawio-Server-Tools im Abschnitt [Configure Tools...] des Chat-Fensters verfügbar sind.
Das SAM-Template vorbereiten
Für dieses Beispiel nehmen wir ein SAM-Template für eine serverlose Anwendung mit folgenden Komponenten an:
- API Gateway
- Lambda-Funktionen (mehrere)
- DynamoDB
- S3-Bucket
- CloudWatch Logs
- IAM-Rollen
Architekturdiagramme automatisch generieren
Den Prompt formulieren
Geben Sie GitHub Copilot Chat folgende Anweisung:
Analysiere dieses SAM-Template und erstelle ein AWS-Architekturdiagramm in draw.io.
Anforderungen:
1. Offizielle AWS-Icons verwenden
2. Beziehungen zwischen Ressourcen deutlich mit Pfeilen darstellen
3. Falls VPCs oder Security Groups vorhanden sind, deren Gruppierung darstellen
4. Ein Layout erstellen, das die Richtung des Datenflusses leicht verständlich macht
5. Beschriftung auf Deutsch (oder Englisch)
6. Eine .drawio-Datei ausgeben
Die MCP-Server-Tools werden verwendet:
Generierte Ergebnisse
Innerhalb von Sekunden wird ein AWS-Architekturdiagramm mit folgenden Elementen generiert:
- Alle AWS-Ressourcen mit passenden Icons dargestellt
- Verbindungsbeziehungen zwischen Lambda-Funktionen und API Gateway
- DynamoDB-Zugriffsmuster
- S3-Bucket-Zwecke
- Log-Ausgabe an CloudWatch Logs
- IAM-Rollen- und Ressourcenzuordnungen
Die generierte .drawio-Datei kann direkt in VS Code geöffnet und überprüft werden. Die Draw.io Integration-Erweiterung rendert das Diagramm visuell im Editor und ermöglicht bei Bedarf manuelle Feinabstimmungen.
Abgesehen von einigen überlappenden Texten und Pfeilen entspricht das AWS-Architekturdiagramm fast genau den Erwartungen.
Praktische Tipps
1. Sofortige Überprüfung und Bearbeitung in VS Code
- Echtzeit-Vorschau: Klicken Sie einfach auf die generierte
.drawio-Datei, um das Diagramm in VS Code anzuzeigen - Manuelle Anpassungen: Nehmen Sie feine Positions- und Farbanpassungen manuell am von GitHub Copilot generierten Diagramm vor
- Export: Direkt aus der Erweiterung in PNG, SVG, PDF und andere Formate exportieren
- Nebeneinander-Anzeige: SAM-Templates und Architekturdiagramme nebeneinander anzeigen, um während der Arbeit die Konsistenz zu überprüfen
2. Komplexe Templates in Teilen generieren
Erstelle zuerst ein Gesamtarchitekturdiagramm.
Erstelle dann ein separates Detaildiagramm der API-Schicht.
3. Versionskontrolle integrieren
Das Arbeiten in VS Code ermöglicht folgenden effizienten Workflow:
- SAM-Template bearbeiten
- Architekturdiagramm mit GitHub Copilot generieren
- Diagramm im gleichen VS Code überprüfen und feinabstimmen
- Template und Diagramm gemeinsam mit Git-Integration committen
4. Schrittweise Verfeinerung
1. Iteration: Grundlegende Architektur generieren
2. Iteration: Datenfluss hinzufügen
3. Iteration: Security Groups und IAM-Richtlinien visualisieren
4. Iteration: Monitoring- und Alert-Konfigurationen hinzufügen
Vorteile und Anwendungsfälle
Vorteile
✅ Erhebliche Zeitersparnis: Diagrammerstellungszeit um über 90% reduzieren
✅ Perfekte Übereinstimmung mit IaC: Keine Abweichung, da direkt aus Templates generiert
✅ Kontinuierliche Aktualisierungen: Diagramme können sofort aktualisiert werden, wenn Templates sich ändern
✅ Nahtlose Entwicklungserfahrung: Gesamte Entwicklung bis zur Diagrammgenerierung und -überprüfung in VS Code
✅ Flexible manuelle Anpassungen: Feinabstimmung mit Draw.io-Erweiterung auf Basis der KI-Generierung
Anwendungsfälle
- 🚀 Designdokumente für neue Projekte erstellen
- 📝 Dokumentation bestehender Systeme organisieren
- 🔄 Automatische Dokumentationsgenerierung in CI/CD-Pipelines
- 👥 Architektur für Teammitglieder erklären
- 📊 Angebotsmaterialien für Kunden erstellen
Fazit
Durch die Kombination des drawio MCP-Servers mit der Draw.io Integration-Erweiterung für VS Code können wir nun automatisch AWS-Architekturdiagramme aus SAM-Templates generieren. Dies ermöglicht:
- Effiziente Dokumentationserstellung: Dramatisch schneller im Vergleich zur manuellen Erstellung
- Verbesserte Qualität: Garantiert perfekte Übereinstimmung mit IaC
- Verbesserte Wartbarkeit: Folgt sofort Template-Änderungen
- Verbesserte Entwicklungserfahrung: Gesamte Entwicklung bis zur Dokumentationserstellung in VS Code
Die Tatsache, dass alles in VS Code erledigt werden kann, ist ein großer Vorteil:
- Code schreiben
- Diagramme mit GitHub Copilot generieren
- Diagramme im gleichen Editor überprüfen und bearbeiten
- Gemeinsam mit Git verwalten
Wenn Sie vor Herausforderungen bei der AWS-Umgebungsdokumentation stehen, insbesondere wenn Sie VS Code als Haupteditor verwenden, probieren Sie es aus.