Hand Drawn Diagrams
Turn a short prompt into hand-drawn Excalidraw diagrams with SVG animation, PNG export, and an editable hosted link for specs and pitches.
Overview
hand-drawn-diagrams is an agent skill most often used in Validate (also Build docs) that generates Excalidraw-style diagrams from prompts with SVG, PNG, and an edit link.
Install
npx skills add https://github.com/nexu-io/open-design --skill hand-drawn-diagramsWhat is this skill?
- Generates hand-drawn Excalidraw diagrams from a natural-language prompt
- Outputs animated SVG, hosted edit link, and PNG export
- Catalogue entry in Open Design pointing to @muthuishere upstream bundle
- Trigger phrases: excalidraw, hand drawn diagram, sketch diagram, whiteboard diagram
- Install upstream repo into the agent skills directory for full scripts and assets
- Delivers animated SVG, hosted edit link, and PNG export per upstream description
Adoption & trust: 799 installs on skills.sh; 61.4k GitHub stars.
What problem does it solve?
You need a clear architecture or flow sketch for a spec or pitch but do not have time to draw in Excalidraw manually or polish corporate diagrams.
Who is it for?
Solo builders and small teams who want quick whiteboard visuals for scope, flows, or README architecture sections.
Skip if: Pixel-perfect design mocks, automated CI diagram generation without human review, or teams that forbid third-party hosted edit links.
When should I use this skill?
User asks for excalidraw, hand drawn diagram, sketch diagram, or whiteboard diagram; install upstream bundle for full workflow.
What do I get? / Deliverables
After invoking with the upstream bundle installed, you get hand-drawn diagram assets and a link you can refine before locking scope or publishing docs.
- Hand-drawn style Excalidraw diagram (animated SVG)
- PNG export and hosted edit link when upstream workflow completes
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Diagrams clarify scope and flows early when validating what to build, before heavy implementation. Scope and architecture conversations benefit most from whiteboard-style visuals that stakeholders can edit.
Where it fits
Sketch a multi-service flow before committing to the MVP integration list.
Produce a hand-drawn user-journey diagram to compare two onboarding prototypes.
Add an animated SVG architecture diagram to the README for open-source contributors.
How it compares
Prompt-driven Excalidraw sketch generator—not a Figma or Mermaid-in-repo substitution for production design systems.
Common Questions / FAQ
Who is hand-drawn-diagrams for?
Builders using AI agents who want hand-drawn system or flow diagrams for planning, docs, or stakeholder reviews without manual Excalidraw setup.
When should I use hand-drawn-diagrams?
During Validate to scope architecture and user flows; during Build when writing docs or PM artifacts that need a sketch diagram; anytime triggers like excalidraw or whiteboard diagram appear.
Is hand-drawn-diagrams safe to install?
The catalogue entry references an external upstream repo and hosted edit links—review Prism Security Audits and the muthuishere/hand-drawn-diagrams source before installing bundles that write files or call network services.
SKILL.md
READMESKILL.md - 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: ```bash # 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.