Hand Drawn Diagrams
- 1.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
How do I generate hand-drawn style diagrams from text without manual drawing?
About
This skill generates hand-drawn Excalidraw diagrams from natural language prompts, producing animated SVG output, hosted edit links, and PNG exports. Developers use it to quickly prototype whiteboard-style diagrams and architecture sketches without manual drawing. The skill integrates with Claude Code, Codex, Gemini CLI, and standard agent frameworks, triggered by keywords like 'excalidraw', 'hand drawn diagram', 'sketch diagram', or 'whiteboard diagram'. Workflows include prompt-to-diagram generation and export for documentation or design review.
- Generates Excalidraw diagrams from text prompts
- Outputs animated SVG, hosted edit links, and PNG exports
- Compatible with Claude Code, Codex, Gemini CLI, and agents with standard skill paths
- Triggered by keywords: excalidraw, sketch diagram, whiteboard diagram
- Prototype-stage workflow curated from upstream GitHub repository
Hand Drawn Diagrams by the numbers
- 1,783 all-time installs (skills.sh)
- +123 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #158 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Jul 28, 2026 (Skillselion catalog sync)
hand-drawn-diagrams capabilities & compatibility
- Capabilities
- generate diagrams from natural language prompts · produce animated svg output · export png files · generate hosted editable links
- Use cases
- ui design · documentation · planning
- Runs
- Hosted SaaS
What hand-drawn-diagrams says it does
Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export.
Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.
npx skills add https://github.com/nexu-io/open-design --skill hand-drawn-diagramsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 82k |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Generate hand-drawn Excalidraw diagrams from text prompts with animated SVG and PNG export.
Who is it for?
Rapid prototyping of architecture diagrams, workflow sketches, system design documentation, and collaborative design reviews.
Skip if: High-fidelity design mockups, detailed pixel-perfect UI layouts, or production illustration work.
When should I use this skill?
User asks to sketch a diagram, create an architecture visualization, generate a whiteboard-style diagram, or prototype a workflow.
What you get
Text prompt converted to hand-drawn Excalidraw diagram with SVG animation, editable link, and PNG export ready for sharing or documentation.
- Animated SVG diagram
- Hosted Excalidraw edit link
- PNG export file
By the numbers
- Supports 4 documented agent types: Claude Code, Codex, Gemini CLI, and standard skill-path agents
Files
hand-drawn-diagrams
Curated from @muthuishere.
What it does
Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.
Source
- Upstream: https://github.com/muthuishere/hand-drawn-diagrams
- Category:
diagrams
How to use
This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
# Inspect the upstream README for exact paths
open https://github.com/muthuishere/hand-drawn-diagramsThen ask the agent to invoke this skill by name (hand-drawn-diagrams) or with one of the trigger phrases listed in this skill's frontmatter.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
What output formats does this skill produce?
Animated SVG, hosted editable link to the Excalidraw diagram, and PNG export for embedding in documents.
Which AI agents support this skill?
Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.
How do I trigger the skill?
Use keywords: 'excalidraw', 'hand drawn diagram', 'sketch diagram', or 'whiteboard diagram' in your prompt.