Tldraw Diagrams
Generates hand-drawn-style architecture/flowchart/ERD diagrams as .tldr files, exported via tldraw-cli.
Test report
- Verdict
- Tested · Works
- Score
- 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-skillGenerates 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.