Rysowanie z AI

Ta strona jest materiałem odniesienia dotyczącym tego, jak klient AI (ChatGPT, Claude, Gemini, Cursor, …) rysuje profesjonalne diagramy w LetDraw przez API i MCP. Model nie musi zgadywać schematu letdraw: wszystko poniżej jest również przedstawiane modelowi w chwili wywołania, więc połączony model może to odczytać i narysować poprawnie za pierwszym razem.

Jak model uczy się LetDraw

Nie trenujesz modelu ponownie; dostarczasz mu kontekst w chwili wywołania. LetDraw udostępnia całą swoją wiedzę o rysowaniu przez serwer MCP i REST API:

Co	MCP	REST
Jak rysować (ten przewodnik, odczytywalny maszynowo)	resource `letdraw://capabilities`	`GET /capabilities`
Każda biblioteka ikon + wszystkie etykiety pozycji	resource `letdraw://libraries`	`GET /libraries?items=1`
Identyfikatory bibliotek + liczby	tool `list_shape_libraries`	`GET /libraries`
Znajdź ikonę dla komponentu	tool `search_icons`	`GET /icons?query=…`
Utwórz / zaktualizuj diagram	tools `create_diagram` / `update_diagram`	`POST` / `PATCH /documents`

Dobrze zachowujący się klient odczytuje raz zasoby letdraw://capabilities i letdraw://libraries, a następnie rysuje. Skieruj swoje AI na punkt końcowy MCP (zobacz API i MCP); resztę odkrywa samodzielnie.

Złote zasady profesjonalnego wyniku

Używaj prawdziwych ikon, nie rysuj ich. Wywołaj search_icons (np. "postgres", "redis", "kubernetes pod", "load balancer") i umieść zwróconą wartość ref w polu iconRef ramki (np. "databases/PostgreSQL"). Serwer stempluje dokładnie tę ikonę i układa etykietę pod nią.
Utrzymuj kontenery czyste. Duże ramki grupujące (Kubernetes Cluster, VPC, pasmo podsieci) powinny być szerokie (> 420px) lub być ramką typu frame. Ikony są stemplowane tylko na ramkach wielkości węzła (60-420px szerokości, 40-260px wysokości). Umieść tytuł kontenera jako samodzielny tekst nad nim, a nie jako powiązaną etykietę.
Zagnieżdżaj celowo. Zewnętrzny kolorowy kontener do ramek wielkości węzła w środku, każda z własną ikoną. Dwa lub trzy poziomy czytają się najlepiej (Cluster do Worker Node do Pod).
Prowadź strzałki czysto. Dla połączeń prostokątnych / o wielu załamaniach wyślij strzałkę z 3+ punktami points; powiąż końce z kształtami, aby pozostały dołączone.
Koduj kolorem według roli i utrzymuj spójne odstępy.

Wysyłanie sceny

create_diagram / update_diagram przyjmują elements albo jako natywne elementy LetDraw, albo jako standardowy Excalidraw JSON (automatycznie wykrywany i konwertowany na serwerze). Tworzenie Excalidraw JSON to najłatwiejsza droga do wysokiej jakości; natywny LetDraw daje Ci charakterystyczne dla LetDraw funkcje poniżej.

Wspólne pola elementów

Typy kształtów

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, strzałki blokowe (arrow-right/left/up/down), a także text, image (dataURL), frame (oznaczona etykietą przerywana sekcja; ustaw name), embed (url), math (LaTeX w text), code (kod źródłowy w text, language). Kształt niesie swoją etykietę za pomocą text w środku (w formacie Excalidraw, przez element tekstowy z containerId).

Strzałki

type: "arrow" oraz:

arrowShape: straight | curved | elbow | s-curve | smart | multipoint | multipoint-curved. smart automatycznie prowadzi wokół innych kształtów. multipoint to ostra łamana wielosegmentowa; multipoint-curved to jej wygładzona wersja; obie odczytują swoje narożniki z points.
points: {x, y}[] w bezwzględnych współrzędnych świata (od pierwszego do ostatniego). 2 punkty = prosta, 3 = kolanko (pojedyncze załamanie), 4+ = prowadzona łamana. Połączenie prostokątne: points: [{x1,y1},{x2,y1},{x2,y2}].
controlPoint / controlPoint2: uchwyty beziera dla 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. Używaj grotów UML (triangle-outline = generalizacja, diamond = kompozycja) oraz grotów krzywej kruczej stopy ER dla liczności.
startBinding / endBinding: {elementId, focus:{x,y}}: powiąż koniec z kształtem (focus to punkt 0..1 w prostokącie ograniczającym kształtu), aby strzałka za nim podążała.

W formacie Excalidraw wyślij strzałkę z points + startArrowhead/endArrowhead; konwerter mapuje 2 / 3 / 4+ punkty na straight / elbow / s-curve i ponownie oblicza powiązania.

Linie

type: "line" oraz lineShape: straight | multipoint | multipoint-curved. Linie wielopunktowe niosą points (tak samo jak strzałki, bez grota). Ponadto freedraw (points[]) i highlight (półprzezroczysty marker).

Ikony: przepływ `iconRef`

search_icons({ query }) tworzy uszeregowaną listę [{ library, label, ref }].
Ustaw iconRef: "<library>/<Item Label>" (lub { library, label }) na docelowej ramce.
create_diagram stempluje tę ikonę u góry na środku i przenosi etykietę pod nią.

Jawny iconRef zawsze wygrywa; następnie każdy pozostały oznaczony etykietą węzeł bez ikony automatycznie otrzymuje najlepiej dopasowaną ikonę słowa kluczowego. W scenie chmurowej podaj dostawcę (kubernetes / aws / azure / gcp), aby preferowane były zestawy ikon danego dostawcy. Przeglądaj identyfikatory za pomocą list_shape_libraries; pełny katalog etykiet znajduje się w letdraw://libraries (lub GET /libraries?items=1).

Produkty baz danych rozwiązują się do biblioteki Databases: prawdziwe logo, gdy polityka marki na to zezwala (PostgreSQL, MariaDB, Cassandra, DynamoDB, …), w przeciwnym razie odpowiednie dla baz danych ogólne ikony (MySQL, Redis, MongoDB, …).

Mały przykład w formacie 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" } }
]

Inne narzędzia

diagram_from_code: wyślij docker-compose / manifest Kubernetes / Graphviz DOT / PlantUML / wartości Terraform / Helm / SQL DDL; LetDraw automatycznie wykrywa format i tworzy jego układ.
export_to_code: diagram do Mermaid lub D2.
generate_from_prompt: język naturalny do diagramu, z użyciem własnego klucza AI Twojego konta.

Aby poznać uwierzytelnianie, punkty końcowe, zakresy i konfigurację klienta, zobacz API i MCP.