How do I install the Hand Drawn Diagrams skill?

Run npx skillmds add muthuishere/hand-drawn-diagrams in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Hand Drawn Diagrams safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Hand Drawn Diagrams?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Hand Drawn Diagrams free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Hand Drawn Diagrams?

muthuishere (@muthuishere) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Hand Drawn Diagrams by muthuishere — Agent Skill

Name: Hand Drawn Diagrams
Rating: 4.2 (5 reviews)
Author: muthuishere

Hand Drawn Diagrams

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.

muthuishere c645d53 14 files · 28.7 KB Updated Sep 9, 2026

File contents

Follow the instructions in ./workflow.md.

Workflow

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).
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>/.
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.

---name: hand-drawn-diagramsdescription: 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.

Frequently asked questions