muthuishere/hand-drawn-diagrams
FreeGenerate hand-drawn Excalidraw diagrams from prompt
FreeFree tier
Inputs: text
About 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. It is designed for use with Claude Code, Codex CLI, and 40+ other AI coding agents. The skill infers the appropriate diagram type from a natural language prompt, draws it in Excalidraw's sketch style, validates the layout to prevent overlapping elements, and provides a live hosted URL for editing, an animated SVG that draws itself stroke by stroke, and a PNG export on request. Files are stored in /tmp/ by default to keep the workspace clean.
Key Features
Natural language to hand-drawn diagram generation
Auto-inference of diagram type (architecture, workflow, UX, sequence, etc.)
Hosted Excalidraw editor URL for editing and sharing
Animated SVG output that draws itself stroke by stroke
PNG export on request
AI-coordinated layout with non-overlapping coordinates
Works with 40+ AI agents (Claude Code, Codex, Copilot, Cursor, etc.)
Standard .excalidraw file format (editable and portable)
Pros & Cons
Pros
- Generates complete diagrams from simple natural language prompts without manual drawing
- Supports multiple output formats (PNG, animated SVG, editable URL, source file)
- Compatible with a wide range of popular AI coding agents
- Auto-animates diagrams for engaging presentations
- Keeps project workspace clean by storing files in /tmp/
- Uses the open Excalidraw format, ensuring user ownership and editability
- Validates layout to avoid overlapping elements and improve readability
Cons
- Requires an AI coding agent (e.g., Claude Code, Codex) to execute; not a standalone application
- Output is limited to Excalidraw's hand-drawn style; not suitable for precise technical diagrams
- No real-time collaboration built in (relies on Excalidraw's sharing capabilities)
- Installation requires running a command (npx skills add) and agent setup
Best For
Students creating study notes and exam revision mapsTeachers preparing lesson explainers and concept breakdownsArchitects designing system and API flow diagramsBuilders creating sequence diagrams and integration mapsDesigners mapping UX flows and wireframesProduct managers visualizing idea maps and feature flowsSales teams building funnel and conversion visualsDoctors illustrating processes and patient-facing explainers
FAQ
How is hand-drawn-diagrams different from using Excalidraw directly?
Instead of starting from a blank canvas and manually drawing, you provide a natural language prompt and the AI picks the diagram type, assigns coordinates, and produces a hosted edit URL, animated SVG, and PNG automatically. The output is a standard .excalidraw file you can edit and own.
What output formats are available?
The skill can produce a hosted Excalidraw editor URL, an animated SVG, a PNG image, a static .excalidraw source file, and an animated .animated.svg file, depending on your request.
Which AI agents are supported?
It works with Claude Code, Codex CLI, OpenCode, Windsurf, GitHub Copilot, Cursor, Gemini CLI, and 40+ more agents. The skill detects which agents you have installed automatically.
How do I install hand-drawn-diagrams?
Run the command 'npx skills add muthuishere/hand-drawn-diagrams' in your terminal. Your AI agent will detect it automatically.