AI-tekenen

Deze pagina is een naslagwerk over hoe een AI-client (ChatGPT, Claude, Gemini, Cursor, …) professionele diagrammen in LetDraw tekent via de API en MCP. Het model hoeft het schema van LetDraw niet te raden: alles hieronder wordt op het moment van aanroepen ook aan het model gepresenteerd, zodat een verbonden model het kan lezen en meteen bij de eerste poging correct kan tekenen.

Hoe het model LetDraw leert

U traint het model niet opnieuw; u geeft het context op het moment van aanroepen. LetDraw stelt al zijn tekenkennis beschikbaar via de MCP-server en de REST API:

Wat	MCP	REST
Hoe te tekenen (deze gids, machineleesbaar)	resource letdraw://capabilities	GET /capabilities
Elke iconenbibliotheek + alle itemlabels	resource letdraw://libraries	GET /libraries?items=1
Bibliotheek-id’s + aantallen	tool list_shape_libraries	GET /libraries
Een icoon voor een component zoeken	tool search_icons	GET /icons?query=…
Een diagram maken / bijwerken	tools create_diagram / update_diagram	POST / PATCH /documents

Een goed werkende client leest de resources letdraw://capabilities en letdraw://libraries eenmaal en tekent daarna. Wijs uw AI naar het MCP-eindpunt (zie API en MCP); de rest ontdekt hij zelf.

Gouden regels voor professioneel resultaat

1. Gebruik echte iconen, teken ze niet. Roep search_icons aan (bijv. "postgres", "redis", "kubernetes pod", "load balancer") en zet de teruggegeven waarde ref in het veld iconRef van het vak (bijv. "databases/PostgreSQL"). De server stempelt dat exacte icoon en plaatst het label eronder.
2. Houd containers schoon. Grote groeperingsvakken (een Kubernetes Cluster, een VPC, een subnetband) moeten breed zijn (> 420px) of een frame. Iconen worden alleen gestempeld op vakken ter grootte van een knooppunt (60-420px breed, 40-260px hoog). Plaats de titel van een container als losstaande tekst erboven, niet als een gebonden label.
3. Nest doelbewust. Buitenste gekleurde container met daarin vakken ter grootte van een knooppunt, elk met een eigen icoon. Twee of drie niveaus lezen het best (Cluster naar Worker Node naar Pod).
4. Route pijlen netjes. Voor haakse verbindingen of verbindingen met meerdere bochten stuurt u een pijl met 3 of meer points; bind de uiteinden aan vormen zodat ze verbonden blijven.
5. Codeer met kleur per rol en houd de tussenruimte consistent.

Een scène versturen

create_diagram / update_diagram accepteren elements als ofwel letdraw-eigen elementen ofwel standaard Excalidraw JSON (automatisch gedetecteerd en op de server geconverteerd). Het produceren van Excalidraw JSON is de eenvoudigste weg naar hoge kwaliteit; letdraw-eigen elementen geven u de letdraw-specifieke functies hieronder.

Gemeenschappelijke elementvelden

id, type, x, y, width, height plus stijl: strokeColor (hex), fillColor (hex of "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. Optioneel: text, fontSize, fontFamily (hand | normal | code), textAlign, groupIds, angle (radialen), link, shadow (none | soft | hard), en de letdraw-uitbreiding iconRef.

Vormtypen

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, blok- pijlen (arrow-right/left/up/down), plus text, image (dataURL), frame (gelabelde gestreepte sectie; stel name in), embed (url), math (LaTeX in text), code (broncode in text, language). Een vorm draagt zijn label met text erin (in Excalidraw-formaat, via een tekstelement met containerId).

Pijlen

type: "arrow" en:

• arrowShape: straight | curved | elbow | s-curve | smart | multipoint | multipoint-curved. smart routeert automatisch rond andere vormen. multipoint is een scherpe veelhoeklijn met meerdere segmenten; multipoint-curved is de vloeiend gemaakte versie; beide lezen hun bochten uit points.
• points: {x, y}[] in absolute wereldcoördinaten (eerste tot laatste). 2 punten = recht, 3 = elleboog (één bocht), 4+ = gerouteerde veelhoeklijn. Haakse verbinding: points: [{x1,y1},{x2,y1},{x2,y2}].
• controlPoint / controlPoint2: bezier-handvatten voor 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. Gebruik UML-punten (triangle-outline = generalisatie, diamond = compositie) en ER crow’s-foot- punten voor kardinaliteit.
• startBinding / endBinding: {elementId, focus:{x,y}}: bind een uiteinde aan een vorm (focus is een punt van 0..1 in de bbox van de vorm) zodat de pijl deze volgt.

In Excalidraw-formaat stuurt u de pijl met points + startArrowhead/endArrowhead; de converter wijst 2 / 3 / 4+ punten toe aan straight / elbow / s-curve en herberekent de bindingen.

Lijnen

type: "line" en lineShape: straight | multipoint | multipoint-curved. Multipoint-lijnen dragen points (hetzelfde als pijlen, zonder pijlpunt). Ook freedraw (points[]) en highlight (halftransparante markering).

Iconen: de iconRef-stroom

1. search_icons({ query }) levert een gerangschikte [{ library, label, ref }].
2. Stel iconRef: "<library>/<Item Label>" (of { library, label }) in op het doelvak.
3. create_diagram stempelt dat icoon boven-midden en verplaatst het label eronder.

Een expliciete iconRef wint altijd; vervolgens krijgt elk overgebleven gelabeld knooppunt zonder icoon automatisch een best passend trefwoordicoon. Geef in een cloudscène de leverancier op (kubernetes / aws / azure / gcp) zodat de iconensets van die leverancier de voorkeur krijgen. Blader door id’s met list_shape_libraries; de volledige labelcatalogus staat in letdraw://libraries (of GET /libraries?items=1).

Databaseproducten worden opgelost naar de Databases-bibliotheek: echte logo’s waar het merkbeleid dit toelaat (PostgreSQL, MariaDB, Cassandra, DynamoDB, …), anders DB-passende generieke iconen (MySQL, Redis, MongoDB, …).

Klein voorbeeld in Excalidraw-formaat

[
  { "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" } }
]

Opmerking

Excalidraw is een handelsmerk van het Excalidraw-team; LetDraw biedt alleen bestandsformaatcompatibiliteit en heeft geen band met Excalidraw.

Andere tools

• diagram_from_code: stuur docker-compose / Kubernetes-manifest / Graphviz DOT / PlantUML / Terraform / Helm-values / SQL DDL; LetDraw detecteert automatisch het formaat en maakt de lay-out.
• export_to_code: een diagram naar Mermaid of D2.
• generate_from_prompt: natuurlijke taal naar diagram, met de eigen AI-sleutel van uw account.

Voor authenticatie, eindpunten, scopes en clientinstelling, zie API en MCP.