← ClaudeAtlas

tldraw-diagramlisted

Create tldraw `.tldr` JSON files and tldraw SDK snippets that argue visually. Use when the user wants to visualize workflows, architectures, or concepts with tldraw.
genAIal/tldraw-diagram-skill · ★ 1 · Data & Documents · score 74
Install: claude install-skill genAIal/tldraw-diagram-skill
# tldraw Diagram Creator Generate `.tldr` JSON files (importable into tldraw.com / tldraw.dev) or tldraw SDK code (`editor.createShapes(...)`) that **argue visually**, not just display information. **Setup:** See `README.md` for installation notes. Rendering requires the tldraw web app or SDK — see the **Render & Validate** section below. ## Customization Colors and semantic styles live in `references/color-palette.md`. Read it before generating a diagram. tldraw ships a fixed semantic palette (`black`, `blue`, `green`, `red`, `orange`, `violet`, `light-blue`, `light-green`, `light-red`, `light-violet`, `yellow`, `grey`) — you can't invent hex colors, so the palette file maps each semantic purpose to a tldraw color token. --- ## Core Philosophy **Diagrams should ARGUE, not DISPLAY.** A diagram isn't formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning. **The Isomorphism Test**: If you removed all text, would the structure alone communicate the concept? If not, redesign. **The Education Test**: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches — it shows actual formats, real event names, concrete examples. --- ## Depth Assessment (Do This First) Before designing, determine what level of detail this diagram needs: ### Simple/Conceptual Diagrams Use abstract shapes when: - Explaining a mental model or philosophy