Hand-Drawn Diagrams
Generate validated hand-drawn Excalidraw diagrams, wireframes, and mockups
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Jul 25, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Jul 30, 2026 · fa0d807
⚠ This skill is no longer available upstream. Our re-check on Aug 10, 2026 couldn't find it any more (repo unreachable/deleted). The test below is what we measured on Jul 25, 2026 and we're leaving it up as a record — but there is nothing left to install, so we've removed the command.
The bundled validator is real and pure-Python, so I ran it live on two signup-flow diagrams. My no-skill Excalidraw JSON came back INVALID - a dangling arrow binding to a nonexistent id, a stacked layout, and six style warnings that had dropped the hand-drawn look - while the schema-guided version passed with 0 errors. The json-schema reference plus validate_excalidraw.py catch structural breakage before rendering, a measurable edge over ad-hoc generation. PNG and animated-SVG export need uv+Playwright or chrome-devtools-mcp, but the core deliverable (a valid, hand-drawn .excalidraw file plus hosted edit URL) works without them. Install steps and docs are thorough and honest about the Playwright fallback being slow.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 9/10
- Docs & honesty 5/5
What Hand-Drawn Diagrams does
Generates hand-drawn-style Excalidraw diagrams - flowcharts, explainers, wireframes, and page mockups - as valid .excalidraw JSON, then checks the output with a bundled Python validator before delivering a hosted edit URL. Triggers when you ask to sketch, draw, or diagram a flow, architecture, or UI in a hand-drawn look. Defaults to monochrome sketch styling, with optional PNG and self-drawing animated SVG export via Chrome DevTools MCP or Playwright.
How to install Hand-Drawn Diagrams
Nothing to install: the source repository no longer has this skill. If the author brings it back, our daily re-check will pick it up and the command will reappear here.
Commands — how to trigger Hand-Drawn Diagrams
-
/hand-drawn-diagramsGenerate validated hand-drawn Excalidraw diagrams, wireframes, and mockups
It also activates on plain-language prompts like these:
-
Sketch a hand-drawn flowchart of our signup flow in Excalidraw -
Draw a wireframe mockup for the onboarding screen, sketch style -
Make a hand-drawn architecture diagram for this system
Frequently asked questions
- Is the Hand-Drawn Diagrams skill free?
- Yes. The skill itself is free from muthuishere/hand-drawn-diagrams. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Hand-Drawn Diagrams work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 25, 2026. Verdict: Tested · Works. The bundled validator is real and pure-Python, so I ran it live on two signup-flow diagrams. My no-skill Excalidraw JSON came back INVALID - a dangling arrow binding to a nonexistent id, a stacked layout, and six style warnings that had dropped the hand-drawn look - while the schema-guided version passed with 0 errors. The json-schema reference plus validate_excalidraw.py catch structural breakage before rendering, a measurable edge over ad-hoc generation. PNG and animated-SVG export need uv+Playwright or chrome-devtools-mcp, but the core deliverable (a valid, hand-drawn .excalidraw file plus hosted edit URL) works without them. Install steps and docs are thorough and honest about the Playwright fallback being slow.
- What is the Hand-Drawn Diagrams SkillProof Score?
- 9.6/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 5/5.
- How do I install Hand-Drawn Diagrams?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Hand-Drawn Diagrams with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.