Deep Dive : Diagrammen genereren voor AWS met een AI-agent en Draw.io MCP

Om overzicht te krijgen in een infrastructuur is een goed diagram altijd welkom. Maar ze handmatig maken kost tijd: de juiste iconen vinden, elementen positioneren, verbindingen tekenen… Wat mij vandaag boeit, is het vermogen om dat allemaal met AI te automatiseren.

In dit artikel laat ik zien dat het mogelijk is om een AI-agent met de Draw.io MCP te gebruiken om automatisch AWS-architectuurdiagrammen te genereren. Ik gebruik Claude Code in mijn voorbeeld, maar deze aanpak werkt met eender welke agent die MCP ondersteunt.

Uitgangspunt: een oud schema bijwerken

Ik had al een artikel over de infrastructuur van deze blog uit 2018 met een schema dat handmatig in Draw.io gemaakt is. De infrastructuur is niet dramatisch veranderd — ik heb voornamelijk OAC (Origin Access Control) en een CloudFront Function toegevoegd — maar de AWS-iconen zijn geëvolueerd en ik wilde het schema bijwerken naar de nieuwste versies.

Op zoek naar manieren om dit te automatiseren, kwam ik de Draw.io MCP Server tegen met zijn Chrome-extensie. Ik heb het getest… en vond het zo cool dat ik besloot er een artikel over te schrijven om de info te delen!

De MCP Draw.io: Draw.io aansturen met AI

De Draw.io MCP Server gemaakt door Ladislav (lgazo) is een MCP (Model Context Protocol) server die Draw.io programmatisch kan aansturen. Concreet betekent dit dat een AI-agent elementen in een Draw.io-diagram kan creëren, wijzigen en organiseren.

Beschikbare tools

Benodigde configuratie

Om de AI-agent met Draw.io te laten communiceren, moet je twee onderdelen configureren zoals beschreven in de documentatie van het project:

1. Een lokale MCP-server — geconfigureerd in het settings-bestand van je agent (bv. .mcp.json voor Claude Code)
2. De Chrome-extensie Draw.io MCP — die de brug vormt tussen de MCP-server en de Draw.io-app in de browser

Zodra deze twee onderdelen actief zijn, kan de agent het Draw.io-canvas direct manipuleren: shapes aanmaken, positioneren, verbindingen tekenen — allemaal programmatic.

Bij het testen van de MCP Draw.io merkte ik dat je de agent goed moet sturen om een net resultaat te krijgen: geen resources verzinnen, de juiste AWS-iconen gebruiken, consistente positionering respecteren, kleuren per categorie toepassen, geen HTML in teksten gebruiken… Daarom heb ik een skill Claude Code gemaakt die deze regels encodeert.

Aanmaken van de skill /aws-diagram

Een Claude Code-skill is een Markdown-bestand dat een workflow en regels definieert. Wanneer je /aws-diagram aanroept, laadt Claude Code die instructies en past ze automatisch toe.

De workflow

De skill volgt een proces in 4 stappen:

1. De infrastructuurcode lezen (Terraform, CloudFormation)
2. AWS-resources en hun relaties extraheren
3. Het diagram opbouwen met de officiële AWS-iconen
4. De verbindingen toevoegen met beschrijvende labels

## Workflow

1. **Read infrastructure code** (Terraform, CloudFormation, etc.)
2. **Extract AWS resources** and their relationships
3. **Build diagram** with official AWS icons
4. **Add connections** with descriptive labels

Kritieke regels

Ik moest meerdere belangrijke regels in de skill coderen:

1. Nooit resources verzinnen

Dat was de belangrijkste valkuil. LLM’s hebben de neiging om aan te vullen wat logisch lijkt. “Er is CloudFront, dus er zou Lambda@Edge bij horen…” — Nee! Het diagram moet exact weergeven wat in de code staat, niet meer.

### NEVER invent resources

**Only diagram what actually exists in the infrastructure code.**

| Situation                  | Wrong                                         | Correct                                      |
| -------------------------- | --------------------------------------------- | -------------------------------------------- |
| No Lambda in Terraform     | Add Lambda@Edge because "it would make sense" | Don't add Lambda                             |
| CloudFront Function exists | Use Lambda icon                               | Use CloudFront icon with "CF Function" label |
| No WAF configured          | Add WAF for "security"                        | Don't add WAF                                |

2. Gebruikers zijn extern

De “Users” zijn geen AWS-resources. Ze moeten buiten de AWS-cloudgroep verschijnen.

### Users OUTSIDE the AWS Cloud

**Users are NOT AWS resources.** They represent external actors.

WRONG:
┌─────────────────────────────────┐
│ AWS Cloud │
│ [Users] → [Route53] → [CF] │ ❌ Users inside cloud
└─────────────────────────────────┘

CORRECT:
[Users] → ┌─────────────────────────┐
│ AWS Cloud │
│ [Route53] → [CF] → [S3] │ ✅ Users outside
└─────────────────────────┘

3. Geen HTML in teksten

Draw.io rendert geen HTML. Als je text: "S3<br>Private" schrijft, zie je letterlijk <br> in het diagram.

### NEVER use HTML in text parameters

Draw.io does NOT render HTML tags in text fields. They display as raw text.

**FORBIDDEN (will show ugly raw HTML):**

text: "S3 Bucket<br>Private" ❌ Shows "<br>" literally
text: "Route 53&nbsp;DNS" ❌ Shows "&nbsp;" literally
text: "<font color='red'>ACM</font>" ❌ Shows raw HTML tags

**CORRECT (clean text):**

text: "S3 Bucket" ✅ Single line, clean
text: "Route 53" ✅ Service name only
text: "ACM" ✅ Simple label

4. Layout plannen om botsingen te vermijden

Kruisende edges maken het diagram onleesbaar. De skill raadt aan om de hoofdflow op een horizontale lijn te plaatsen en hulpdiensten boven of onder te zetten.

### Rule 1: Main Flow on a Horizontal Line

Place the primary data flow (request path) on a single horizontal row:

[Entry] → [Service A] → [Service B] → [Service C]
y=300 y=300 y=300 y=300

### Rule 2: Auxiliary Services Above or Below

Services that connect TO a main service (not part of the flow) go above or below:

        [Auth]     [Edge Logic]     ← Auxiliary row (y=150)
           \           /
            \         /
             ↓       ↓

[Entry] → [Gateway] → [Compute] → [Storage] ← Main flow (y=300)

5. Annotaties aan de rechterkant, niet eronder

AWS-iconen hebben hun label automatisch onderaan geplaatst. Als je daar ook annotaties onder zet, overlappen ze de volgende regel. Plaats annotaties rechts van het icoon.

### Annotation Placement Rules

**CRITICAL: Place annotations to the RIGHT of icons, not below.**

**WRONG - Annotations below icons:**

[CloudFront] [S3]
|
"Cache Policies" ← Overlaps with next row!
"Security Headers"
|
[CloudFront Preview] ← Collision!

**CORRECT - Annotations to the RIGHT:**

[CloudFront] ── "Cache Policies: HTML 0s | Assets 1y"
| "Security: CSP | HSTS"
↓
[CloudFront Preview] ← No collision

Het kleurensysteem

Ik heb een consistente palette gedefinieerd volgens AWS-conventies:

Voor datastromen gebruik ik omgevingskleuren:

• Productie : groen #4CAF50
• Preview : oranje #FF9800
• Configuratie : grijs #AAAAAA (gestreept)

### Colors by Category

| Category       | Color               | Services                                   |
| -------------- | ------------------- | ------------------------------------------ |
| **Networking** | `#8C4FFF` (violet)  | Route53, CloudFront, VPC, ELB, API Gateway |
| **Compute**    | `#ED7100` (orange)  | Lambda, EC2, ECS, Fargate                  |
| **Storage**    | `#7AA116` (green)   | S3, EFS, EBS                               |
| **Database**   | `#C925D1` (magenta) | RDS, DynamoDB, ElastiCache                 |
| **Security**   | `#DD344C` (red)     | ACM, IAM, WAF, Cognito                     |
| **General**    | `#232F3D` (gray)    | Users, Generic                             |

### AWS Icon Style Template

sketch=0;outlineConnect=0;fontColor=#232F3E;fillColor=<COLOR>;strokeColor=#ffffff;
dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;
fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;
resIcon=mxgraph.aws4.<SERVICE>;

### Edge Colors by Environment

| Environment   | Color     | Usage                  |
| ------------- | --------- | ---------------------- |
| Production    | `#4CAF50` | Main production flow   |
| Preview       | `#FF9800` | Staging environments   |
| Configuration | `#AAAAAA` | Dashed, non-data links |

Praktische toepassing: de infrastructuur van jls42.org

Om de skill te testen heb ik hem gebruikt op de infrastructuur van deze blog.

De geanalyseerde Terraform-code

terraform/
├── cloudfront-astro.tf    # Distribution CloudFront prod
├── s3-astro.tf            # Bucket S3 privé avec OAC
├── acm-astro.tf           # Certificat SSL
├── route53.tf             # DNS
└── variables.tf           # Variables

De geëxtraheerde architectuur

Het gegenereerde diagram

Hier is het eindresultaat:

Vanuit een eenvoudige natuurlijke taal prompt:

«Analyse en profondeur l’infrastructure de ce projet puis réalise un super schéma de l’architecture AWS comme un pro. Juste l’infra de prod, pas preview ni legacy.»

🇳🇱 “Analyseer grondig de infrastructuur van dit project en maak vervolgens een professioneel diagram van de AWS-architectuur. Alleen de productie-infrastructuur, geen preview of legacy.”

Claude Code analyseerde eerst de Terraform-bestanden om de infrastructuur te identificeren, en laadde daarna de skill /aws-diagram waarvan de instructies het volgende mogelijk maakten:

1. De hoofdcomponenten creëren (Users, Route53, CloudFront, S3, ACM)
2. Gedetailleerde annotaties toevoegen (cache policies, security headers, bucket-config…)
3. Verbindingen tekenen met labels (HTTPS, DNS Alias, OAC, TLS Cert…)
4. Externe diensten toevoegen (Plausible Analytics, Gandi voor e-mails)
5. Een legenda per categorie genereren

Alles volgens een nette layout met:

• De AWS-cloud automatisch geschaald (900×420px)
• Users links van de cloud
• Externe services rechts
• Een legenda onder het diagram

De volledige workflow: van Terraform naar video

Ik heb de ervaring verder uitgebreid door een demonstratievideo te maken.

Opname

Ik heb de generatie van het diagram realtime opgenomen: 4 minuten en 10 seconden van Claude Code die het Terraform leest, de elementen één voor één aanmaakt en het diagram voor mijn ogen opbouwt.

Nabewerking met FFmpeg

4 minuten is lang voor een demo. Ik gebruikte FFmpeg om een versnelde versie met variabele snelheden te maken:

Resultaat: een video van 42 seconden in plaats van 4 minuten, waarbij de sleutelmomenten op normale snelheid blijven.

Vertelling met HeyGen

Om een voice-over toe te voegen, schreef ik een narratiescript, sneed de video in segmenten van 30 seconden (HeyGen-limiet) en genereerde de spraak in het Frans. De standaardstemmen voldeden niet helemaal, dus gebruikte ik hun functie voor vocal design, waarmee je in een prompt een stem kunt finetunen tot de juiste toon.

Het eindresultaat is de video die je bovenaan dit artikel kunt bekijken.

Tweede voorbeeld: Hoge beschikbaarheid EKS-architectuur

Om te laten zien hoe goed de MCP Draw.io werkt, een tweede, complexer voorbeeld: een EKS (Elastic Kubernetes Service) architectuur met hoge beschikbaarheid. De MCP doet al het werk in Draw.io — ik hoefde alleen een gedetailleerde prompt te geven.

Ditmaal gaf ik een uitgebreide prompt die de gewenste architectuur beschrijft:

Architecture EKS Hautement Disponible

Génère un diagramme d'architecture AWS EKS avec les composants suivants :

## Services AWS à inclure

### Externes (gauche du cloud)

- Users (icône utilisateurs générique)

### Networking

- Route 53 (DNS)
- Application Load Balancer (ALB) - dans les subnets publics
- NAT Gateway (3x, un par AZ)
- VPC avec 3 AZ

### Compute (subnets privés)

- EKS Control Plane (géré par AWS - représenter séparément)
- 3 Node Groups (un par AZ) avec pods à l'intérieur

### Storage

- EFS (stockage partagé cross-AZ)

### Security

- ACM (Certificate Manager)
- IAM (pour Pod Identity / IRSA)

### Observability

- CloudWatch (logs et métriques)

## Connexions à tracer

| Source            | Target      | Label               | Style       |
| ----------------- | ----------- | ------------------- | ----------- |
| Users             | Route 53    | HTTPS               | Solid green |
| Route 53          | ALB         | DNS Alias           | Solid green |
| ALB               | Node Groups | Traffic             | Solid green |
| ACM               | ALB         | TLS                 | Dashed gray |
| Node Groups       | EFS         | NFS Mount           | Solid green |
| EKS Control Plane | Node Groups | kubectl API         | Solid green |
| EKS Control Plane | IAM         | IRSA / Pod Identity | Dashed gray |
| Node Groups       | CloudWatch  | Logs / Metrics      | Dashed gray |

Het gegenereerde resultaat

Dit diagram toont een productieklare Kubernetes-architectuur met:

• 3 Availability Zones voor hoge beschikbaarheid
• Redundante NAT Gateways (één per AZ) voor uitgaand internetverkeer
• Node Groups verspreid met pods in elke AZ
• EFS cross-AZ voor gedeelde persistente opslag
• AWS-managed Control Plane visueel gescheiden
• IRSA (IAM Roles for Service Accounts) voor podbeveiliging

De MCP Draw.io interpreteerde de structuur correct door VPC- en AZ-groepen te maken, de NAT Gateways in publieke subnets te positioneren en de Node Groups in private subnets te plaatsen. Het resultaat biedt een uitstekende basis om verder te verfijnen naar persoonlijke voorkeuren of om eventuele fouten te corrigeren — veel sneller dan van nul beginnen.

Wat dit project onthult

Deze ervaring illustreert verschillende aspecten van mijn manier van werken:

• Documentatie automatiseren: de code is de bron van waarheid, het diagram moet er automatisch uit volgen
• De juiste tools gebruiken: de MCP Draw.io was precies wat ik nodig had, ik hoefde het wiel niet opnieuw uit te vinden
• Regels coderen: skills leggen expertise vast en vermijden veelgemaakte fouten — toepasbaar op elk type Draw.io-diagram, niet alleen AWS
• Op concrete gevallen testen: ik gebruikte mijn eigen infrastructuur als testveld
• Verder verkennen: van automatische generatie tot de vertoonde video, elke stap was een leermoment

De skill zit nu in mijn workflow ingebakken. De volgende keer dat ik de infrastructuur wijzig, kan ik het diagram hergenereren met één eenvoudige prompt.

Bronnen

• Draw.io MCP Server door Ladislav (lgazo)
• MCP - Model Context Protocol door Anthropic
• Claude Code — de CLI-tool die ik dagelijks gebruik

Als je een code-agent gebruikt die MCP-compatibel is en infrastructuren hebt om te documenteren, moedig ik je aan deze aanpak te proberen. Het is bevredigend om een netjes diagram automatisch voor je te zien opbouwen.

Dank dat je het gelezen hebt, ik hoop dat dit artikel je inspireert om te experimenteren!

Dit document is vertaald van de Franse versie naar de Nederlandse taal met behulp van het model gpt-5-mini. Voor meer informatie over het vertaalproces, raadpleeg https://gitlab.com/jls42/ai-powered-markdown-translator