✏️

WritingJavaScript

Animated Sketch Diagram

Animated Sketch Diagram is a Writing skill for Claude Code, published by OLDyade in animated-sketch-diagram.

10 stars0 forkson OLDyade/animated-sketch-diagramAdded 2026/07/18Repository updated 2026/07/15

View source on GitHub Download repo ZIP

animationclaude-codeclaude-skillsdiagramgifsvg

Install in seconds

Install Animated Sketch Diagram

Copy Animated Sketch Diagram into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/OLDyade/animated-sketch-diagram ~/.claude/skills/animated-sketch-diagram

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

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

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: SKILL.md in OLDyade/animated-sketch-diagram
Installs to: ~/.claude/skills/animated-sketch-diagram
Collection: The only skill cataloged from this repository
Category: Writing — 1361 skills

What Animated Sketch Diagram does

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.

Animated Sketch Diagram is cataloged under Writing on DirSkills. Animated Sketch Diagram comes from a repository tagged animation, claude-code, claude-skills, diagram and gif.

Documentation

README

Excerpt

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

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Animated Sketch Diagram

How does Animated Sketch Diagram compare to other Writing skills?
Animated Sketch Diagram ranks #1355 by stars among the 1361 Writing skills in this catalog. The most-starred ones next to it are Article Writing, Social Media Content Calendar and Knowledge Comic Creator. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Animated Sketch Diagram against them. Open each page to compare what they document and how they install.

More Writing skills

Animated Sketch Diagram is one of 1361 Writing skills cataloged on DirSkills, ranked #1355 by stars among them.

Browse all Writing skills →

Article Writing

Article Writing writes articles, guides, blog posts, tutorials, newsletter issues, and other long-form content in a distinctive voice derived from supplied examples or brand guidance. Use it when you want polished written content longer than a paragraph, especially when voice consistency, structure, and credibility matter.

Social Media Content Calendar

Social Media Content Calendar plans multi-platform social campaigns from briefs through scheduling and verified publishing. Use it when building a calendar, turning launches into posts, or repurposing content across X, LinkedIn, Instagram, and TikTok.

Knowledge Comic Creator

Knowledge Comic Creator generates educational, biography, and tutorial comics from user-provided text, URLs, or topics, with configurable art styles, tones, layouts, and languages. Use it when a user asks for a knowledge comic, 知识漫画, or Logicomix-style explanation.