hand-drawn-diagrams

Category: Data & AI | Uploader: muthuishere | Downloads: 0 | Version: v1.0（Latest）

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.

Changelog: Source: GitHub https://github.com/muthuishere/hand-drawn-diagrams

Directory Structure

Current level: Root

📁 assets/
- 📄 demo.gif 132 B
- 📄 diagram.animated.svg 676.7 KB
- 📄 diagram.png 825.6 KB
- 📄 thermal-physics-exam-revision.animated.svg 359.8 KB
📁 docs/
- 📄 animate.html 10.6 KB
- 📄 edit.html 10.2 KB
- 📄 index.html 5.8 KB
📁 installscripts/
- 📄 install.py 7.4 KB
- 📄 uninstall.py 1.5 KB
📁 references/
- 📄 activation-routing.xml 5.8 KB
- 📄 animation-spec.md 6.8 KB
- 📄 arrow-routing.md 2.4 KB
- 📄 bullets.md 1.4 KB
- 📄 color-palette.md 1.3 KB
- 📄 creative-raw-diagrams.md 1.1 KB
- 📄 element-templates.md 12.4 KB
- 📄 fundamental-shapes.md 3.3 KB
- 📄 ideation-diagrams.md 2.0 KB
- 📄 index.md 783 B
- 📄 json-schema.md 4.4 KB
- 📄 medical-diagrams.md 3.3 KB
- 📄 page-mockup-diagrams.md 4.9 KB
- 📄 patterns.md 5.2 KB
- 📄 prompt-templates.md 4.7 KB
- 📄 quality-checklist.md 4.3 KB
- 📄 route-guide-template.md 531 B
- 📄 sales-funnel-diagrams.md 2.0 KB
- 📄 teachers-diagrams.md 4.8 KB
- 📄 technical-explainer-diagrams.md 4.2 KB
- 📄 ux-designer-diagrams.md 2.0 KB
📁 scripts/
- 📁 tests/
  - 📁 testdata/
    
    📄 transportation-circulation-study-guide.excalidraw 89.2 KB
  - 📄 conftest.py 401 B
  - 📄 test_hosted_scene_urls.py 3.5 KB
  - 📄 test_open_diagram.py 5.6 KB
  - 📄 test_render_animated_svg.py 6.6 KB
  - 📄 test_render_excalidraw.py 2.5 KB
  - 📄 test_validate_excalidraw.py 8.6 KB
- 📄 .gitignore 26 B
- 📄 animate_excalidraw.py 2.1 KB
- 📄 animatecreator.html 2.4 KB
- 📄 edit_excalidraw.py 1.7 KB
- 📄 get_excalidraw_urls.py 1.5 KB
- 📄 hosted_scene_urls.py 2.4 KB
- 📄 local_excalidraw_server.py 4.8 KB
- 📄 open_diagram.py 7.5 KB
- 📄 pyproject.toml 333 B
- 📄 render_animated_svg.py 13.3 KB
- 📄 render_excalidraw.py 12.0 KB
- 📄 uv.lock 20.2 KB
- 📄 validate_excalidraw.py 12.1 KB
📁 steps/
- 📄 step-01-route.md 3.0 KB
- 📄 step-02-draw.md 6.3 KB
- 📄 step-03-validate.md 5.1 KB
📄 .gitattributes 98 B
📄 .gitignore 166 B
📄 AGENTS.md 5.4 KB
📄 CLAUDE.md 5.3 KB
📄 install.cmd 440 B
📄 install.sh 378 B
📄 LICENSE 1.4 KB
📄 README.md 3.9 KB
📄 SKILL.md 948 B
📄 uninstall.cmd 450 B
📄 uninstall.sh 388 B
📄 workflow.md 3.1 KB

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.
---

Follow the instructions in `./workflow.md`.

Key references:
- `references/index.md`
- `references/activation-routing.xml`
- `references/fundamental-shapes.md`

## Recommended: Chrome DevTools MCP

Install `chrome-devtools-mcp` for fast PNG and animated SVG rendering — uses a real browser, no Playwright install required.

```
npm install -g chrome-devtools-mcp
```

Then add it to your Claude Code MCP config (`~/.claude/settings.json`):

```json
{
  "mcpServers": {
    "chrome-devtools-mcp": {
      "command": "npx",
      "args": ["chrome-devtools-mcp"]
    }
  }
}
```

Without it, PNG and video rendering falls back to Playwright (slower, requires browser install).

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

hand-drawn-diagrams

Directory Structure

SKILL.md

Report

Notice