hand-drawn-diagrams skill
A skill that draws an Excalidraw-style diagram from a text prompt and returns an editor link, an animation and a PNG.
- 85 ★ on the repository
- Last commit
Extended access
Why this level
- Diagram content opens in a hosted editor, which means it goes to an external service.
- Render scripts run locally and write files to `/tmp` or the project.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/hand-drawn-diagramsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Diagram content opens in a hosted editor, which means it goes to an external service.
- Render scripts run locally and write files to `/tmp` or the project.
This is third-party code. Review the repository files before installing.
What it does
The skill turns ideas, notes, systems and flows into a hand-drawn diagram. The agent picks the diagram type itself: teaching, UX, architecture, funnel. Then it draws in Excalidraw sketch style, validates the layout so elements do not overlap and opens a link to a hosted editor. On request the result is saved as an `.excalidraw` file, an animated `.animated.svg` that draws itself stroke by stroke, or a `.png` image. By default sources live in `/tmp/hand-drawn-diagrams/`, so the workspace stays clean. The skill works with Claude Code, Codex CLI and compatible agents.
Who it is for. Students, teachers, architects and product teams who need a clear diagram without drawing by hand in an editor.
Good fit when
- An exam needs a revision map of a topic drawn as a branching diagram.
- A service architecture and API flows must be shown on one readable diagram.
- A funnel or user journey needs a quick sketch for discussion.
- A diagram must come alive in a presentation: you need an animation where lines draw in turn.
Not a fit when
- The diagram contains private data: the hosted editor opens it by link in a browser.
- You need strict UML or BPMN notation with exact rules: the drawing style is freeform.
- You need pixel-perfect manual tuning: it is easier to work in Excalidraw directly.
Example request
Draw a thermal physics exam revision map, open the animation and save a PNG into the project.Limitations
The diagram opens in a hosted editor by link, so its content goes to an external service. The skill builds on Excalidraw and the excalidraw-animate library for animation. PNG export uses Python scripts from the `scripts` folder. Claude Code, Codex CLI, OpenCode, Windsurf, GitHub Copilot, Cursor, Gemini CLI and about forty more agents are supported, and the installer finds installed ones itself. The repository metadata defines no license while the README states MIT.
How to disable. Remove the skill following `INSTALL.md`, which covers global and project scope and uninstall. Files in `/tmp/hand-drawn-diagrams/` can be deleted by hand.
FAQ
How do I install hand-drawn-diagrams?
Run `npx skills add muthuishere/hand-drawn-diagrams`. The command finds installed agents itself, among them Claude Code, Codex, Cursor and Gemini CLI.
What results can I get?
An editor link by default, an animation on the open the animation request, an `.excalidraw` file, `.animated.svg` and `.png`.
How does it differ from Excalidraw itself?
Excalidraw starts from a blank canvas and the skill from a text prompt: the agent picks the diagram type and places elements without overlaps. The result stays a standard Excalidraw file.
Where do files go by default?
In `/tmp/hand-drawn-diagrams/`. To keep a diagram in the project, ask for save as excalidraw, save the animation or save image.
Can I open a diagram without a browser?
The show image request renders a PNG and opens it with the system viewer. Editing needs a browser with the link to the hosted editor.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws 45 types of animated diagrams from a short JSON spec and saves them as HTML, SVG, PNG, GIF and MP4
A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
excalidraw-cli turns a text description, JSON or Graphviz DOT into an editable Excalidraw diagram and exports PNG and SVG for agents
A skill that builds Excalidraw diagrams from a description and checks their look with a Playwright render
A skill drawing diagrams with Chinese typography: 45 types, one HTML file, no external fonts, SVG and PNG export, Mermaid redraw.
A skill that draws a system architecture diagram as one HTML file with SVG plus copy, PNG and PDF export
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| hand-drawn-diagrams (this card) | no | 85 | |
| Excalidraw Diagram Skill | no | 5,240 | also draws Excalidraw diagrams; hand-drawn-diagrams adds a hosted editor link, animation and PNG export |
| Diagram Design | no | 66,598 | another diagram skill; here the style is hand-drawn with the diagram type chosen from the prompt |
README in short
The authors describe the skill as a layer on top of Excalidraw. Supporting material: a demo animation, an example PNG and animated SVG, and `INSTALL.md` with install scopes.
README badge
Original SKILL.md
--- name: hand-drawn-diagrams description: "Create hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups. Default to monochrome sketch output; allow restrained color only for page mockups when the user explicitly wants webpage-like fidelity. Use when the user asks for a diagram, flowchart, wireframe, sketch, visual explanation, mind map, architecture overview, or any Excalidraw-based drawing." --- Follow the instructions in `./workflow.md`. ## Workflow 1. **Route** — Read `./steps/step-01-route.md`. Pick one diagram type from the routing table (`references/activation-routing.xml`) based on user intent (teach, brainstorm, UX flow, funnel, technical explainer, medical, creative, or page mockup). 2. **Draw** — Read `./steps/step-02-draw.md`. Design the diagram using the shared shape grammar (`references/fundamental-shapes.md`), then write the `.excalidraw` JSON file with a non-empty elements array to `/tmp/hand-drawn-diagrams/<slug>/`. 3. **Validate & Deliver** — Read `./steps/step-03-validate.md`. Run `scripts/validate_excalidraw.py`, then `scripts/open_diagram.py` to generate a hosted edit URL and open it in the browser. Offer animation and PNG as follow-ups. ## Key Rules - Hand-drawn style, same sketch font, monochrome by default - Labels: 1–5 words per shape; max 3 short bullets per container - Write `.excalidraw` files to `/tmp/`, not the user's workspace (unless they ask) - Always validate before generating URLs — never share an empty diagram - Rendering priority: Chrome DevTools MCP (fast) → Playwright (fallback) ## References - `references/index.md` — full reference index - `references/activation-routing.xml` — route selection rules and delivery modes - `references/fundamental-shapes.md` — core shape language ## Optional: Chrome DevTools MCP For fast PNG and animated SVG rendering, install `chrome-devtools-mcp` (uses a real browser, no Playwright needed). See `INSTALL.md` for setup. Without it, rendering falls back to Playwright.