mcpField
H
hand-drawn-diagrams

hand-drawn-diagrams

github.com/muthuishereDesign & UI83629 installsUpdated 5w ago
Repository

About hand-drawn-diagrams

hand-drawn-diagrams is a skill for creating hand-drawn-style diagrams as Excalidraw files. It selects a diagram type based on the request, validates the result, and can generate a hosted editing URL; Chrome DevTools MCP is an optional rendering route.

Key features

  1. 01Route requests to a diagram type
  2. 02Create hand-drawn Excalidraw diagrams
  3. 03Validate diagram files before delivery
  4. 04Generate a hosted editing URL
  5. 05Optional browser-based PNG and SVG rendering

Use cases

  1. 01Create a diagram to explain a technical concept
  2. 02Map a UX flow or funnel
  3. 03Produce a brainstorm or page mockup diagram

MCP support

The workflow can use Chrome DevTools MCP for browser-based rendering of PNGs and animated SVGs. Playwright is used as a fallback.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams

After installing, type/hand-drawn-diagramsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

.gitignore
LICENSE
CLAUDE.md
README.md
.gitattributes
INSTALL.md
AGENTS.md
MANUAL-INSTALL.md
install.cmd
install.sh
.github/workflows/
skill-review.yml
docs/
animate.html
edit.html
index.html
installscripts/
install.py
uninstall.py
references/
activation-routing.xml
animation-spec.md
bullets.md
arrow-routing.md
color-palette.md
element-templates.md
index.md
ideation-diagrams.md
creative-raw-diagrams.md
fundamental-shapes.md
medical-diagrams.md
json-schema.md
page-mockup-diagrams.md
patterns.md

Details

From the project README

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

  • references/index.md — full reference index
  • references/activation-routing.xml — route selection rules and delivery modes
  • references/fundamental-shapes.md — core shape language

Optional: Chrome DevTools MCP

For fast PNG and animated SVG rendering, install chrome-devtools-mcp (uses a real browser, no Playwright needed). See INSTALL.md for setup. Without it, rendering falls back to Playwright.

Comments

Markdown supported