Tldraw Diagram Skill — Development skill for Claude Code

tldraw Diagram Skill for Claude Code

A [Claude Code](https://docs.anthropic.com/en/docs/claude-code) skill that generates [tldraw](https://tldraw.com) diagrams — either as `.tldr` files (importable into tldraw.com) or as tldraw SDK code snippets (`editor.createShapes(...)`).

**Unofficial community project.** This skill is not affiliated with, endorsed by, or supported by tldraw Inc. "tldraw" is used purely to describe compatibility with the tldraw file format and SDK.

**Philosophy: Diagrams should argue visually**, not just display information. The skill designs each diagram around visual patterns (fan-out, convergence, timeline, cycle) rather than uniform card grids.

What it does

• .tldr file generation — JSON files you open with File > Open in the tldraw web app or load via loadSnapshot().
• SDK snippet generation — TypeScript code for tldraw SDK apps (editor.createShapes / createBindings).
• tldraw-native — Uses tldraw's actual shape vocabulary (geo, note, frame, arrow, text, line, draw) and semantic color palette. No custom hex colors, no invented shapes.
• Evidence-driven — Technical diagrams include real code snippets and JSON samples inside note (sticky) shapes.
• Headless PNG renderer — Ships a Playwright-based renderer that launches headless Chromium, loads tldraw from esm.sh, and exports PNG via tldraw's own exportToBlob.

Installation

1. Add the skill to your Claude Code project

Add the skill path to your project's `CLAUDE.md` or `.claude/settings.json`:

## Skills

| Skill | Path | When to use |
|-------|------|-------------|
| **tldraw** | `path/to/tldraw-skill/SKILL.md` | When the user wants a tldraw diagram (.tldr or SDK code) |

2. Set up the renderer (optional)

The renderer converts `.tldr` files to PNG for visual verification. It requires Python 3.11+ and [uv](https://docs.astral.sh/uv/).

cd path/to/tldraw-skill/references
uv sync
uv r