mcpField
H
hand-drawn-diagrams

hand-drawn-diagrams

github.com/podoDesign & UI29162 installsUpdated 3d ago
Repository

About hand-drawn-diagrams

hand-drawn-diagrams is a skill that turns text prompts into hand-drawn-style Excalidraw diagrams. It creates and validates diagram files and can provide hosted editing links, with animated SVG and PNG rendering as follow-ups.

Key features

  1. 01Text-to-diagram generation
  2. 02Flows, mind maps, and wireframes
  3. 03Excalidraw file validation
  4. 04Hosted diagram editing links
  5. 05Animated SVG and PNG rendering
  6. 06Monochrome sketch style

Use cases

  1. 01Sketching a process flow
  2. 02Exploring an idea with a mind map
  3. 03Drafting a page mockup

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill hand-drawn-diagrams

After installing, type/hand-drawn-diagramsin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

hand-drawn-diagrams

Catalogue stub — full skill: muthuishere/hand-drawn-diagrams

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/hand-drawn-diagrams/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/hand-drawn-diagrams/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as hand-drawn-diagrams, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/hand-drawn-diagrams ] && echo "global" || echo "project"

    Global:

    npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -g -y

    Project:

    npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • Requires: Python with uv (the skill runs scripts/*.py through uv run python); Chrome DevTools MCP or Playwright, only for PNG and animated-SVG rendering
  • License: MIT (GitHub reports it as NOASSERTION)

Invoke after install

  • Skill name: hand-drawn-diagrams
  • Trigger phrases: "hand drawn diagram", "sketch diagram", "rough diagram"

What it does

Generates hand-drawn style Excalidraw diagrams (flows, explainers, mind maps, wireframes, page mockups) from a text prompt. It routes to a diagram type, writes and validates a .excalidraw file, then produces a hosted edit link, with animated SVG and PNG export as follow-ups. Monochrome sketch output by default. Best for quick whiteboard-style sketches and early ideation where the rough aesthetic communicates "this is exploratory." The edit and animation links open a page on the author's GitHub Pages site with the diagram encoded in the URL, so the diagram data travels in the link.

When NOT to use

  • Polished or structured diagrams with Excalidraw libraries and a render pipeline (use excalidraw-diagram)
  • Diagrams that must not leave your machine inside a shareable link (use excalidraw-diagram, which renders with a local Playwright browser)

Comments

Markdown supported