Curated Claude Code catalog
Updated 07.05.2026 · 19:39 CET
01 / Skill
muthuishere

hand-drawn-diagrams

Quality
9.0

This AI skill transforms natural language prompts into hand-drawn diagrams in Excalidraw's sketch style. It automatically infers the diagram type, lays out elements, and provides a hosted edit URL, an animated SVG that draws itself stroke by stroke, and static PNG exports. It streamlines diagram creation by removing the need for manual drawing and layout, offering a clean workspace by saving temporary files. It's ideal for quickly visualizing ideas, systems, and workflows without opening a dedicated app.

USP

Generates editable, animated Excalidraw diagrams from natural language, automating layout and diagram type selection. Provides a hosted URL, animated SVG, and PNG, keeping your workspace clean. The README is comprehensive with clear exampl…

Use cases

  • 01Creating study notes and exam revision maps for students.
  • 02Designing lesson explainers and concept breakdowns for teachers.
  • 03Developing system and API flow diagrams for architects.
  • 04Sketching UX flows and wireframes for designers.
  • 05Illustrating sales funnels and conversion visuals.

Detected files (1)

  • SKILL.mdskill
    Show content (948 bytes)
    ---
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.
---

Follow the instructions in `./workflow.md`.

Key references:
- `references/index.md`
- `references/activation-routing.xml`
- `references/fundamental-shapes.md`

## Recommended: Chrome DevTools MCP

Install `chrome-devtools-mcp` for fast PNG and animated SVG rendering — uses a real browser, no Playwright install required.

```
npm install -g chrome-devtools-mcp
```

Then add it to your Claude Code MCP config (`~/.claude/settings.json`):

```json
{
  "mcpServers": {
    "chrome-devtools-mcp": {
      "command": "npx",
      "args": ["chrome-devtools-mcp"]
    }
  }
}
```

Without it, PNG and video rendering falls back to Playwright (slower, requires browser install).

README

hand-drawn-diagrams

AI skill for turning ideas, notes, systems, and flows into hand-drawn diagrams — with a hosted edit URL, animated video, and PNG, all from a single prompt.

Jump to: What this is · Output · Quick start · Credits

Demo

Example output

Static PNG — exported on request:

Example diagram

Animated SVG — draws itself stroke by stroke (view):

Exam revision diagram

What this is

hand-drawn-diagrams is an AI skill (for Claude Code, Codex CLI, and compatible agents) that takes a natural language prompt and produces a hand-drawn diagram you can edit, animate, and share — without opening any app.

You describe what you want. The AI picks the right diagram type, draws it in Excalidraw's sketch style, validates the layout, and hands you a live hosted URL. From there you can edit it in a browser, watch it animate, download the source, or export a PNG.

How it's different from using Excalidraw directly

Excalidrawhand-drawn-diagrams
Starting pointBlank canvas, you drawNatural language prompt
Diagram typeYou decideAI picks the right route (teaching, UX, architecture, funnel…)
LayoutYou position everythingAI assigns non-overlapping coordinates
AnimationManual or noneAuto-generated animation spec, renders in browser
OutputFile on diskHosted edit URL + animated SVG + PNG on request
WorkspaceYou open the appFiles stay in /tmp/ by default — workspace stays clean

This skill is not a replacement for Excalidraw — it sits on top of it. Every diagram it produces is a standard .excalidraw file you can open, edit, and own.

Best for

  • students: study notes and exam revision maps
  • teachers: lesson explainers and concept breakdowns
  • architects: system and API flow diagrams
  • builders: sequence diagrams and integration maps
  • designers: UX flows and wireframes
  • product: idea maps and feature flows
  • sales: funnel and conversion visuals
  • doctors: process and patient-facing explainers

Output

The agent infers what you want from your prompt and routes to the right output automatically:

What you ask forWhat you get
"create a diagram" / defaultBrowser opens to hosted Excalidraw editor — edit, tweak, download
"open the animation"Browser opens animated view — diagram draws itself stroke by stroke
"save as excalidraw".excalidraw source file saved to your project
"save the animation".animated.svg saved to your project — plays in any browser
"save image".png saved to your project
"show image".png rendered and opened with your system viewer

Source files go to /tmp/hand-drawn-diagrams/ by default — your workspace stays clean.

Quick start

npx skills add muthuishere/hand-drawn-diagrams

Works for Claude Code, Codex, OpenCode, Windsurf, GitHub Copilot, Cursor, Gemini CLI, and 40+ more agents. Detects which agents you have installed automatically.

For all install options, global vs project scope, and uninstall — see INSTALL.md.

Credits and acknowledgements

This skill stands on the shoulders of excellent open-source work:

  • Excalidraw — the open-source virtual whiteboard that powers the hand-drawn visual style and the hosted editor. All diagrams produced by this skill are standard Excalidraw files. GitHub: excalidraw/excalidraw

  • excalidraw-animate by @dai-shi — the animation library that renders Excalidraw diagrams as SVGs that draw themselves stroke by stroke. The animated SVG output in this skill is powered by this library.

License

MIT — see LICENSE.