⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
animated-sketch-diagram
生成"黑墨手绘涂鸦"风格的动画架构图/流程图：米色纸面、针管笔墨线、极淡水洗色块、简笔涂鸦图标、序号章、连线上的流动圆点动画、图标微动效。产出单文件自包含动画 HTML（SVG+CSS），可一键导出无缝循环 GIF。当用户想画架构图、流程图、信息图、技术示意图、对比图、pipeline/workflow 可视化，或提到"手绘风""涂鸦风""动图""animated diagram""GIF 架构图"时使用；即使用户没明说要动画，做技术概念科普配图时也应优先考虑本 skill。
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
Animated Sketch Diagram
Generates hand-drawn "ink on beige paper" animated architecture and flow diagrams as a single self-contained HTML (pure SVG + CSS, zero JS runtime), with flowing dots that trace the system's real topology — branches, merges, feedback loops. A bundled headless-Chrome renderer exports pixel-perfect, seamlessly-looping GIFs.
More demos (all unretouched exports): examples gallery.
Highlights
- Motion that narrates. The animation retells the architecture instead of decorating it.
- One file, zero runtime.
@keyframes+offset-path; double-click to play, works offline. - Seamless-loop GIF export. All durations divide one global loop; frames are stepped deterministically.
- Token design system. Fixed palette / stroke / rhythm — consistent output, not style roulette.
- Self-check loop. Renders, reads frames back, fixes, re-renders before delivering.
- CJK-ready. OFL LXGW WenKai Screen, auto-subsetted (see
assets/fonts-cn/README.md).
Usage
Ask the agent, in any project:
Draw me an animated sketch diagram of how a RAG pipeline works.
GIF export (once: npm ci inside scripts/; needs Node.js, Chrome/Chromium, ffmpeg):
node scripts/render-gif.mjs diagram.html diagram.gif --fps 25 --loop 3000 --scale 2
Credits & Licenses
Skill code MIT (upstream: OLDyade/animated-sketch-diagram). Bundled fonts (Kalam, Patrick Hand, Caveat, Excalifont, LXGW WenKai Screen) are SIL OFL 1.1; rough.js is MIT.
// HOW IT'S BUILT
KEY FILES