---
name: Animated Sketch Diagram
slug: animated-sketch-diagram
category: Writing
description: Generates hand-drawn, ink-style animated diagrams (architecture, flowcharts, pipelines) as self-contained HTML with CSS animations, and exports seamless-loop GIFs. Use for technical visualization when a sketch-like, animated diagram would clarify a concept.
github: "https://github.com/OLDyade/animated-sketch-diagram"
language: JavaScript
stars: 10
forks: 0
install: "git clone https://github.com/OLDyade/animated-sketch-diagram"
added: 2026-07-18T04:42:00.728Z
last_synced: 2026-07-18T04:42:00.728Z
canonical_url: "https://dirskills.com/skills/animated-sketch-diagram"
---

# Animated Sketch Diagram

Generates hand-drawn, ink-style animated diagrams (architecture, flowcharts, pipelines) as self-contained HTML with CSS animations, and exports seamless-loop GIFs. Use for technical visualization when a sketch-like, animated diagram would clarify a concept.

**Install:** `git clone https://github.com/OLDyade/animated-sketch-diagram`

## README

**English** · [简体中文](README.zh-CN.md)

# Animated Sketch Diagram

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

<p align="center">
  <img src="examples/agent-loop.gif" alt="The Agent Loop" width="720">
</p>

A [Claude Code skill](https://code.claude.com/docs/en/skills) 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](examples/loops-in-claude-code.zh-CN.gif).

## 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](https://skills.sh) (also works for Codex / Cursor):

```bash
npx skills add OLDyade/animated-sketch-diagram
```

Or clone straight into your skills directory:

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

## Requirements

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

## License

[MIT](LICENSE). Bundled fonts (LXGW WenKai Screen, Kalam, Patrick Hand, Caveat,
Excalifont) are OFL; [rough.js](https://roughjs.com/) is MIT.