Tldraw Skill
Generate whiteboard-style flowcharts and architecture diagrams as .tldr files and export PNG/SVG when explaining systems or documenting a solo project.
Overview
tldraw-skill is an agent skill most often used in Build (also Validate and Idea) that generates .tldr diagrams and PNG/SVG exports for flowcharts and architecture visuals.
Install
npx skills add https://github.com/agents365-ai/365-skills --skill tldraw-skillWhat is this skill?
- Produces .tldr JSON plus local PNG/SVG export via @kitschpatrol/tldraw-cli
- Proactive trigger when a system has 3+ components or complex data flows
- Hand-drawn whiteboard aesthetic with shape libraries and arrow routing
- Optional vision-model self-check step (skipped if no vision model)
- MIT skill; requires Node.js and global tldraw CLI on PATH
- Exports .tldr JSON plus PNG and SVG via @kitschpatrol/tldraw-cli
- Proactive use when explaining systems with 3+ components
Adoption & trust: 583 installs on skills.sh; 8 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need to explain a multi-part system or flow, and text alone makes the structure hard to follow for you or collaborators.
Who is it for?
Solo builders documenting service boundaries, user flows, or agent pipelines with a casual whiteboard look inside the coding agent.
Skip if: Pixel-perfect marketing creative, CAD, or teams that mandate PlantUML/Mermaid-only text diagrams with no CLI install.
When should I use this skill?
User requests diagrams, flowcharts, architecture charts, or visualizations; or when explaining systems with 3+ components, complex data flows, or relationships that benefit from visuals.
What do I get? / Deliverables
You get versionable .tldr source plus exported PNG or SVG diagrams you can drop into docs, PRs, or pitch decks.
- .tldr diagram JSON
- PNG export
- SVG export
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Diagram outputs most often ship alongside product and technical documentation during the build phase. Docs is the canonical shelf for visual explanations of architecture, flows, and multi-component systems.
Where it fits
Map competitor product modules as a quick architecture sketch before choosing what to build.
Draw onboarding and API touchpoints to align MVP boundaries with a cofounder.
Export a service diagram into the repo README after adding a new worker and queue.
Attach an updated data-flow diagram to a PR that changes authentication paths.
How it compares
Diagram generator skill with local CLI export—not an MCP server or in-browser Figma replacement.
Common Questions / FAQ
Who is tldraw-skill for?
Indie developers and small teams who want architecture and flow diagrams from the same agent session that writes code, without manual whiteboard tools.
When should I use tldraw-skill?
During build when writing technical docs; during validate when sketching scope and flows; during idea when mapping research concepts—whenever 3+ components or complex relationships need a visual.
Is tldraw-skill safe to install?
It runs a global npm CLI and writes files locally; review the Security Audits panel on this Prism page and vet @kitschpatrol/tldraw-cli before using on sensitive repos.
SKILL.md
READMESKILL.md - 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 ```bash # 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: ```bash # 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 flowch