Tldraw Diagrams

Generates hand-drawn-style architecture/flowchart/ERD diagrams as .tldr files, exported via tldraw-cli.

Tested · Works

Test report

Verdict
Tested · Works
Score
8.8/10
Tested
Jul 13, 2026
Environment
Claude Code 2.x (agent harness)
Upstream re-checked
Aug 10, 2026 · d4380fd

Built a 2-node .tldr file exactly to the documented schema and confirmed the required document/page records plus unique single-character fractional indices — a naive freeform JSON guess (no records array, no schema block) wouldn't even open in tldraw or export. The README's headline claim 'Zero browser automation... no Chromium, no Playwright' directly contradicts the skill body's own puppeteer/pinned-Chrome export troubleshooting section.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 5/5
  • Triggers reliably 5/5
  • Output vs. baseline 9/10
  • Docs & honesty 3/5

What Tldraw Diagrams does

Produces whiteboard-style .tldr JSON diagrams (architecture, flowchart, sequence, ML, ERD, UML presets) and exports them to PNG/SVG via @kitschpatrol/tldraw-cli, with a vision-based self-check/auto-fix loop. Trigger on diagram/flowchart/architecture/visualization requests or proactively when explaining a system with 3+ components; explicitly routes logos and precise vector/UML work to other skills instead.

How to install Tldraw Diagrams

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

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger Tldraw Diagrams

  • /tldraw-skill Generates hand-drawn-style architecture/flowchart/ERD diagrams as .tldr files, exported via tldraw-cli.

It also activates on plain-language prompts like these:

  • 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

Frequently asked questions

Is the Tldraw Diagrams skill free?
Yes. The skill itself is free from Agents365-ai/tldraw-skill. SkillProof publishes the install command and an independent test verdict at no cost.
Does Tldraw Diagrams work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Jul 13, 2026. Verdict: Tested · Works. Built a 2-node .tldr file exactly to the documented schema and confirmed the required document/page records plus unique single-character fractional indices — a naive freeform JSON guess (no records array, no schema block) wouldn't even open in tldraw or export. The README's headline claim 'Zero browser automation... no Chromium, no Playwright' directly contradicts the skill body's own puppeteer/pinned-Chrome export troubleshooting section.
What is the Tldraw Diagrams SkillProof Score?
8.8/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 3/5.
How do I install Tldraw Diagrams?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Tldraw Diagrams with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.