This skill routes a prompt to the right Excalidraw-style diagram type, lays it out, validates it, and returns editable output. It can also produce an animated SVG and a PNG, so you can share the diagram in browser or file form.
Builders who want Claude Code, Codex, Cursor, or other agents to create editable diagrams from a prompt.
You can go from notes or a rough idea to a shareable diagram, instead of drawing it by hand.
Chooses a diagram type from the prompt, such as architecture, workflow, UX, teaching, or funnel diagrams.
Creates standard `.excalidraw` files that you can open, edit, and keep owning in the browser.
Generates a stroke-by-stroke animated SVG that plays in the browser.
Exports a static PNG on request for sharing or documentation.
Checks the diagram layout so elements do not overlap and the result stays readable.
Hands back a live hosted URL so you can edit the diagram without starting from a blank canvas.
npx skills add muthuishere/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
Static PNG — exported on request:
Animated SVG — draws itself stroke by stroke (view):
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.
| 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 own.
The agent infers what you want from your prompt and routes to the right output automatically:
| What you ask for | What you get |
|---|---|
| "create a diagram" / default | Browser 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.
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.
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.
Questions, ideas, or built something with this? Join AgentNexus — a Discord for people building with AI agents and open tools. This project lives in #hand-drawn-diagrams.
MIT — see LICENSE.
Built and maintained by deemwar — we build messaging and browser automation, and the plumbing that keeps it delivering when it silently stops.
Need help with this, or something like it in production? io@deemwar.com
Sign in to join the discussion.
No comments yet. Be the first to say what this is good for.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.
Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.
Public repository for Agent Skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop
Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.