Skip to content

dashmotion v2.0.0

Choose a tag to compare

View all tags
@csthink csthink released this 11 Jun 14:18
· 44 commits to main since this release
v2.0.0
b0620e9

First public release. Diagrams that move — a Claude AI skill that generates animated technical diagrams as self-contained HTML/SVG files. The name is the implementation: stroke-dashoffset + animateMotion.

Two modes

  • Flow — workflows, pipelines, state machines. Dashed connectors stream from START to END through branches and merges.
  • Architecture — system topology with semantic component colors, region/security-group boundaries, legend, summary cards — and the differentiator: animated request journeys. A dot leaves the client, hops through CDN → gateway → service → database via chained SMIL timing, then a new request begins.

Install

  1. Download dashmotion.zip below
  2. claude.ai → Settings → Capabilities → Skills → + Add → upload → toggle on

Or Claude Code: unzip dashmotion.zip -d ~/.claude/skills/

Notes

  • Output is a single HTML file: vector, infs anywhere. Convert to GIF/MP4 with one timecut/ffmpeg command when needed.
  • prefers-reduced-motion respected; every diagram ships a pause toggle.
  • Coexists with Cocoon-AI/architecture-diagram-generator — animation intent routes here, static requests stay there. Tested side by side.

Requires Claude Pro, Max, Team, or Enterprise.

Assets 3
Loading