hand-drawn-diagrams
nexu-io/open-design
Generate hand-drawn Excalidraw diagrams from natural language prompts with animated SVG and PNG export.
What is hand-drawn-diagrams?
Creates hand-drawn style diagrams using Excalidraw from text descriptions. Use this when you need to visualize concepts, workflows, or system designs in a sketch-like format with hosted editing and export options.
- Generate diagrams from natural language prompts
- Produce animated SVG output
- Provide hosted edit links for further refinement
- Export diagrams as PNG files
- Support hand-drawn aesthetic styling
How to install hand-drawn-diagrams
npx skills add https://github.com/nexu-io/open-design --skill hand-drawn-diagrams- Node.js and npm installed
- Access to the upstream repository at https://github.com/muthuishere/hand-drawn-diagrams
- Agent supporting standard skill paths (Claude Code, Codex, Gemini CLI, etc.)
How to use hand-drawn-diagrams
- 1.Install the skill using: npx skills add https://github.com/nexu-io/open-design --skill hand-drawn-diagrams
- 2.Ask your agent to generate a diagram using the skill name or trigger phrases like 'hand drawn diagram', 'sketch diagram', or 'whiteboard diagram'
- 3.Provide a natural language description of what you want to visualize
- 4.Receive the generated Excalidraw diagram with animated SVG, edit link, and PNG export options
- 5.Use the hosted edit link to refine the diagram further if needed
Use cases
- Create whiteboard-style system architecture diagrams from descriptions
- Generate workflow or process visualizations from requirements
- Sketch UI mockups or wireframes from text prompts
- Produce quick conceptual diagrams for documentation
- Export diagrams for presentations or reports
- Software architects and engineers
- Product designers and UX professionals
- Technical writers and documentation creators
- Team leads planning system designs
- Anyone needing quick visual communication
hand-drawn-diagrams FAQ
The skill generates animated SVG, provides a hosted edit link for further refinement, and exports PNG files.
It works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.
Yes, the skill provides a hosted edit link that allows you to refine and modify the diagram in Excalidraw.
It generates hand-drawn style diagrams using Excalidraw, giving them a sketch-like appearance rather than formal technical styling.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: hand-drawn-diagrams description: | 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. triggers:
- "excalidraw"
- "hand drawn diagram"
- "sketch diagram"
- "whiteboard diagram" od: mode: prototype category: diagrams upstream: "https://github.com/muthuishere/hand-drawn-diagrams"
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-diagrams
Then 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
More from nexu-io/open-design and the wider catalog.
hatch-pet
Create Codex-compatible animated pet spritesheets from art, screenshots, or references with deterministic assembly and packaging.
html-ppt-retro-quarterly-review
Bold retro blue + orange quarterly review deck with cinematic three-slide layout and premium motion.
image-enhancer
Enhance image resolution, sharpness, and clarity for professional presentations and documentation.
imagegen
Generate and edit images using OpenAI's Image API for UI mockups, icons, illustrations, and visual assets.
imagen
Generate images using Google Gemini's image generation API for UI mockups, icons, and illustrations.
impeccable-design-polish
|