Dessin par IA

Cette page est une référence sur la façon dont un client IA (ChatGPT, Claude, Gemini, Cursor, …) dessine des diagrammes professionnels dans LetDraw via l’API et MCP. Le modèle n’a pas besoin de deviner le schéma de LetDraw : tout ce qui suit est également présenté au modèle au moment de l’appel, de sorte qu’un modèle connecté peut le lire et dessiner correctement dès la première tentative.

Comment le modèle apprend LetDraw

Vous ne réentraînez pas le modèle ; vous lui fournissez du contexte au moment de l’appel. LetDraw expose toute sa connaissance du dessin à travers le serveur MCP et l’API REST :

Quoi	MCP	REST
Comment dessiner (ce guide, lisible par machine)	resource letdraw://capabilities	GET /capabilities
Chaque bibliothèque d’icônes + tous les libellés d’éléments	resource letdraw://libraries	GET /libraries?items=1
Identifiants de bibliothèques + décomptes	tool list_shape_libraries	GET /libraries
Trouver une icône pour un composant	tool search_icons	GET /icons?query=…
Créer / mettre à jour un diagramme	tools create_diagram / update_diagram	POST / PATCH /documents

Un client bien conçu lit une seule fois les ressources letdraw://capabilities et letdraw://libraries, puis dessine. Pointez votre IA vers le point de terminaison MCP (voir API et MCP) ; elle découvre le reste par elle-même.

Règles d’or pour un résultat professionnel

1. Utilisez de vraies icônes, ne les dessinez pas. Appelez search_icons (par exemple "postgres", "redis", "kubernetes pod", "load balancer") et placez la valeur ref renvoyée dans le champ iconRef de la boîte (par exemple "databases/PostgreSQL"). Le serveur appose exactement cette icône et fait couler le libellé en dessous.
2. Gardez les conteneurs épurés. Les grandes boîtes de regroupement (un Kubernetes Cluster, un VPC, une bande de sous-réseau) doivent être larges (> 420px) ou de type frame. Les icônes ne sont apposées que sur des boîtes de taille nœud (largeur 60-420px, hauteur 40-260px). Placez le titre d’un conteneur en tant que texte autonome au-dessus de lui, et non en tant que libellé lié.
3. Imbriquez de manière réfléchie. Un conteneur coloré extérieur vers des boîtes de taille nœud à l’intérieur, chacune avec sa propre icône. Deux ou trois niveaux se lisent le mieux (Cluster vers Worker Node vers Pod).
4. Tracez les flèches proprement. Pour les connexions à angle droit / à plusieurs coudes, envoyez une flèche avec 3 points ou plus ; liez les extrémités aux formes pour qu’elles restent attachées.
5. Codez par couleur selon le rôle et maintenez un espacement cohérent.

Envoyer une scène

create_diagram / update_diagram acceptent elements soit comme des éléments natifs de LetDraw, soit comme du JSON Excalidraw standard (détecté automatiquement et converti sur le serveur). Produire du JSON Excalidraw est la voie la plus simple vers une qualité élevée ; le format natif de LetDraw vous donne les fonctionnalités spécifiques à LetDraw ci-dessous.

Champs communs des éléments

id, type, x, y, width, height plus le style : strokeColor (hex), fillColor (hex ou "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. Facultatif : text, fontSize, fontFamily (hand | normal | code), textAlign, groupIds, angle (radians), link, shadow (none | soft | hard), et l’extension LetDraw iconRef.

Types de formes

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, des flèches en bloc (arrow-right/left/up/down), plus text, image (dataURL), frame (section en pointillés avec libellé ; définissez name), embed (url), math (LaTeX dans text), code (source dans text, language). Une forme porte son libellé avec text à l’intérieur (au format Excalidraw, via un élément texte avec containerId).

Flèches

type: "arrow" et :

• arrowShape : straight | curved | elbow | s-curve | smart | multipoint | multipoint-curved. smart contourne automatiquement les autres formes. multipoint est une polyligne à segments multiples et à angles nets ; multipoint-curved en est la version lissée ; les deux déduisent leurs coins à partir de points.
• points : {x, y}[] en coordonnées mondiales absolues (du premier au dernier). 2 points = droite, 3 = coude (un seul pli), 4+ = polyligne tracée. Connexion à angle droit : points: [{x1,y1},{x2,y1},{x2,y2}].
• controlPoint / controlPoint2 : poignées de Bézier pour 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. Utilisez les têtes UML (triangle-outline = généralisation, diamond = composition) et les têtes en patte-d’oie ER pour la cardinalité.
• startBinding / endBinding : {elementId, focus:{x,y}} : liez une extrémité à une forme (focus est un point de 0 à 1 dans la bbox de la forme) pour que la flèche la suive.

Au format Excalidraw, envoyez la flèche avec points + startArrowhead/endArrowhead ; le convertisseur associe 2 / 3 / 4+ points à straight / elbow / s-curve et recalcule les liaisons.

Lignes

type: "line" et lineShape : straight | multipoint | multipoint-curved. Les lignes multipoints portent points (comme les flèches, sans tête de flèche). Également freedraw (points[]) et highlight (marqueur semi-transparent).

Icônes : le flux iconRef

1. search_icons({ query }) produit une liste classée [{ library, label, ref }].
2. Définissez iconRef: "<library>/<Item Label>" (ou { library, label }) sur la boîte cible.
3. create_diagram appose cette icône en haut au centre et déplace le libellé en dessous.

Un iconRef explicite l’emporte toujours ; ensuite, tout nœud libellé restant sans icône reçoit automatiquement l’icône par mot-clé la plus probable. Dans une scène cloud, précisez le fournisseur (kubernetes / aws / azure / gcp) pour que les jeux d’icônes de ce fournisseur soient privilégiés. Parcourez les identifiants avec list_shape_libraries ; le catalogue complet des libellés se trouve dans letdraw://libraries (ou GET /libraries?items=1).

Les produits de base de données correspondent à la bibliothèque Databases : de vrais logos là où la politique de marque le permet (PostgreSQL, MariaDB, Cassandra, DynamoDB, …), sinon des icônes génériques adaptées aux bases de données (MySQL, Redis, MongoDB, …).

Petit exemple au format 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" } }
]

Note

Excalidraw est une marque déposée de l’équipe Excalidraw ; LetDraw n’offre qu’une compatibilité de format de fichier et n’a aucune affiliation avec Excalidraw.

Autres outils

• diagram_from_code : envoyez un docker-compose / manifeste Kubernetes / Graphviz DOT / PlantUML / valeurs Terraform / valeurs Helm / DDL SQL ; LetDraw détecte automatiquement le format et le met en page.
• export_to_code : un diagramme vers Mermaid ou D2.
• generate_from_prompt : du langage naturel vers un diagramme, en utilisant la clé IA propre à votre compte.

Pour l’authentification, les points de terminaison, les portées (scopes) et la configuration du client, voir API et MCP.