Deep Dive : Generarea diagramelor AWS cu un agent IA și Draw.io MCP

Pentru a înțelege o infrastructură, un schemă bună este întotdeauna utilă. Dar a le crea manual ia timp: găsit iconițele potrivite, poziționat elementele, tras conexiunile… Ceea ce mă pasionează azi este să pot automatiza toate acestea cu IA.

În acest articol vă arăt că este posibil să folosiți un agent IA cu MCP Draw.io pentru a genera automat diagrame de arhitectură AWS. Eu folosesc Claude Code în contextul meu, dar această abordare funcționează cu orice agent compatibil MCP.

Punctul de plecare: actualizarea unui vechi schem

Aveam deja un articol despre infrastructura acestui blog din 2018 cu un schem făcut manual în Draw.io. Infrastructura nu s-a schimbat foarte mult de atunci — am adăugat practic OAC (Origin Access Control) și o CloudFront Function — dar iconițele AWS s-au evoluat și am vrut să actualizez schemă la ultimele versiuni.

Căutând soluții pentru a automatiza acest lucru, am dat peste Serverul Draw.io MCP cu extensia sa Chrome. Am testat… și mi s-a părut atât de tare încât am decis să scriu un articol pentru a împărtăși informația!

MCP Draw.io: controlul Draw.io cu IA

Serverul Draw.io MCP creat de Ladislav (lgazo) este un server MCP (Model Context Protocol) care permite controlul programatic al Draw.io. Concret, asta înseamnă că un agent IA poate crea, modifica și organiza elemente într-un diagram Draw.io.

Uneltele disponibile

Configurația necesară

Pentru ca agentul IA să poată comunica cu Draw.io, trebuie să configurați două elemente, așa cum este indicat în documentația proiectului :

1. Un server MCP local — configurat în fișierul de settings al agentului vostru (ex: .mcp.json pentru Claude Code)
2. Extensia Chrome Draw.io MCP — care face legătura între serverul MCP și aplicația Draw.io din browser

Odată ce aceste două elemente sunt puse la punct, agentul poate manipula direct canvas-ul Draw.io: crea shapes, le poziționa, trasa conexiuni, toate acestea programatic.

Testând MCP Draw.io, am observat că trebuie să ghidezi agentul pentru a obține un rezultat curat: să nu inventeze resurse, să folosească iconițele AWS corecte, să respecte un poziționare coerentă, să aplice culorile pe categorii, să eviți HTML-ul în texte… De aceea am creat un skill Claude Code care codifică aceste reguli.

Crearea skill-ului /aws-diagram

Un skill Claude Code este un fișier Markdown care definește un workflow și reguli. Când invoci /aws-diagram, Claude Code încarcă aceste instrucțiuni și le aplică automat.

Workflow-ul

Skill-ul urmează un proces în 4 etape:

1. Citirea codului de infrastructură (Terraform, CloudFormation)
2. Extracția resurselor AWS și a relațiilor dintre ele
3. Construirea diagramei cu iconițele oficiale AWS
4. Adăugarea conexiunilor cu etichete descriptive

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

Reguli critice

A trebuit să codific mai multe reguli importante în skill:

1. A nu inventa niciodată resurse

Acesta era capcana principală. LLM-urile au tendința de a „completa” ceea ce li se pare logic. „Există CloudFront, deci ar trebui să existe Lambda@Edge pentru…” — Nu! Diagrama trebuie să reprezinte exact ceea ce există în cod, nimic mai mult.

### 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. Utilizatorii sunt externi

„Users” nu sunt resurse AWS. Trebuie să apară în afara grupului AWS Cloud.

### 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. Fără HTML în texte

Draw.io nu redă HTML. Dacă scrieți text: "S3<br>Private", veți vedea literal <br> în 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. Planificați layout-ul pentru a evita coliziunile

Edge-urile care se încrucișează fac diagrama de neînțeles. Skill-ul recomandă plasarea fluxului principal pe o linie orizontală, iar serviciile auxiliare deasupra sau dedesubt.

### 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. Anotațiile la dreapta, nu dedesubt

Iconițele AWS au label-ul plasat automat dedesubt. Dacă adăugați anotații dedesubt și ele, acestea vor suprapune linia următoare. Puneți-le la dreapta iconiței.

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

Sistemul de culori

Am definit o paletă coerentă conform convențiilor AWS:

Pentru fluxurile de date, folosesc culori pe mediu:

• Producție : verde #4CAF50
• Preview : portocaliu #FF9800
• Configurație : gri #AAAAAA (dashed)

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

Aplicare concretă: infrastructura jls42.org

Pentru a testa skill-ul, l-am folosit pe infrastructura acestui blog.

Codul Terraform analizat

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

Arhitectura extrasă

Diagrama generată

Iată rezultatul final:

Pornind de la un simplu prompt în limbaj natural:

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

🇷🇴 «Analizează în profunzime infrastructura acestui proiect apoi realizează un schem profesionist al arhitecturii AWS. Doar infrastructura de producție, nu preview sau legacy.»

Claude Code a analizat mai întâi fișierele Terraform pentru a identifica infrastructura, apoi a încărcat skill-ul /aws-diagram ale cărui instrucțiuni au permis să se:

1. Creeze componentele principale (Users, Route53, CloudFront, S3, ACM)
2. Adauge anotații detaliate (politici de cache, header-e de securitate, config bucket…)
3. Trace conexiunile cu etichete (HTTPS, DNS Alias, OAC, certificat TLS…)
4. Adauge serviciile externe (Plausible Analytics, Gandi pentru emailuri)
5. Genereze o legendă pe categorii

Totul respectând un layout curat cu:

• Cloud-ul AWS dimensionat automat (900×420px)
• Users la stânga cloud-ului
• Serviciile externe la dreapta
• O legendă sub diagramă

Workflow-ul complet: de la Terraform la video

Am dus experiența mai departe creând un video demonstrativ.

Înregistrarea

Am înregistrat generarea diagramei în timp real: 4 minute 10 secunde cu Claude Code care citește Terraform, creează elementele unul câte unul și construiește diagrama sub ochii mei.

Post-producție cu FFmpeg

4 minute e mult pentru o demo. Am folosit FFmpeg pentru a crea o versiune accelerată cu viteze variabile:

Rezultat: un video de 42 secunde în loc de 4 minute, păstrând momentele cheie la viteză normală.

Narare cu HeyGen

Pentru a adăuga o voce off, am scris un script de narațiune, am tăiat video-ul în segmente de 30 de secunde (limita HeyGen) și am generat vocea în franceză. Vocile de bază nu mi s-au părut potrivite, așa că am folosit funcția lor de design vocal care permite crearea unei voci la cerere ajustând un prompt până găsești tonul perfect.

Rezultatul final este video-ul pe care îl puteți viziona în partea de sus a acestui articol.

Al doilea exemplu: Arhitectură EKS înaltă disponibilitate

Pentru a ilustra cât de bine funcționează MCP Draw.io, iată un al doilea exemplu mai complex: o arhitectură EKS (Elastic Kubernetes Service) cu înaltă disponibilitate. MCP face toată treaba de creare în Draw.io — eu a trebuit doar să furnizez un prompt detaliat.

De data asta, am furnizat un prompt detaliat descriind arhitectura dorită:

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 |

Rezultatul generat

Această diagramă ilustrează o arhitectură Kubernetes gata pentru producție cu:

• 3 Availability Zones pentru înaltă disponibilitate
• NAT Gateways redundante (una per AZ) pentru ieșirea către internet
• Node Groups distribuite cu pods în fiecare AZ
• EFS cross-AZ pentru stocare persistentă partajată
• Control Plane gestionat de AWS reprezentat separat vizual
• IRSA (IAM Roles for Service Accounts) pentru securitatea pod-urilor

MCP Draw.io a interpretat corect structura creând grupurile VPC și AZ, poziționând NAT Gateways în subrețelele publice și Node Groups în subrețelele private. Rezultatul oferă o excelentă bază de lucru pentru retușuri ulterioare după preferințele vizuale sau corectarea eventualelor erori — mult mai rapid decât a porni de la zero.

Ce relevă acest proiect

Această experiență ilustrează mai multe aspecte ale modului meu de lucru:

• Automatizarea documentației: codul este sursa adevărului, diagrama ar trebui să rezulte automat din el
• Folosirea uneltelor potrivite: MCP Draw.io a fost exact ce aveam nevoie, nu am reinventat roata
• Codificarea regulilor: skill-urile permit capturarea expertizei și evitarea erorilor comune — aplicabil pentru orice tip de diagramă Draw.io, nu doar AWS
• Testare pe caz concret: mi-am folosit propria infrastructură ca teren de experiment
• Împingerea explorării: de la generare automată la video narat, fiecare etapă a fost o ocazie de învățare

Skill-ul este acum integrat în workflow-ul meu. Data viitoare când modific infrastructura, voi putea regenera diagrama cu un simplu prompt.

Resurse

• Serverul Draw.io MCP de Ladislav (lgazo)
• MCP - Model Context Protocol de Anthropic
• Claude Code — instrumentul CLI pe care îl folosesc zilnic

Dacă folosiți un agent de codare compatibil MCP și aveți infrastructuri de documentat, vă încurajez să încercați această abordare. E satisfăcător să vezi un diagram curat construindu-se automat sub ochii tăi.

Mulțumesc pentru lectură, sper că acest articol v-a dat chef să experimentați!

Acest document a fost tradus din versiunea fr în limba ro folosind modelul gpt-5-mini. Pentru mai multe informații despre procesul de traducere, consultați https://gitlab.com/jls42/ai-powered-markdown-translator