← ClaudeAtlas

excalidraw-diagramlisted

Use this skill when the user wants to create visual diagrams that argue a point, explain an architecture, or teach a concept. Trigger on: "excalidraw", "visual diagram", "draw an architecture", "whiteboard diagram", "visualize this system", "create a diagram showing", "concept diagram", or any request for editable hand-drawn-style diagrams. Also trigger when the user wants diagrams with code snippets, JSON examples, or evidence artifacts embedded — this skill excels at educational technical diagrams. Generates .excalidraw JSON files with Playwright-based render-and-validate loop.
petermcalister/shared-skills · ★ 2 · Data & Documents · score 68
Install: claude install-skill petermcalister/shared-skills
# Excalidraw Diagram Creator Generate `.excalidraw` JSON files that **argue visually**, not just display information. ## Before You Start Read `references/color-palette.md` — it's the single source of truth for all colors. To rebrand, edit only that file. **First-time setup check:** If you haven't rendered before, install the headless Chromium binary once (the renderer itself is self-contained via PEP 723; Excalidraw loads from a vendored offline bundle — no CDN): ```bash ${user_config.python_runner} playwright install chromium ``` If this fails, you can still generate `.excalidraw` files — the user can open them in excalidraw.com or the VS Code extension. --- ## Core Philosophy A diagram isn't formatted text. It's a visual argument showing relationships, causality, and flow that words alone can't express. The shape should BE the meaning. **Isomorphism Test**: Remove all text — does the structure alone communicate the concept? **Education Test**: Could someone learn something concrete from this, or does it just label boxes? --- ## Design Process ### Step 0: Assess Depth | Simple/Conceptual | Comprehensive/Technical | |-------------------|------------------------| | Mental models, philosophies | Real systems, protocols, architectures | | Abstract shapes, labels | Concrete examples, code snippets, real API names | | ~30 seconds to explain | ~2-3 minutes of teaching | For technical diagrams: research actual specs before drawing. Use real event names, method names, d