Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .tldr JSON files and exports to PNG/SVG locally using @kitschpatrol/tldraw-cli.
tldraw-skill turns a description of a system into a whiteboard-style diagram, writing the drawing as a .tldr JSON file and exporting it to PNG or SVG through the @kitschpatrol/tldraw-cli command-line tool. The output has a clean hand-drawn aesthetic with rich shape libraries and smooth arrow routing, well-suited to casual or whiteboard-style visualizations, and the font can be switched from hand-drawn to a cleaner style.
Use it when a request explicitly asks for a diagram, flowchart, architecture chart, or sketch, and proactively when explaining a system with three or more interacting components, a multi-step process or pipeline, or relationships between services. The workflow starts by confirming the CLI dependency is present, then plans shapes, connections, and a coordinate layout before writing JSON. A draft PNG is exported for preview, followed by a self-check in which a vision-enabled model reads the rendered image to catch defects such as text overflowing a box, overlapping labels, or 'friendless' arrows with an unbound end, then auto-fixes them by resizing boxes, spacing shapes apart, or binding arrow ends to shape ids. After up to two self-check rounds it enters a review loop with the user, applying targeted single-element JSON edits for small changes and regenerating fully for layout-wide changes, then exports the approved version to all requested formats.
Prerequisites are Node.js and the tldraw-cli on PATH; because export renders through a pinned Chrome build via puppeteer, the first export can fail with a message naming the exact Chrome version to install once. The skill is explicit about routing elsewhere: logos, solid-fill graphics, or white-on-dark shapes belong to drawio because tldraw has no opaque fill; precise vector geometry and strict UML go to drawio or plantuml; automatic layout of many nodes suits mermaid since tldraw needs manual coordinates; and a pixel-faithful copy of an existing image is not a diagramming task. The self-check is gracefully skipped when no vision-capable model is available.
A .tldr JSON drawing, exported to PNG or SVG via the @kitschpatrol/tldraw-cli tool.
Node.js and @kitschpatrol/tldraw-cli on PATH. The first export may also require a one-time puppeteer Chrome install, whose exact version the error message names.
After a draft export, a vision-enabled model reads the PNG to catch text overflow, overlapping labels, and unbound 'friendless' arrows, then auto-fixes them before showing the user. It is skipped if no vision model is available.
No. tldraw has no opaque fill, so logos, solid-color graphics, and white-on-dark shapes should go to the drawio skill or the original vector file.
Use mermaid for automatic layout of many nodes since tldraw needs manual coordinates, and drawio or plantuml for precise vector geometry or strict UML.
Quick Setup:
.claude/skills/Repository
agents365-ai/365-skills