promptschat
Gives Claude Code access to the prompts.chat library, letting you search, retrieve and improve AI prompt templates, and find and install Agent Skills from its registry.
2 skills2 agents2 commands1 MCP+3+2+2+2+1+1+1+1177k
@gh-fContent
Plugin
animated-sketch-diagram
Generates animated, hand-drawn style architecture and flow diagrams as one self-contained HTML file, with flowing dots on connectors and a one-click export to a looping GIF.
Plugin Signal49/100Fair
maintained56
capable14
documented100
adopted32
Claude Code
> /plugin marketplace add OLDyade/animated-sketch-diagram> /plugin install animated-sketch-diagram@animated-sketch-diagram
Codex
$ npx skills add OLDyade/animated-sketch-diagram -a codex
Cursor
$ npx skills add OLDyade/animated-sketch-diagram -a cursor
Gemini CLI
$ npx skills add OLDyade/animated-sketch-diagram -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add OLDyade/animated-sketch-diagram$ copilot plugin install animated-sketch-diagram@animated-sketch-diagram
OpenCode
$ npx skills add OLDyade/animated-sketch-diagram -a opencode
Windsurf
$ npx skills add OLDyade/animated-sketch-diagram -a windsurf
Stats
32
Stars
7
Forks
Maintained
Maintenance
JavaScript
Language
Last commit
Created
What's inside
README
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.
Stars on GitHub
Momentum
- stars in total
- 32
File tree
Similar plugins.
@gh-fppt-master
A Claude Code skill for generating editable PPTX presentations and slides from a workflow, with reusable brand, style, layout, and deck workspaces, native charts, speaker notes, and template filling.
1 skill75k
@hugohe3officecli
Gives AI agents control over Word, Excel and PowerPoint files, with skills for building .docx reports, academic papers, Excel dashboards and Morph-style animated slides.
11 skills33k
@iofficeaifrontend-slides
A skill that builds animation-rich HTML presentations from scratch or converts PowerPoint files to web slides. Useful for anyone turning a deck into a web presentation.
1 skill32k
@zarazhangruiQuestions about animated-sketch-diagram.
Generates animated, hand-drawn style architecture and flow diagrams as one self-contained HTML file, with flowing dots on connectors and a one-click export to a looping GIF. Install it with the command on its page. It includes animated-sketch-diagram. Its skills do not fire on their own yet. Free and open source.
- What is animated-sketch-diagram?
- Generates animated, hand-drawn style architecture and flow diagrams as one self-contained HTML file, with flowing dots on connectors and a one-click export to a looping GIF.
- How do I install animated-sketch-diagram?
- Run these in Claude Code: /plugin marketplace add OLDyade/animated-sketch-diagram then /plugin install animated-sketch-diagram@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.
- 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.
- Which coding agents can use animated-sketch-diagram's skills?
- animated-sketch-diagram installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it