Tldraw Diagrams

Genera diagrammi architetturali/flowchart/ERD in stile disegnato a mano come file .tldr, esportati tramite tldraw-cli.

di Agents365-ai · Agents365-ai/tldraw-skill

Promosso ★ 8.8/10

Tldraw Diagrams — Genera diagrammi architetturali/flowchart/ERD in stile disegnato a mano come file .tldr, esportati tramite tldraw-cli.

Cosa fa

Produce diagrammi JSON .tldr in stile lavagna (preset di architettura, flowchart, sequenza, ML, ERD, UML) e li esporta in PNG/SVG tramite @kitschpatrol/tldraw-cli, con un ciclo di auto-verifica/auto-correzione basato sulla visione. Attivalo su richieste di diagrammi/flowchart/architettura/visualizzazione o proattivamente quando si spiega un sistema con 3+ componenti; instrada esplicitamente loghi e lavoro vettoriale/UML preciso verso altri skill.

Rapporto di test

Ho costruito un file .tldr a 2 nodi esattamente secondo lo schema documentato, confermando i record document/page richiesti più gli indici frazionari a carattere singolo univoci — un tentativo JSON in freeform (senza array records, senza blocco schema) non si sarebbe nemmeno aperto in tldraw né esportato. L'affermazione principale del README 'Zero browser automation... no Chromium, no Playwright' contraddice direttamente la sezione di troubleshooting sull'export con puppeteer/Chrome pinnato presente nel corpo stesso dello skill.

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

Installazione

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

Comandi e prompt di esempio

  • /tldraw-skillGenera diagrammi architetturali/flowchart/ERD in stile disegnato a mano come file .tldr, esportati tramite tldraw-cli.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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