Does it work inside my existing agent setup?

Yes, it integrates with Claude Code, Cursor, Windsurf, and over 40 other compatible agents after installation.

Are the diagrams fully editable after generation?

Every output is a standard Excalidraw file that opens in the hosted editor or desktop app for manual changes.

Where do the generated files get stored?

Source files default to /tmp/hand-drawn-diagrams/ to avoid cluttering your main project directory.

muthuishere/hand-drawn-diagrams

Convert text prompts into editable hand-drawn diagrams with animation support.

SkillsAgent Skills 41Open source

View on GitHub

Updated 2026-06-16

muthuishere/hand-drawn-diagrams GitHub repository

What is muthuishere/hand-drawn-diagrams?

hand-drawn-diagrams is an AI skill that interprets prompts to create sketch-style visuals. It leverages Excalidraw for the core rendering and adds animation capabilities through dedicated libraries, producing standard files that remain fully editable and portable.

The process starts with a prompt, routes to the appropriate diagram format, validates positioning, and outputs a live URL for browser editing. Additional commands trigger animations, SVG exports, or PNG files saved locally while keeping the workspace organized.

It serves students mapping study topics, architects outlining systems, product teams visualizing flows, and professionals needing quick explainers across education, design, and technical domains.

What you can build with muthuishere/hand-drawn-diagrams

Study and revision maps

Students turn notes or exam topics into visual diagrams for easier review and retention.

System and flow documentation

Developers and architects describe APIs or processes to receive clear sequence and integration diagrams.

UX and concept wireframes

Designers and product managers generate hand-drawn style flows and idea maps directly from descriptions.

Install muthuishere/hand-drawn-diagrams

Install

npx skills add muthuishere/hand-drawn-diagrams

Quick start

npx skills add muthuishere/hand-drawn-diagrams

1Run the install command in your terminal to add the skill to supported agents.
2Select or confirm the target agent when prompted during setup.
3Describe your diagram idea in a natural language prompt within the agent.
4Review the generated hosted URL and request specific outputs like animation or PNG if needed.
5Edit the diagram live in the browser or download source files for further use.