Skillget

animated-sketch-diagram

skill
Security Audit
Warn
Health Warn
  • License — License: NOASSERTION
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Low visibility — Only 5 GitHub stars
Code Warn
  • process.env — Environment variable access in scripts/render-gif.mjs
Permissions Pass
  • Permissions — No dangerous permissions requested

No AI report is available for this listing yet.

SUMMARY

Claude Code skill: hand-drawn animated architecture diagrams — ink on beige paper, flowing dots, one self-contained HTML, seamless-loop GIF export

README.md

English · 简体中文

Animated Sketch Diagram

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

The Agent Loop

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

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 agent-loop
Life of a Request — a click's round trip through the stack life-of-a-request
Loops in Claude Code — four loop patterns, ranked by hand-off loops-in-claude-code
Monolith vs Microservices — one app, two shapes monolith-vs-microservices
RAG Pipeline — index offline, retrieve online rag-pipeline

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.

Reviews (0)

No results found