How do I install animated-sketch-diagram?

Run these in Claude Code: npx -y skills add oldyade/animated-sketch-diagram. Then prompt normally.

Does animated-sketch-diagram auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Is animated-sketch-diagram free?

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Content

animated-sketch-diagram

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

FLOW.md

oldyade@oldyade

GitHub

Stats

JavaScript Node HTML CSS Bash

What's inside

Skills

/animated-sketch-diagram生成"黑墨手绘涂鸦"风格的动画架构图/流程图：米色纸面、针管笔墨线、极淡水洗色块、简笔涂鸦图标、序号章、连线上的流动圆点动画、图标微动效。产出单文件自包含动画 HTML（SVG+CSS），可一键导出无缝循环 GIF。当用户想画架构图、流程图、信息图、技术示意图、对比图、pipeline/workflow 可视化，或提到"手绘风""涂鸦风""动图""animated diagram""GIF 架构图"时使用；即使用户没明说要动画，做技术概念科普配图时也应优先考虑本 skill。

FAQ

animated-sketch-diagram is a Claude Code plugin with 1 hand-picked skill for content work, indexed on Flowy. Install it with the command on its page. It includes animated-sketch-diagram. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is animated-sketch-diagram?: Ask for a diagram. Get a hand-drawn animation — one HTML file, one seamless-loop GIF.
How do I install animated-sketch-diagram?: Run these in Claude Code: npx -y skills add oldyade/animated-sketch-diagram. Then prompt normally.
Does animated-sketch-diagram auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is animated-sketch-diagram free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Flowy

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

Diagram

Preview

The Agent Loop — plan, act, observe, until the goal is met