Skip to main content
affpapa.org
RU EN
skill CX Codex

hand-drawn-diagrams · muthuishere — Claude Code skill: Excalidraw sketches

Draws hand-drawn diagrams, flowcharts, wireframes and page mockups as Excalidraw files. Useful when a picture explains the flow faster than prose.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -a claude-code
npx skills add muthuishere/hand-drawn-diagrams --skill muthuishere-hand-drawn-diagrams -a claude-code
Open on GitHub

What hand-drawn-diagrams does

The skill turns a plain-language request into a .excalidraw file. It first picks a diagram type from a routing table: teaching diagram, brainstorm, UX flow, funnel, technical explainer, page mockup. Then it builds elements with a shared shape grammar and writes JSON with a non-empty elements array to /tmp/hand-drawn-diagrams/<slug>/.

Before any link is shared, scripts/validate_excalidraw.py checks the file and scripts/open_diagram.py produces a hosted edit URL and opens it in the browser. An empty diagram never ships — if that happens, the request probably described text rather than a drawing. Animation and PNG export are offered as follow-ups.

Output is a monochrome sketch in a single hand-drawn font by default. Color shows up only in page mockups, and only when you explicitly ask for webpage-like fidelity. Labels stay short: 1–5 words per shape, up to 3 bullets per container. Files land in /tmp/, not your workspace, unless you ask otherwise. Fast PNG and animated SVG rendering needs chrome-devtools-mcp; without it the skill falls back to Playwright.

What it helps with

  • turn a written process description into a flowchart
  • sketch a page wireframe for team review
  • explain a service architecture in one image
  • map out brainstorm output as a mind map
  • show a funnel or UX flow as a hand-drawn sketch

Example prompts for the agent

  • Draw a flowchart of the checkout process in Excalidraw
  • Sketch a wireframe of the login page, monochrome
  • Make a mind map of the caching options we just discussed

How to install hand-drawn-diagrams

1Skills CLI (Vercel)

npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -a claude-code
npx skills add muthuishere/hand-drawn-diagrams --skill muthuishere-hand-drawn-diagrams -a claude-code

2Manually: put the files in place

~/.claude/skills/muthuishere-hand-drawn-diagrams/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/muthuishere-hand-drawn-diagrams/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about hand-drawn-diagrams

How do I install hand-drawn-diagrams in Claude?

Run npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -a claude-code. The skill lands at ~/.claude/skills/muthuishere-hand-drawn-diagrams/SKILL.md.

What does hand-drawn-diagrams do?

It builds diagrams, flowcharts, wireframes and page mockups as Excalidraw files, validates each file with a script, and returns a hosted edit URL that opens in the browser.

Do I need Playwright for rendering?

Not if you install chrome-devtools-mcp, which renders PNG and animated SVG through a real browser. Without it, the skill uses Playwright as the fallback.

Source text

SKILL.md · MIT 
---
name: hand-drawn-diagrams
description: "Create hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups. Default to monochrome sketch output; allow restrained color only for page mockups when the user explicitly wants webpage-like fidelity. Use when the user asks for a diagram, flowchart, wireframe, sketch, visual explanation, mind map, architecture overview, or any Excalidraw-based drawing."
---

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.

© muthuishere · MIT · muthuishere/hand-drawn-diagrams

Similar skills

Everything for Design →

hand-drawn-diagrams by other authors comes first.

hand-drawn-diagrams nexu-io Generates hand-drawn Excalidraw diagrams from plain text prompts. It outputs animated SVGs, PNG exports, and hosted links for editing. CX Codex +1 2,800installs excalidraw Agents365-ai This skill draws flowcharts, architecture charts and other diagrams into .excalidraw files, then exports them to PNG or SVG. Handy when a picture beats a paragraph. CX Codex +1 4,600installs excalidraw-skill yctimlin This skill gives an agent a live Excalidraw canvas for diagrams, file exchange, and scene edits. Use it for Mermaid conversion, snapshots, and element-level changes. CX Codex +1 510installs mermaid-diagrams davila7 A skill that teaches your agent Mermaid syntax: class, sequence, ERD, C4 and flowchart diagrams. Useful when you need to document architecture or a database schema. 1,180installs excalidraw-diagram coleam00 Generates .excalidraw JSON diagram files for technical architectures and workflows. Helps turn system specs or logic into diagrams with real data examples. CX Codex +1 8,500installs drawio-logical-diagrams giuseppe-trisciuoglio Generates draw.io native XML files for logical flowcharts, system architecture, BPMN, and UML diagrams. Useful when documenting abstract logic without cloud provider icons. CX Codex +1 4,000installs excalidraw-diagram-generator official github Turn a plain-language description into an Excalidraw diagram. Useful for mapping processes, system structure, and relationships between entities. 31,639installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor