Tldraw Skill

Generates whiteboard-style diagrams using tldraw's hand-drawn aesthetic. Works across platforms via the tldraw-cli npm package. The skill tries to be smart about when to proactively suggest a diagram (3+ components, complex flows) versus waiting for you to ask. It includes a self-check step where Claude uses vision to catch overlapping shapes or clipped labels before showing you the draft, which is a nice touch. Supports the usual suspects: flowcharts, architecture diagrams, sequence flows, ERDs. Outputs to .tldr JSON with PNG/SVG exports. The iterative editing workflow is solid, with targeted edits for small changes and full regeneration when you need to flip the layout. Good for casual technical diagrams where you want that sketch-on-a-whiteboard feel instead of polished Visio boxes.

skills.sh installs: 3.8K
GitHub stars: 100
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add agents365-ai/365-skills --skill tldraw-skill --agent claude-code

Installs into .claude/skills of the current project.

Files

tldraw Whiteboard Diagrams

Overview

Generate modern whiteboard-style diagrams as .tldr JSON files and export to PNG/SVG using @kitschpatrol/tldraw-cli. tldraw produces clean hand-drawn aesthetic diagrams with rich shape libraries and smooth arrow routing — well-suited for casual or whiteboard-style visualizations.

Format: .tldr JSON Export: PNG, SVG (via @kitschpatrol/tldraw-cli) Aesthetic: Hand-drawn whiteboard style by default; switchable to clean fonts via font prop.

When to Use

Explicit triggers: user says "diagram", "flowchart", "draw", "visualize", "whiteboard diagram", "tldraw diagram", "architecture diagram", "sketch this out".

Proactive triggers:

Explaining a system with 3+ interacting components
Describing a multi-step process, data flow, or pipeline
Showing relationships between services/modules
Architecture overviews, sequence flows, decision trees, ML model layers

Skip when: a simple list or table suffices, the user wants a polished business-presentation diagram (prefer drawio-skill), or the user is in a quick Q&A flow.

When NOT to use it — route elsewhere:

SKILL.md on GitHub