Disegno con AI

Questa pagina è un riferimento su come un client AI (ChatGPT, Claude, Gemini, Cursor, …) disegna diagrammi professionali in LetDraw tramite l’API e MCP. Il modello non deve indovinare lo schema di letdraw: tutto quanto segue viene presentato anche al modello al momento della chiamata, così un modello connesso può leggerlo e disegnare correttamente al primo tentativo.

Come il modello impara LetDraw

Non riaddestri il modello; gli fornisci il contesto al momento della chiamata. LetDraw espone tutta la sua conoscenza di disegno attraverso il server MCP e l’API REST:

Cosa	MCP	REST
Come disegnare (questa guida, leggibile dalla macchina)	resource letdraw://capabilities	GET /capabilities
Ogni libreria di icone + tutte le etichette degli elementi	resource letdraw://libraries	GET /libraries?items=1
Id delle librerie + conteggi	tool list_shape_libraries	GET /libraries
Trova un’icona per un componente	tool search_icons	GET /icons?query=…
Crea / aggiorna un diagramma	tools create_diagram / update_diagram	POST / PATCH /documents

Un client ben educato legge una volta le risorse letdraw://capabilities e letdraw://libraries, poi disegna. Punta la tua AI all’endpoint MCP (vedi API e MCP); scopre il resto da sola.

Regole d’oro per un output professionale

1. Usa icone reali, non disegnarle. Chiama search_icons (ad esempio "postgres", "redis", "kubernetes pod", "load balancer") e inserisci il valore ref restituito nel campo iconRef della casella (ad esempio "databases/PostgreSQL"). Il server stampa esattamente quell’icona e fa scorrere l’etichetta sotto di essa.
2. Mantieni puliti i contenitori. Le grandi caselle di raggruppamento (un Kubernetes Cluster, una VPC, una fascia di subnet) devono essere larghe (> 420px) o un frame. Le icone vengono stampate solo su caselle di dimensioni da nodo (larghe 60-420px, alte 40-260px). Posiziona il titolo di un contenitore come testo autonomo sopra di esso, non come etichetta collegata.
3. Annida deliberatamente. Contenitore colorato esterno verso caselle di dimensioni da nodo all’interno, ciascuna con la propria icona. Due o tre livelli si leggono meglio (Cluster verso Worker Node verso Pod).
4. Traccia le frecce in modo pulito. Per connessioni ad angolo retto / a più pieghe, invia una freccia con 3+ points; collega le estremità alle forme così restano attaccate.
5. Codifica per ruolo con il colore e mantieni una spaziatura coerente.

Inviare una scena

create_diagram / update_diagram accettano elements sia come elementi nativi di LetDraw sia come JSON Excalidraw standard (rilevato automaticamente e convertito sul server). Produrre JSON Excalidraw è il percorso più semplice per un’alta qualità; il formato nativo di LetDraw ti offre le funzionalità specifiche di LetDraw descritte sotto.

Campi comuni degli elementi

id, type, x, y, width, height più lo stile: strokeColor (hex), fillColor (hex o "transparent"), fillStyle (hachure | cross-hatch | solid | dots | zigzag | dashed | zigzag-line), strokeWidth (1-8), strokeStyle (solid | dashed | dotted), roughness (clean | sketch | scribble), bowing (straight | curved | wavy), corner (sharp | rounded | beveled), opacity (0-100), seed. Facoltativi: text, fontSize, fontFamily (hand | normal | code), textAlign, groupIds, angle (radianti), link, shadow (none | soft | hard) e l’estensione di LetDraw iconRef.

Tipi di forme

rectangle, ellipse, diamond, triangle, right-triangle, parallelogram, trapezoid, star, hexagon, heptagon, octagon, cross, cloud, cylinder, speech-bubble, document, manual-input, display, terminator, data-storage, preparation, frecce a blocco (arrow-right/left/up/down), più text, image (dataURL), frame (sezione tratteggiata con etichetta; imposta name), embed (url), math (LaTeX in text), code (sorgente in text, language). Una forma porta la sua etichetta con text all’interno (in formato Excalidraw, tramite un elemento di testo con containerId).

Frecce

type: "arrow" e:

• arrowShape: straight | curved | elbow | s-curve | smart | multipoint | multipoint-curved. smart traccia automaticamente il percorso attorno alle altre forme. multipoint è una polilinea a più segmenti spigolosa; multipoint-curved è la sua versione ammorbidita; entrambe leggono i loro angoli da points.
• points: {x, y}[] in coordinate mondiali assolute (dalla prima all’ultima). 2 punti = retta, 3 = elbow (una singola piega), 4+ = polilinea tracciata. Connessione ad angolo retto: points: [{x1,y1},{x2,y1},{x2,y2}].
• controlPoint / controlPoint2: maniglie bezier per curved / s-curve / elbow.
• startArrowhead / endArrowhead: none | arrow | triangle | triangle-outline | circle | diamond | diamond-outline | bar | crows-foot | crows-foot-bar | double-bar | circle-bar | circle-crows-foot. Usa le punte UML (triangle-outline = generalizzazione, diamond = composizione) e le punte crow’s-foot ER per la cardinalità.
• startBinding / endBinding: {elementId, focus:{x,y}}: collega un’estremità a una forma (focus è un punto 0..1 nel bbox della forma) così la freccia la segue.

In formato Excalidraw, invia la freccia con points + startArrowhead/endArrowhead; il convertitore mappa 2 / 3 / 4+ punti a straight / elbow / s-curve e ricalcola i binding.

Linee

type: "line" e lineShape: straight | multipoint | multipoint-curved. Le linee multipunto portano points (come le frecce, senza una punta). Inoltre freedraw (points[]) e highlight (marker semitrasparente).

Icone: il flusso iconRef

1. search_icons({ query }) produce un [{ library, label, ref }] ordinato per pertinenza.
2. Imposta iconRef: "<library>/<Item Label>" (o { library, label }) sulla casella di destinazione.
3. create_diagram stampa quell’icona in alto al centro e sposta l’etichetta sotto di essa.

Un iconRef esplicito vince sempre; poi qualsiasi nodo con etichetta rimanente senza icona riceve automaticamente un’icona per parola chiave con la migliore ipotesi. In una scena cloud, specifica il vendor (kubernetes / aws / azure / gcp) così vengono preferiti i set di icone del vendor. Sfoglia gli id con list_shape_libraries; il catalogo completo delle etichette è in letdraw://libraries (o GET /libraries?items=1).

I prodotti di database si risolvono nella libreria Databases: loghi reali dove la policy del marchio lo consente (PostgreSQL, MariaDB, Cassandra, DynamoDB, …), altrimenti icone generiche adatte ai DB (MySQL, Redis, MongoDB, …).

Piccolo esempio in formato Excalidraw

[
  { "id": "db", "type": "rectangle", "x": 0, "y": 0, "width": 200, "height": 90,
    "backgroundColor": "#eef2ff", "strokeColor": "#334155", "roundness": { "type": 3 },
    "iconRef": "databases/PostgreSQL", "boundElements": [{ "type": "text", "id": "dbt" }] },
  { "id": "dbt", "type": "text", "x": 10, "y": 30, "text": "Orders DB", "containerId": "db" },
  { "id": "a1", "type": "arrow", "x": 200, "y": 45, "points": [[0, 0], [80, 0], [80, 120]],
    "endArrowhead": "triangle", "startBinding": { "elementId": "db" } }
]

Nota

Excalidraw è un marchio del team Excalidraw; LetDraw offre solo compatibilità con il formato dei file e non ha alcuna affiliazione con Excalidraw.

Altri strumenti

• diagram_from_code: invia docker-compose / manifest Kubernetes / Graphviz DOT / PlantUML / Terraform / valori Helm / SQL DDL; LetDraw rileva automaticamente il formato e lo dispone.
• export_to_code: un diagramma in Mermaid o D2.
• generate_from_prompt: linguaggio naturale in diagramma, usando la chiave AI del tuo account.

Per l’autenticazione, gli endpoint, gli scope e la configurazione del client, vedi API e MCP.