excalidraw-diagram

Excalidraw Diagram Creator

Generate .excalidraw JSON files that argue visually, not just display information.

Setup: If the user asks you to set up this skill (renderer, dependencies, etc.), see README.md for instructions.

---

AY Automate Style Defaults (always apply unless told otherwise)

Visual style

roughness:   2          ← hand-drawn / sketchy (NOT clean/sharp) — boxes only
strokeWidth: 2          ← medium stroke weight
roundness:   {"type":3} ← rounded corners on all rectangles
fontFamily:  1          ← Virgil (handwritten font) — NOT mono, NOT sans

Boxes / shapes: strokeStyle: "dotted" + roughness: 2

Arrows / lines: strokeStyle: "solid" + roughness: 1 — arrows are clean, only boxes are dotted

Text rules

• Titles are free text — never wrap the title in a box. Just a plain text element above the diagram.
• Write titles in lowercase — "ralph loop", not "RALPH LOOP". Natural handwritten feel.
• Use line breaks inside node labels — split label and sub-label with \n
• Keep labels short and human — "reads files" not "file ingestion module"
• Write like you're explaining to a non-technical person
• Free-floating annotations are better than boxing everything

Color mode

• Dark (viewBackgroundColor: "#14141c") — internal docs, LinkedIn content, agent diagrams
• Light (viewBackgroundColor: "#f0edee") — client deliverables, onboarding, proposals
• Ask or infer from context. Default = dark.
• Colors come from references/color-palette.md.

Brand

Periwinkle #8182C1 is the accent. Never use generic blue #3b82f6 or any purple #7c3aed.

Output path: 008_Builds/excalidraw/output/{slug}.excalidraw

Render path: 008_Builds/excalidraw/output/{slug}.png

Render command:

cd .claude/skills/excalidraw-diagram/references && uv run python render_excalidraw.py ../../../008_Builds/excalidraw/output/{slug}.excalidraw

Common use cases:

• Agent architecture maps (Claude → n8n → Supabase → client)
• Client onboarding flows (what we build, in what order)
• AI pipeline explainers (for LinkedIn content)
• Internal system diagrams (for engineers on client projects)
• Ralph loop / agentic flow diagrams
• Competitor / comparison maps
• GTM funnel visualizations