hand-drawn-diagrams

Installation
SKILL.md

Follow the instructions in ./workflow.md.

Workflow

  1. Route — Read ./steps/step-01-route.md. Pick one diagram type from the routing table (references/activation-routing.xml) based on user intent (teach, brainstorm, UX flow, funnel, technical explainer, medical, creative, or page mockup).
  2. Draw — Read ./steps/step-02-draw.md. Design the diagram using the shared shape grammar (references/fundamental-shapes.md), then write the .excalidraw JSON file with a non-empty elements array to /tmp/hand-drawn-diagrams/<slug>/.
  3. Validate & Deliver — Read ./steps/step-03-validate.md. Run scripts/validate_excalidraw.py, then scripts/open_diagram.py to generate a hosted edit URL and open it in the browser. Offer animation and PNG as follow-ups.

Key Rules

  • Hand-drawn style, same sketch font, monochrome by default
  • Labels: 1–5 words per shape; max 3 short bullets per container
  • Write .excalidraw files to /tmp/, not the user's workspace (unless they ask)
  • Always validate before generating URLs — never share an empty diagram
  • Rendering priority: Chrome DevTools MCP (fast) → Playwright (fallback)

References

Installs
527
GitHub Stars
72
First Seen
Mar 23, 2026
hand-drawn-diagrams — muthuishere/hand-drawn-diagrams