Tldraw Diagrams

Generuje diagramy architektury/flowchartów/ERD w stylu rysowanym ręcznie jako pliki .tldr, eksportowane przez tldraw-cli.

Autor: Agents365-ai · Agents365-ai/tldraw-skill

Testowano · Działa ★ 8.8/10

Tldraw Diagrams — Generuje diagramy architektury/flowchartów/ERD w stylu rysowanym ręcznie jako pliki .tldr, eksportowane przez tldraw-cli.

Co robi ten skill

Tworzy diagramy .tldr w formacie JSON w stylu tablicy (architektura, flowchart, sekwencja, ML, ERD, presety UML) i eksportuje je do PNG/SVG przez @kitschpatrol/tldraw-cli, z pętlą samosprawdzania/auto-poprawiania opartą na wizji. Uruchamia się przy prośbach o diagram/flowchart/architekturę/wizualizację lub proaktywnie, gdy tłumaczy system z 3+ komponentami; wyraźnie kieruje loga i precyzyjną pracę wektorową/UML do innych skillów.

Raport z testu

Zbudowano 2-węzłowy plik .tldr dokładnie wg udokumentowanego schematu i potwierdzono wymagane rekordy document/page oraz unikalne jednoznakowe indeksy frakcyjne — naiwne, swobodne zgadywanie JSON-a (bez tablicy records, bez bloku schema) w ogóle nie otworzyłoby się w tldraw ani nie wyeksportowało. Główne hasło w README 'Zero automatyzacji przeglądarki... żadnego Chromium, żadnego Playwright' bezpośrednio zaprzecza sekcji rozwiązywania problemów z eksportem opartej na puppeteer/przypiętym Chrome w treści samego skillu.

Testowano: 2026-07-13 · Claude Code 2.x (agent harness)

Instalacja

git clone https://github.com/Agents365-ai/tldraw-skill
cd tldraw-skill
mkdir -p ~/.claude/skills
cp -r skills/tldraw-skill ~/.claude/skills/tldraw-skill

Komendy i przykładowe prompty

  • /tldraw-skillGeneruje diagramy architektury/flowchartów/ERD w stylu rysowanym ręcznie jako pliki .tldr, eksportowane przez tldraw-cli.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

  • Draw a flowchart of this architecture with three services and a queue
  • Create a hand-drawn style ERD diagram for these database tables
  • Sketch a sequence diagram showing how these components interact