animated-sketch-diagram

English · 简体中文

Animated Sketch Diagram

Ask for a diagram. Get a hand-drawn animation — one HTML file, one seamless-loop GIF.

A Claude Code skill that draws technical diagrams the way a senior engineer sketches on paper — ink lines, beige paper, doodle icons — then sets the flow in motion so the system explains itself.

Why this one

• Motion that means something. The dots trace the real topology — branches, merges, feedback loops — so the animation retells the architecture, instead of decorating it.
• One file, zero runtime. Pure SVG + CSS (@keyframes + offset-path). Double-click to play, works offline, nothing to serve.
• Seamless GIF export. Every duration divides one global loop and frames are stepped deterministically — the last frame meets the first without a seam.
• A design system, not style roulette. Palette, stroke, spacing and rhythm are fixed tokens. Every diagram comes out matching: same ink, same paper.
• It checks its own work. Renders the GIF, reads the frames back, fixes what's off, re-renders — then delivers.
• Chinese too. Bundled OFL handwriting font, auto-subsetted to the characters you use — Chinese example.

Install

Via the plugin marketplace, inside Claude Code:

/plugin marketplace add OLDyade/animated-sketch-diagram
/plugin install animated-sketch-diagram@animated-sketch-diagram

Via skills.sh (also works for Codex / Cursor):

npx skills add OLDyade/animated-sketch-diagram

Or clone straight into your skills directory:

git clone https://github.com/OLDyade/animated-sketch-diagram.git ~/.claude/skills/animated-sketch-diagram
cd ~/.claude/skills/animated-sketch-diagram/scripts && npm ci   # once, enables GIF export

Then ask, in any project:

Draw me an animated sketch diagram of how a RAG pipeline works.

Examples

Real, unretouched exports — each with its one-file .html source next to it.

Diagram	Preview
The Agent Loop — plan, act, observe, until the goal is met
Life of a Request — a click's round trip through the stack
Loops in Claude Code — four loop patterns, ranked by hand-off
Monolith vs Microservices — one app, two shapes
RAG Pipeline — index offline, retrieve online

Requirements

Drawing needs only Claude Code. GIF export: Node.js, Chrome/Chromium (or CHROME_PATH), ffmpeg. CJK labels: pip3 install fonttools brotli.

License

MIT. Bundled fonts (LXGW WenKai Screen, Kalam, Patrick Hand, Caveat, Excalifont) are OFL; rough.js is MIT.