iFLYTEK's open agent skill library iFly-Skills just added a new skill: animated-sketch-diagram. It turns an architecture or flow diagram into a hand-drawn "ink on beige paper" animation — and the animation actually narrates the system instead of decorating it.
(A frame from the skill's own demo. The dots flow along the real topology — plan → act → observe → reflect → loop.)
What it produces
A single self-contained HTML file: inline SVG + CSS animation + base64 fonts, zero JS runtime. Double-click to play; it works offline. When you need a shareable asset, a bundled headless-Chrome renderer exports a pixel-perfect, seamlessly-looping GIF.
Why it looks different
- Motion that narrates. Flowing dots trace the system's real topology — branches, merges, feedback loops — rather than a default one-way pipeline. If the topic is a cycle (a flywheel, an agent loop), the animation is a cycle too.
-
One file, zero runtime. Pure
@keyframes+offset-path; no SMIL, no JS driving the animation. That constraint is what makes deterministic, seamless GIF export possible. - A token design system, not style roulette. Fixed palette, stroke width, corner radius and animation rhythm live in a style guide, so output stays recognizable and consistent across diagrams.
- A built-in self-check loop. After rendering, the skill reads frames back, checks clarity / layout / motion / topology against a rubric, fixes issues and re-renders before delivering.
- CJK-ready. Ships OFL LXGW WenKai Screen (auto-subsetted), so Chinese labels render correctly.
How to use it
Ask the agent, in any project:
Draw me an animated sketch diagram of how a RAG pipeline works.
GIF export (needs Node.js, Chrome/Chromium and ffmpeg):
node scripts/render-gif.mjs diagram.html diagram.gif --fps 25 --loop 3000 --scale 2
Links
- Skill: iflytek/iFly-Skills · skills/animated-sketch-diagram
- iFly-Skills library: github.com/iflytek/iFly-Skills
- Upstream (MIT): OLDyade/animated-sketch-diagram
Skill code is MIT; bundled fonts are SIL OFL 1.1 and rough.js is MIT. Contributions to the iFly-Skills library are welcome.
Top comments (0)