Dibujo con IA

Esta página es una referencia sobre cómo un cliente de IA (ChatGPT, Claude, Gemini, Cursor, …) dibuja diagramas profesionales en LetDraw a través de la API y MCP. El modelo no necesita adivinar el esquema de letdraw: todo lo que sigue también se presenta al modelo en el momento de la llamada, de modo que un modelo conectado puede leerlo y dibujar correctamente al primer intento.

Cómo aprende el modelo a usar LetDraw

No reentrenas el modelo; le das contexto en el momento de la llamada. LetDraw expone todo su conocimiento de dibujo a través del servidor MCP y la API REST:

Qué	MCP	REST
Cómo dibujar (esta guía, legible por máquina)	recurso letdraw://capabilities	GET /capabilities
Cada biblioteca de iconos + todas las etiquetas de elementos	recurso letdraw://libraries	GET /libraries?items=1
Ids de biblioteca + recuentos	herramienta list_shape_libraries	GET /libraries
Encontrar un icono para un componente	herramienta search_icons	GET /icons?query=…
Crear / actualizar un diagrama	herramientas create_diagram / update_diagram	POST / PATCH /documents

Un cliente que se comporta correctamente lee los recursos letdraw://capabilities y letdraw://libraries una vez, y luego dibuja. Apunta tu IA al endpoint de MCP (consulta API y MCP); ella descubre el resto por su cuenta.

Reglas de oro para un resultado profesional

1. Usa iconos reales, no los dibujes. Llama a search_icons (por ejemplo, "postgres", "redis", "kubernetes pod", "load balancer") y coloca el valor ref devuelto en el campo iconRef de la caja (por ejemplo, "databases/PostgreSQL"). El servidor estampa ese icono exacto y hace fluir la etiqueta debajo de él.
2. Mantén los contenedores limpios. Las cajas grandes de agrupación (un Kubernetes Cluster, una VPC, una banda de subred) deben ser anchas (> 420px) o un frame. Los iconos solo se estampan en cajas del tamaño de un nodo (60-420px de ancho, 40-260px de alto). Coloca el título de un contenedor como texto independiente encima de él, no como una etiqueta vinculada.
3. Anida de forma deliberada. Contenedor exterior coloreado hacia cajas del tamaño de un nodo en su interior, cada una con su propio icono. Dos o tres niveles se leen mejor (Cluster hacia Worker Node hacia Pod).
4. Traza las flechas de forma limpia. Para conexiones en ángulo recto / con múltiples curvas, envía una flecha con 3 o más points; vincula los extremos a las formas para que permanezcan unidos.
5. Codifica por color según el rol y mantén un espaciado consistente.

Enviar una escena

create_diagram / update_diagram aceptan elements como ya sea elementos nativos de LetDraw o Excalidraw JSON estándar (detectado automáticamente y convertido en el servidor). Producir Excalidraw JSON es la vía más fácil de alta calidad; LetDraw nativo te da las características específicas de LetDraw que se indican a continuación.

Campos comunes de los elementos

id, type, x, y, width, height más estilo: 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. Opcional: text, fontSize, fontFamily (hand | normal | code), textAlign, groupIds, angle (radianes), link, shadow (none | soft | hard), y la extensión de LetDraw iconRef.

Tipos de forma

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, flechas de bloque (arrow-right/left/up/down), más text, image (dataURL), frame (sección discontinua etiquetada; establece name), embed (url), math (LaTeX en text), code (fuente en text, language). Una forma lleva su etiqueta con text en su interior (en formato Excalidraw, a través de un elemento de texto con containerId).

Flechas

type: "arrow" y:

• arrowShape: straight | curved | elbow | s-curve | smart | multipoint | multipoint-curved. smart traza automáticamente el recorrido alrededor de otras formas. multipoint es una polilínea de múltiples segmentos con esquinas marcadas; multipoint-curved es su versión suavizada; ambas leen sus esquinas de points.
• points: {x, y}[] en coordenadas absolutas del mundo (del primero al último). 2 puntos = recta, 3 = codo (una sola curva), 4+ = polilínea trazada. Conexión en ángulo recto: points: [{x1,y1},{x2,y1},{x2,y2}].
• controlPoint / controlPoint2: manejadores bézier para 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 puntas UML (triangle-outline = generalización, diamond = composición) y puntas de pata de gallo ER para la cardinalidad.
• startBinding / endBinding: {elementId, focus:{x,y}}: vincula un extremo a una forma (focus es un punto de 0..1 en el bbox de la forma) para que la flecha lo siga.

En formato Excalidraw, envía la flecha con points + startArrowhead/endArrowhead; el conversor asigna 2 / 3 / 4+ puntos a straight / elbow / s-curve y recalcula las vinculaciones.

Líneas

type: "line" y lineShape: straight | multipoint | multipoint-curved. Las líneas de múltiples puntos llevan points (igual que las flechas, sin punta de flecha). También freedraw (points[]) y highlight (marcador semitransparente).

Iconos: el flujo de iconRef

1. search_icons({ query }) produce un [{ library, label, ref }] ordenado por relevancia.
2. Establece iconRef: "<library>/<Item Label>" (o { library, label }) en la caja de destino.
3. create_diagram estampa ese icono centrado en la parte superior y mueve la etiqueta debajo de él.

Un iconRef explícito siempre prevalece; luego, cualquier nodo etiquetado restante sin icono obtiene automáticamente un icono de palabra clave según la mejor estimación. En una escena de nube, especifica el proveedor (kubernetes / aws / azure / gcp) para que se prefieran los conjuntos de iconos de ese proveedor. Explora los ids con list_shape_libraries; el catálogo completo de etiquetas está en letdraw://libraries (o GET /libraries?items=1).

Los productos de base de datos se resuelven en la biblioteca Databases: logos reales donde la política de marca lo permite (PostgreSQL, MariaDB, Cassandra, DynamoDB, …), de lo contrario iconos genéricos apropiados para BD (MySQL, Redis, MongoDB, …).

Pequeño ejemplo en 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 es una marca registrada del equipo de Excalidraw; LetDraw solo ofrece compatibilidad con el formato de archivo y no tiene ninguna afiliación con Excalidraw.

Otras herramientas

• diagram_from_code: envía docker-compose / manifiesto de Kubernetes / Graphviz DOT / PlantUML / valores de Terraform / valores de Helm / SQL DDL; LetDraw detecta automáticamente el formato y lo dispone.
• export_to_code: un diagrama a Mermaid o D2.
• generate_from_prompt: lenguaje natural a diagrama, usando la propia clave de IA de tu cuenta.

Para la autenticación, los endpoints, los scopes y la configuración del cliente, consulta API y MCP.