Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

tldraw Whiteboard Diagrams

Generates hand-drawn style tldraw diagrams as .tldr JSON and exports them to PNG/SVG locally.

Design & UIIntermediate★ 117⑂ 8AI score 9/10Last updated: Jul 16, 2026

What it does

  • Detects requests like "diagram", "flowchart", "architecture chart" (or proactively when explaining 3+ component systems) and writes a valid .tldr JSON file.
  • Exports PNG/SVG via @kitschpatrol/tldraw-cli, then re-reads the image with vision to auto-fix text overflow, unbound arrows, and overlapping shapes.
  • Ships presets for architecture, flowchart, sequence, ML/DL, ERD and UML diagrams, plus a box-sizing formula so labels never clip and layouts stay uncramped.
  • Includes a review loop with minimal-edit rules (change color, add node, move shape) instead of regenerating everything.

Who it's for

  • Developers and architects who embed system diagrams in design docs or READMEs.
  • Anyone who wants a whiteboard-sketch aesthetic rather than a polished presentation chart.
  • Writers producing neural-network or pipeline figures for blogs and papers.
  • It explicitly routes you elsewhere (drawio, mermaid, plantuml) for opaque fills, auto-layout, or strict hollow-arrow UML.

Examples

  1. "Diagram an API Gateway, Auth Service, Order Service, PostgreSQL and Redis" → tier-based .tldr plus a 2x-scale PNG.
  2. "Flowchart the payment retry logic" → top-to-bottom flow with diamond decisions labeled Yes/No.
  3. "Sketch this Transformer block" → stacked layers with tensor shapes on a second text line and dashed skip connections.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Agents365-ai/tldraw-skill/HEAD/skills/tldraw-skill/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/tldraw-skill folder from the GitHub repo Agents365-ai/tldraw-skill into my ~/.claude/skills/tldraw-skill/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Agents365-ai/tldraw-skill.git && mkdir -p ~/.claude/skills && cp -r tldraw-skill/skills/tldraw-skill ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Check Node.js is available: node -v
  2. Install the CLI globally: npm install -g @kitschpatrol/tldraw-cli
  3. Verify it: tldraw --version
  4. Clone the skill: git clone https://github.com/Agents365-ai/tldraw-skill.git
  5. Copy it into your skills folder: mkdir -p ~/.claude/skills && cp -r tldraw-skill/skills/tldraw-skill ~/.claude/skills/
  6. Restart Claude Code and ask something like "draw an architecture diagram of my order system".
  7. If the first export fails with Could not find Chrome (ver. X), run npx puppeteer browsers install chrome@X once using the exact version from the error.
View source on GitHub ↗License: MIT