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 Excalidraw edit links
- Export diagrams as PNG files
- Support multiple AI agents (Claude Code, Codex, Gemini CLI)
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 an AI agent supporting standard skill paths (Claude Code, Codex, or Gemini CLI)
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 create a diagram using the skill name or trigger phrases like 'hand drawn diagram' or 'sketch diagram'
- 3.Provide a natural language description of what you want to visualize
- 4.Receive an animated SVG, editable Excalidraw link, and PNG export
- 5.Edit the hosted diagram link if needed for refinements
Use cases
- Create architecture diagrams from system descriptions
- Sketch workflow or process diagrams from requirements
- Generate whiteboard-style visualizations for brainstorming
- Export diagram concepts as shareable PNG images
- Prototype UI layouts or user flows
- Software architects and engineers
- Product designers and UX professionals
- Technical writers and documentation creators
- Educators and trainers explaining concepts
- Teams doing collaborative design
hand-drawn-diagrams FAQ
It generates animated SVG, a hosted Excalidraw edit link for live collaboration, and PNG export for sharing or embedding.
Yes, the skill provides a hosted Excalidraw link where you can edit the diagram interactively.
It works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.
It generates hand-drawn or sketch-style diagrams using Excalidraw, giving them a whiteboard-like appearance.
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 OpenDesign 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 text concepts.
high-end-visual-design
Design like a high-end agency with premium typography, spatial rhythm, and fluid motion choreography.
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.
image-to-code
Generate design images first, then implement premium websites that match them exactly.
imagegen
Generate and edit images using OpenAI's Image API for project assets.