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.

85 stars 14 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams

Manual install

git clone --depth 1 https://github.com/muthuishere/hand-drawn-diagrams.git /tmp/hand-drawn-diagrams
mkdir -p ~/.claude/skills
cp -r /tmp/hand-drawn-diagrams/. ~/.claude/skills/hand-drawn-diagrams

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

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

Read the full skill on GitHub

Details

Skill name: hand-drawn-diagrams
Repository: muthuishere/hand-drawn-diagrams
Repo updated: 27 September 2026
Listed in: heilcheng/awesome-agent-skills, VoltAgent/awesome-agent-skills

FAQ

What does the Hand Drawn Diagrams skill do?

How do I install the Hand Drawn Diagrams skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Hand Drawn Diagrams popular?

It lives in muthuishere/hand-drawn-diagrams, which has 85 GitHub stars and 14 forks, and is included in 2 curated skill lists.

Related skills

Placecall

110

voygr-tech/placecall

PlaceCall lets your agent call US businesses for reservations, inquiries and quotes, and gets through IVRs, holds and transfers. You get a verified outcome and the full transcript. First 250 calls free; you pay only for outcomes.

Images, Video & AudioIn 2 lists

Watch

144

mathiaschu/watch

Watch a video from YouTube, Instagram, X/Twitter, Vimeo, TikTok or any of ~1800 yt-dlp sites (or a local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or local mlx-whisper fallback, no API key), and hands the result to Claude so it can answer questions about what's in the video.

Images, Video & Audio20

Qiaomu Codex Imagegen

136

joeseesun/qiaomu-codex-imagegen

Generate or edit images with Codex's built-in image generation from any agent, through an MCP tool or a plain CLI. For every image request it first proposes at least four divergent style directions (24 distilled templates, 48 presets, 20 Mondo poster artists), lets the user pick, expands the prompt, generates, and checks the result. Scenario craft for 视频封面, 视频海报, 小红书配图, 公众号封面, X 封面, 朋友圈海报, 书籍封面, 专辑封面, 产品海报, 人物写真, 节气海报, 展览海报, PPT 页面, 图生图. Use for 生图, 配图, 海报, 封面, "给我几个风格", "用 Codex 画一张". Excludes: editing photos with local tools, charts or diagrams from data, UI mockups, video generation, or any

Images, Video & Audio

Social Captions

145

rediumvex/social-media-caption-generator-claude

Write algorithm-optimized captions/descriptions for social media posts and reels. Supports Instagram (Reels, Feed, Carousel), TikTok, Threads, Facebook, and YouTube Shorts. The user sends material (text, image, script, competitor post, screenshot) and gets ready-to-use captions for ALL platforms at once, in English. Use when asked to "write a caption", "write a description", "caption for instagram", "описание к посту", "подпись для рилса", "описание для тикток", "caption for reels", "social media post", or any caption/description writing task. Also triggers when user sends an image, screenshot

Images, Video & Audio18

Wechat Decrypt

freanocank/wechat-decrypt

Read, search, summarize, export, and transcribe a user's own local WeChat 4.x history on macOS or Windows; diagnose setup and re-extract the device key after a WeChat update. Use for WeChat messages, chats, contacts, and local archives. Do not use for remote accounts or devices the user is not authorized to access.

Images, Video & Audio42

Find Broll

141

louisedesadeleer/b-roll-finder

Source b-roll for a video edit — classify each moment, scope the search, return vetted candidates, place on the word. Use when the user says "find b-roll", "/find-broll", "source clips for this edit", or wants footage/memes/screenshots to lay over a talking-head video.

Images, Video & Audio23

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.