Tldraw Diagrams

Genereert architectuur-/flowchart-/ERD-diagrammen in handgetekende stijl als .tldr-bestanden, geëxporteerd via tldraw-cli.

Door Agents365-ai · Agents365-ai/tldraw-skill

Getest · Werkt ★ 8.8/10

Tldraw Diagrams — Genereert architectuur-/flowchart-/ERD-diagrammen in handgetekende stijl als .tldr-bestanden, geëxporteerd via tldraw-cli.

Wat het doet

Produceert whiteboard-stijl .tldr JSON-diagrammen (architecture, flowchart, sequence, ML, ERD, UML-presets) en exporteert ze naar PNG/SVG via @kitschpatrol/tldraw-cli, met een vision-based self-check/auto-fix-lus. Trigger op diagram-/flowchart-/architectuur-/visualisatieverzoeken, of proactief bij het uitleggen van een systeem met 3+ componenten; routeert logo's en precies vector-/UML-werk expliciet naar andere skills.

Testrapport

Bouwde een .tldr-bestand met 2 nodes exact volgens het gedocumenteerde schema en bevestigde de vereiste document-/page-records plus unieke single-character fractional indices — een naïeve vrije JSON-gok (geen records-array, geen schema-block) zou niet eens openen in tldraw of exporteren. De headline-claim van de README 'Zero browser automation... no Chromium, no Playwright' spreekt de eigen puppeteer-/pinned-Chrome-exporttroubleshootingsectie in de skill-body regelrecht tegen.

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

Installatie

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

Commando's en voorbeeldprompts

  • /tldraw-skillGenereert architectuur-/flowchart-/ERD-diagrammen in handgetekende stijl als .tldr-bestanden, geëxporteerd via tldraw-cli.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • 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