Deep Dive: Generera AWS-diagram med en AI-agent och Draw.io MCP

För att få klarhet i en infrastruktur är ett bra diagram alltid uppskattat. Men att skapa dem för hand tar tid: hitta rätt ikoner, placera elementen, rita kopplingarna… Det som intresserar mig nu är att kunna automatisera allt detta med AI.

I den här artikeln visar jag att det är möjligt att använda en AI-agent med Draw.io MCP för att automatiskt generera AWS-arkitekturdiagram. Jag använder Claude Code i mitt sammanhang, men detta tillvägagångssätt fungerar med vilken MCP-kompatibel agent som helst.

Utgångspunkten: uppdatera ett gammalt diagram

Jag hade redan en artikel om infrastrukturen på den här bloggen från 2018 med ett diagram gjort manuellt i Draw.io. Infrastrukturen har inte förändrats dramatiskt sedan dess — jag har i huvudsak lagt till OAC (Origin Access Control) och en CloudFront Function — men AWS-ikonerna har utvecklats och jag ville uppdatera diagrammet med de senaste versionerna.

När jag sökte efter sätt att automatisera hittade jag Draw.io MCP Server med dess Chrome-tillägg. Jag testade… och tyckte det var så häftigt att jag bestämde mig för att skriva en artikel för att dela informationen!

MCP Draw.io: styra Draw.io med AI

Draw.io MCP Server, skapat av Ladislav (lgazo), är en MCP-server (Model Context Protocol) som gör det möjligt att programatiskt styra Draw.io. Konkret betyder det att en AI-agent kan skapa, modifiera och organisera element i ett Draw.io-diagram.

Tillgängliga verktyg

Krävd konfiguration

För att agenten ska kunna kommunicera med Draw.io måste två saker konfigureras enligt projektets dokumentation:

1. En lokal MCP-server — konfigurerad i inställningsfilen för din agent (t.ex. .mcp.json för Claude Code)
2. Chrome-tillägget Draw.io MCP — som gör bryggan mellan MCP-servern och Draw.io i webbläsaren

När dessa två delar är på plats kan agenten direkt manipulera Draw.io-canvasen: skapa shapes, positionera dem, dra kopplingar — allt programatiskt.

När jag testade MCP Draw.io upptäckte jag att man måste guida agenten för att få ett snyggt resultat: inte hitta på resurser, använda rätt AWS-ikoner, respektera ett konsekvent positionsmönster, applicera färger per kategori, undvika HTML i texterna… Därför skapade jag ett Claude Code-skill som kodar dessa regler.

Skapa skill /aws-diagram

Ett Claude Code-skill är en Markdown-fil som definierar ett arbetsflöde och regler. När man anropar /aws-diagram laddar Claude Code dessa instruktioner och tillämpar dem automatiskt.

Arbetsflödet

Skillet följer en process i fyra steg:

1. Läsa in infrastrukturkoden (Terraform, CloudFormation)
2. Extrahera AWS-resurserna och deras relationer
3. Bygga diagrammet med officiella AWS-ikoner
4. Lägga till kopplingar med beskrivande etiketter

## 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

Kritiska regler

Jag var tvungen att koda flera viktiga regler i skille:

1. Uppfinna aldrig resurser

Det var den största fallgropen. LLM:er tenderar att “fyller i” vad som verkar logiskt. “Det finns CloudFront, så det borde finnas Lambda@Edge för…” — Nej! Diagrammet måste exakt representera vad som finns i koden, inget mer.

### 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. Användare är externa

“Users” är inte AWS-resurser. De måste visas utanför AWS-cloud-gruppen.

### 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. Ingen HTML i texterna

Draw.io renderar inte HTML. Om du skriver text: "S3<br>Private" kommer du bokstavligen att se <br> i diagrammet.

### 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. Planera layout för att undvika kollisioner

Korsande edges gör diagrammet oläsligt. Skillet rekommenderar att placera huvudflödet på en horisontell linje, och hjälptjänster ovanför eller under.

### 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. Anmärkningar till höger, inte under

AWS-ikonerna får sina etiketter automatiskt under ikonen. Om du lägger till anmärkningar under dem också kommer de att överlappa nästa rad. Placera dem till höger om ikonen.

### 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

Färgssystemet

Jag definierade en konsekvent palett enligt AWS-konventioner:

För dataflöden använder jag miljöfärger:

• Production : grön #4CAF50
• Preview : orange #FF9800
• Configuration : grå #AAAAAA (streckad)

### 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 |

Praktiskt exempel: infrastrukturen jls42.org

För att testa skille använde jag det på infrastrukturen för den här bloggen.

Den analyserade Terraform-koden

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

Den extraherade arkitekturen

Det genererade diagrammet

Här är slutresultatet:

Utifrån en enkel prompt i naturligt språk:

«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.»

🇸🇪 «Analysera infrastrukturen för det här projektet i detalj och skapa ett proffsigt AWS-arkitekturdiagram. Endast produktionsinfrastruktur, inte preview eller legacy.»

Claude Code analyserade först Terraform-filerna för att identifiera infrastrukturen, och laddade sedan skille /aws-diagram vars instruktioner gjorde att den kunde:

1. Skapa huvudkomponenterna (Users, Route53, CloudFront, S3, ACM)
2. Lägga till detaljerade anmärkningar (cache policies, security headers, bucket-config…)
3. Rita kopplingar med etiketter (HTTPS, DNS Alias, OAC, TLS Cert…)
4. Lägga till externa tjänster (Plausible Analytics, Gandi för e-post)
5. Generera en legend per kategori

Allt detta med ett snyggt layout som:

• AWS-clouden dimensionerades automatiskt (900×420px)
• Users till vänster om cloud
• Externa tjänster till höger
• En legend under diagrammet

Det kompletta arbetsflödet: från Terraform till video

Jag gick vidare och skapade en demonstrationsvideo.

Inspelning

Jag spelade in diagramgenereringen i realtid: 4 minuter 10 sekunder av Claude Code som läser Terraform, skapar elementen ett efter ett och bygger diagrammet framför mina ögon.

Efterbearbetning med FFmpeg

4 minuter är långt för en demo. Jag använde FFmpeg för att skapa en snabbare version med variabla hastigheter:

Resultat: en video på 42 sekunder istället för 4 minuter, med nyckelögonblicken i normal hastighet.

Berättarröst med HeyGen

För att lägga till en röst bakom skrev jag ett manus, delade upp videon i segment om 30 sekunder (HeyGens gräns) och genererade rösten på franska. Basrösterna passade inte mig, så jag använde deras funktion för röstdesign för att skapa en röst i farten genom att justera ett prompt tills tonen blev rätt.

Det slutliga resultatet är videon som du kan se högst upp i den här artikeln.

Andra exemplet: EKS-arkitektur med hög tillgänglighet

För att illustrera hur väl MCP Draw.io fungerar visar jag ett andra, mer komplext exempel: en EKS-arkitektur (Elastic Kubernetes Service) med hög tillgänglighet. MCP gör allt skapande i Draw.io — jag behövde bara ge ett detaljerat prompt.

Den här gången gav jag ett detaljerat prompt som beskriver önskad arkitektur:

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 |

Det genererade resultatet

Detta diagram illustrerar en produktionstrogen Kubernetes-arkitektur med:

• 3 Availability Zones för hög tillgänglighet
• Redundanta NAT Gateways (en per AZ) för utgående trafik
• Node Groups fördelade med pods i varje AZ
• EFS cross-AZ för delat persistent lagringsutrymme
• Separat AWS-managed Control Plane visuellt avgränsad
• IRSA (IAM Roles for Service Accounts) för pod-säkerhet

MCP Draw.io tolkade strukturen korrekt genom att skapa VPC- och AZ-grupper, placera NAT Gateways i publika subnät och Node Groups i privata subnät. Resultatet ger en utmärkt utgångspunkt att finslipa visuellt eller korrigera eventuella fel — betydligt snabbare än att börja från noll.

Vad det här projektet visar

Denna erfarenhet visar flera aspekter av mitt arbetssätt:

• Automatisera dokumentationen: koden är sanningskällan, diagrammet bör härledas automatiskt
• Använda rätt verktyg: MCP Draw.io var precis vad jag behövde — ingen anledning att uppfinna hjulet igen
• Koda reglerna: skills fångar expertisen och undviker vanliga misstag — tillämpligt på alla typer av Draw.io-diagram, inte bara AWS
• Testa på verkliga fall: jag använde min egen infrastruktur som testbädd
• Driva utforskning: från automatgenerering till berättad video, varje steg var en möjlighet att lära

Skillet är nu integrerat i mitt arbetsflöde. Nästa gång jag ändrar infrastrukturen kan jag generera diagrammet igen med ett enkelt prompt.

Resurser

• Draw.io MCP Server av Ladislav (lgazo)
• MCP - Model Context Protocol av Anthropic
• Claude Code — CLI-verktyget som jag använder dagligen

Om du använder en MCP-kompatibel kodningsagent och har infrastruktur att dokumentera, uppmuntrar jag dig att prova detta tillvägagångssätt. Det är tillfredsställande att se ett prydligt diagram byggas automatiskt framför sina ögon.

Tack för att du läste — jag hoppas att den här artikeln inspirerar dig att experimentera!

Detta dokument har översatts från fr till sv med hjälp av modellen gpt-5-mini. För mer information om översättningsprocessen, se https://gitlab.com/jls42/ai-powered-markdown-translator