animated-sketch-diagram
Claude Code skill: hand-drawn animated architecture diagrams — ink on beige paper, flowing dots, one self-contained HTML, seamless-loop GIF export
Install with your AI
Paste into Claude Code, Cursor, or any agent — it reads the repo and wires the tool into your project.
Install and set up animated-sketch-diagram (claude-plugin project) into my current project. Found on https://claudeers.com/animated-sketch-diagram Repo: https://github.com/OLDyade/animated-sketch-diagram Homepage/docs: — Detected install method: claude-plugin → /plugin install animated-sketch-diagram@OLDyade/animated-sketch-diagram Category: skills. Platforms: cli. Read the repo's README for exact setup and env vars, then install it and wire it into my project. Claudeers Health Verdict: active; community-verified: false. Confirm the source before running anything.
/plugin marketplace add OLDyade/animated-sketch-diagram /plugin install animated-sketch-diagram@OLDyade/animated-sketch-diagram
git clone https://github.com/OLDyade/animated-sketch-diagram
// compatibility
| Platforms | cli |
|---|---|
| Operating systems | — |
| AI compatibility | claude |
| License | NOASSERTION |
| Pricing | open-source |
| Language | JavaScript |
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.
// faq
What is animated-sketch-diagram?
Claude Code skill: hand-drawn animated architecture diagrams — ink on beige paper, flowing dots, one self-contained HTML, seamless-loop GIF export. It is open-source on GitHub.
Is animated-sketch-diagram free to use?
animated-sketch-diagram is open-source under the NOASSERTION license, so it is free to use.
What category does animated-sketch-diagram belong to?
animated-sketch-diagram is listed under skills in the Claudeers registry of Claude-compatible tools.
// embed badge
[](https://claudeers.com/animated-sketch-diagram)
// retro hit counter
[](https://claudeers.com/animated-sketch-diagram)
// reviews
// guestbook
// related in Claude Skills
🔓An agentic skills framework & software development methodology that works.
🔓
🔓💫 Toolkit to help you get started with Spec-Driven Development
🔓AI coding assistant skill (Claude Code, Codex, OpenCode, Cursor, Gemini CLI, and more). Turn any folder of code, SQL schemas, R scripts, shell scripts, docs,…