Hand Drawn Diagrams — Design skill for Claude Code
Hand-drawn diagram skill for Claude Code and Codex.
How to install Hand Drawn Diagrams
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open muthuishere/hand-drawn-diagrams and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Hand Drawn Diagrams does
Hand-drawn diagram skill for Claude Code and Codex. Generates monochrome architecture, workflow, and UX blueprint diagrams as PNGs.
Alternatives in Design
- Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
- Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
- Nothing Design Skill — A Claude Code skill for generating UI in the Nothing design language 1.4k ★
README
hand-drawn-diagrams
[](https://discord.gg/V9C2kvHC8D)
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](#what-this-is) · [Output](#output) · [Quick start](#quick-start) · [Credits](#credits-and-acknowledgements)
Example output
Static PNG — exported on request:
Animated SVG — draws itself stroke by stroke ([view](assets/diagram.animated.svg)):
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
| Excalidraw | hand-drawn-diagrams | |
|---|---|---|
| Starting point | Blank canvas, you draw | Natural language prompt |
| Diagram type | You decide | AI picks the right route (teaching, UX, architecture, funnel…) |
| Layout | You position everything | AI assigns non-overlapping coordinates |
| Animation | Manual or none | Auto-generated animation spec, renders in browser |
| Output | File on disk | Hosted edit URL + animated SVG + PNG on request |
| Workspace | You open the app | Files 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 ow
Related Skills
Claude Skill Hand Drawn Slides
Claude Skill: generate hand-drawn doodle-style PowerPoint chapter divider slides — muted backgrounds, serif ti
Build Funnel
Design funnel architecture using one of 7 archetypes (VSL / Webinar / Application / Book-a-Call / Tripwire / C
Design Architecture
Design system architecture with diagrams, API contracts, and deployment topology for a given feature or system
Arch Design
Design system architecture for a new project or feature. Delegates to the architect agent to produce component
Excalidraw Skill
A Claude Code / Agent SDK skill for programmatically generating .excalidraw files for architecture diagrams, f
Architecture Diagrams Skill
Diagrams for software and chip design as one interactive offline HTML page: block diagrams, clock trees, pin-l
Related Agents
Blueprint Agent
Generates docs/BLUEPRINT.md — a living map of the project covering stack, architecture diagram, API inventory,
Diagram Generation
Diagram generation expert for draw.io, PlantUML, and Mermaid — use proactively when creating architecture diag
Diagram Builder
Generates ship-time Mermaid state and sequence diagrams, an API endpoint catalog with request/response schemas
