KI-Zeichnen

Diese Seite ist eine Referenz dafür, wie ein KI-Client (ChatGPT, Claude, Gemini, Cursor, …) professionelle Diagramme in LetDraw über die API und MCP zeichnet. Das Modell muss letdraws Schema nicht erraten: Alles Nachfolgende wird dem Modell auch zur Aufrufzeit präsentiert, sodass ein verbundenes Modell es lesen und beim ersten Versuch korrekt zeichnen kann.

Wie das Modell LetDraw lernt

Sie trainieren das Modell nicht neu; Sie geben ihm Kontext zur Aufrufzeit. LetDraw stellt sein gesamtes Zeichenwissen über den MCP-Server und die REST-API bereit:

Was	MCP	REST
Wie man zeichnet (diese Anleitung, maschinenlesbar)	Ressource letdraw://capabilities	GET /capabilities
Jede Icon-Bibliothek + alle Elementbezeichnungen	Ressource letdraw://libraries	GET /libraries?items=1
Bibliotheks-IDs + Anzahlen	Tool list_shape_libraries	GET /libraries
Ein Icon für eine Komponente finden	Tool search_icons	GET /icons?query=…
Ein Diagramm erstellen / aktualisieren	Tools create_diagram / update_diagram	POST / PATCH /documents

Ein gut funktionierender Client liest die Ressourcen letdraw://capabilities und letdraw://libraries einmal und zeichnet dann. Richten Sie Ihre KI auf den MCP-Endpunkt aus (siehe API und MCP); den Rest erkennt sie selbst.

Goldene Regeln für professionelle Ergebnisse

1. Verwenden Sie echte Icons, zeichnen Sie sie nicht. Rufen Sie search_icons auf (z. B. "postgres", "redis", "kubernetes pod", "load balancer") und tragen Sie den zurückgegebenen ref-Wert in das iconRef-Feld des Kastens ein (z. B. "databases/PostgreSQL"). Der Server stempelt genau dieses Icon und platziert die Bezeichnung darunter.
2. Halten Sie Container sauber. Große Gruppierungskästen (ein Kubernetes Cluster, ein VPC, ein Subnetz-Band) sollten breit (> 420px) oder ein frame sein. Icons werden nur auf knotengroße Kästen gestempelt (60-420px breit, 40-260px hoch). Platzieren Sie den Titel eines Containers als eigenständigen Text darüber, nicht als gebundene Bezeichnung.
3. Verschachteln Sie gezielt. Äußerer farbiger Container zu knotengroßen Kästen im Inneren, jeder mit seinem eigenen Icon. Zwei oder drei Ebenen lesen sich am besten (Cluster zu Worker Node zu Pod).
4. Führen Sie Pfeile sauber. Für rechtwinklige / mehrfach geknickte Verbindungen senden Sie einen Pfeil mit 3+ points; binden Sie die Enden an Formen, damit sie verbunden bleiben.
5. Kodieren Sie farblich nach Rolle und halten Sie die Abstände konsistent.

Eine Szene senden

create_diagram / update_diagram akzeptieren elements entweder als letdraw-native Elemente oder als standardmäßiges Excalidraw JSON (automatisch erkannt und auf dem Server konvertiert). Das Erzeugen von Excalidraw JSON ist der einfachste Weg zu hoher Qualität; letdraw-native bietet Ihnen die nachfolgenden letdraw-spezifischen Funktionen.

Gemeinsame Element-Felder

id, type, x, y, width, height plus Stil: strokeColor (Hex), fillColor (Hex oder "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. Optional: text, fontSize, fontFamily (hand | normal | code), textAlign, groupIds, angle (Radiant), link, shadow (none | soft | hard) und die letdraw-Erweiterung iconRef.

Formtypen

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, Blockpfeile (arrow-right/left/up/down), plus text, image (dataURL), frame (beschrifteter gestrichelter Abschnitt; setzen Sie name), embed (url), math (LaTeX in text), code (Quelltext in text, language). Eine Form trägt ihre Bezeichnung mit text im Inneren (im Excalidraw-Format über ein Text-Element mit containerId).

Pfeile

type: "arrow" und:

• arrowShape: straight | curved | elbow | s-curve | smart | multipoint | multipoint-curved. smart führt den Pfeil automatisch um andere Formen herum. multipoint ist eine scharfkantige Polylinie aus mehreren Segmenten; multipoint-curved ist deren geglättete Version; beide lesen ihre Ecken aus points.
• points: {x, y}[] in absoluten Weltkoordinaten (erster bis letzter). 2 Punkte = gerade, 3 = elbow (einzelner Knick), 4+ = geführte Polylinie. Rechtwinklige Verbindung: points: [{x1,y1},{x2,y1},{x2,y2}].
• controlPoint / controlPoint2: Bezier-Griffe für 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. Verwenden Sie UML-Spitzen (triangle-outline = Generalisierung, diamond = Komposition) und ER-Krähenfuß-Spitzen für Kardinalität.
• startBinding / endBinding: {elementId, focus:{x,y}}: Binden Sie ein Ende an eine Form (focus ist ein 0..1-Punkt in der Bounding-Box der Form), sodass der Pfeil ihr folgt.

Im Excalidraw-Format senden Sie den Pfeil mit points + startArrowhead/endArrowhead; der Konverter bildet 2 / 3 / 4+ Punkte auf straight / elbow / s-curve ab und berechnet die Bindungen neu.

Linien

type: "line" und lineShape: straight | multipoint | multipoint-curved. Multipoint-Linien tragen points (wie Pfeile, jedoch ohne Pfeilspitze). Außerdem freedraw (points[]) und highlight (halbtransparenter Marker).

Icons: der iconRef-Ablauf

1. search_icons({ query }) erzeugt eine geordnete Liste [{ library, label, ref }].
2. Setzen Sie iconRef: "<library>/<Item Label>" (oder { library, label }) auf den Zielkasten.
3. create_diagram stempelt dieses Icon oben zentriert und verschiebt die Bezeichnung darunter.

Ein explizites iconRef gewinnt immer; danach erhält jeder verbleibende beschriftete Knoten ohne Icon automatisch ein bestmöglich geratenes Schlüsselwort-Icon. Geben Sie in einer Cloud-Szene den Anbieter an (kubernetes / aws / azure / gcp), damit die Icon-Sets des Anbieters bevorzugt werden. Durchsuchen Sie IDs mit list_shape_libraries; der vollständige Bezeichnungskatalog befindet sich in letdraw://libraries (oder GET /libraries?items=1).

Datenbankprodukte werden zur Databases-Bibliothek aufgelöst: echte Logos, wo die Markenrichtlinie es erlaubt (PostgreSQL, MariaDB, Cassandra, DynamoDB, …), andernfalls DB-passende generische Icons (MySQL, Redis, MongoDB, …).

Kleines Beispiel im Excalidraw-Format

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

Hinweis

Excalidraw ist eine Marke des Excalidraw-Teams; LetDraw bietet lediglich Kompatibilität mit dem Dateiformat und steht in keiner Verbindung zu Excalidraw.

Weitere Tools

• diagram_from_code: Senden Sie docker-compose / Kubernetes-Manifest / Graphviz DOT / PlantUML / Terraform / Helm-Values / SQL DDL; LetDraw erkennt das Format automatisch und legt es aus.
• export_to_code: ein Diagramm nach Mermaid oder D2.
• generate_from_prompt: natürliche Sprache zu Diagramm, unter Verwendung des eigenen KI-Schlüssels Ihres Kontos.

Für Authentifizierung, Endpunkte, Scopes und Client-Einrichtung siehe API und MCP.