Tldraw Skill

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:

• Logos / solid-color graphics / filled icons: tldraw has no opaque fill (solid = light tint; white-on-dark can't be reproduced) → use the drawio skill or the original vector file.
• Precise vector geometry or strict (hollow-arrow) UML → drawio (or plantuml for UML).
• Auto-layout of many nodes → mermaid (tldraw needs manual coordinates).
• A pixel-faithful copy of an existing image → not a diagram-skill task.

Prerequisites

# Install tldraw-cli
npm install -g @kitschpatrol/tldraw-cli

# Verify
tldraw --version

Works identically on macOS, Windows, and Linux.

First-export note: tldraw export renders through a pinned Chrome build via puppeteer. The first export can fail with Could not find Chrome (ver. <x>). The error names the exact version it needs — install it once, then exports work:

# The error message names the version; substitute it here
npx puppeteer browsers install chrome@<version-from-error>

(Installs to ~/.cache/puppeteer; only needed once per CLI version.)

Workflow

Before starting, assess whether the user's request is specific enough. If key details are missing, ask 1-3 focused questions:

• Diagram type — which preset? (Architecture, Flowchart, Sequence, ML/DL, ERD, UML, or general)
• Output format — PNG (default), SVG?
• Output location — default is the user's working dir; honor any explicit path the user gives (e.g. "put it in ./artifacts/"). Don't ask if they didn't mention one.
• Scope/fidelity — how many components? Any specific technologies or labels?

Skip clarification if the request already specifies these details or is clearly simple (e.g., "draw a flowchart of X").

1. Check deps — verify tldraw --version succeeds; if missing, run npm install -g @kitschpatrol/tldraw-cli.
2. Plan — identify shapes (geo type per node), connections (arrows with source/target), and layout (TB or LR, group by tier/role). Sketch a coordinate grid before writing JSON.
3. Generate — write the .tldr JSON file. Default output dir is the user's working dir; if the user specified a path or directory (e.g. ./artifacts/), mkdir -p it first and write there. Apply the same dir choice to PNG/SVG exports in steps 4 and 7.
4. Export draft — run CLI to produce a PNG for preview.
5. Self-check — use the agent's built-in vision capability to read the exported PNG, catch obvious issues, auto-fix before showing the user (requires a vision-enabled model such as Claude Sonnet/Opus). If vision is unavailable, skip this step.
6. Review loop — show image to user, collect feedback, apply targeted JSON edits, re-export, repeat until approved.
7. Final export — export the approved version to all requested formats; report file paths for both the .tldr source and exported image(s).

Step 5: Self-Check

After exporting the draft PNG, use the agent's vision capability (e.g., Claude's image input) to read the image and check for these issues before showing the user. If the agent does not support vision, skip self-check and show the PNG directly.

tldraw's own AI agent flags exactly three structural defects — text overflow (a box too small for its label), overlapping text, and friendless arrows (an arrow with an unbound end). The first three rows below target those; size boxes correctly up front (see "Sizing boxes to fit labels") and they rarely occur.

• Max 2 self-check rounds — if issues remain after 2 fixes, show the user anyway.
• Re-export after each fix and re-read the new PNG.

Step 6: Review Loop

After self-check, show the exported image and ask the user for feedback.

Targeted edit rules — for each type of feedback, apply the minimal JSON change:

Rules:

• For single-element changes: edit the existing JSON in place — preserves layout tuning from prior iterations.
• For layout-wide changes (e.g., swap LR↔TB, "start over"): regenerate full JSON.
• Overwrite the same {name}.png each iteration — do not create v1, v2, v3 files.
• After applying edits, re-export and show the updated image.
• Loop continues until user says approved / done / LGTM.
• Safety valve: after 5 iteration rounds, suggest the user open the .tldr file in tldraw.com or the desktop app for fine-grained adjustments.

File Format

Complete .tldr Skeleton

{
  "tldrawFileFormatVersion": 1,
  "schema": {
    "schemaVersion": 1,
    "storeVersion": 4,
    "recordVersions": {
      "asset": {"version": 1, "subTypeKey": "type", "subTypeVersions": {"image": 2, "video": 2, "bookmark": 0}},
      "camera": {"version": 1},
      "document": {"version": 2},
      "instance": {"version": 17},
      "instance_page_state": {"version": 3},
      "page": {"version": 1},
      "shape": {"version": 3, "subTypeKey": "type", "subTypeVersions": {"group": 0, "embed": 4, "bookmark": 1, "image": 2, "text": 1, "draw": 1, "geo": 7, "line": 0, "note": 4, "frame": 0, "arrow": 1, "highlight": 0, "video": 1}},
      "instance_presence": {"version": 4},
      "pointer": {"version": 1}
    }
  },
  "records": [