Hand-Drawn Diagrams

Generate validated hand-drawn Excalidraw diagrams, wireframes, and mockups

Tested · Works

Test report

Verdict
Tested · Works
Score
9.6/10
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-diagrams Generate 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.