What is the dashmotion skill?
The dashmotion skill by csthink creates animated technical diagrams as a single HTML and SVG file. Flow mode draws pipelines and state machines, and Architecture mode draws systems with request journeys. It accepts plain English or Mermaid flowchart and stateDiagram-v2 source, and gates all CSS animation behind prefers-reduced-motion.
The dashmotion skill generates animated technical diagrams as single self contained HTML files with inline SVG. The name describes the implementation: stroke-dashoffset animation for flowing connectors, plus animateMotion for dots, with no libraries. The output loops forever and opens in any browser.
The SKILL.md routes each request to one of two modes. Use Flow for steps, branching and state transitions, and Architecture for components, services and topology. A mixed request goes to Architecture mode, where the animated request path doubles as the flow.
The two animation contracts
- Flowing connectors: a dash pattern of 5 5 with an offset shift of exactly one dash period, 10, or the loop visibly jumps.
- Speed: 0.6 to 0.9 seconds reads as electric current, and anything slower than 1.5 seconds reads as broken.
- Traveling dots: 3 to 6 dots per diagram, placed on fan outs, merges and the main request path, never on every edge.
- Direction: connector paths are always authored from source to target so the flow runs the right way.
From request to file
- Pick Flow or Architecture mode and read its reference file.
- Parse the request, or the Mermaid source, into a semantic graph in JSON, including the copy for title and summary cards.
- Run
scripts/layout.pywith--renderto compute geometry and write the finished HTML. - Run
scripts/check_diagram.pyand fix every violation until it prints 0 violations. - For Mermaid input, run
scripts/check_fidelity.pyuntil it prints PASS.
Related: animation-vocabulary, fixing-accessibility and fixing-motion-performance.
Accessibility built in
All CSS animation sits behind a prefers-reduced-motion: no-preference media query. SMIL dots ignore that query, so a template script removes them under reduced motion, and every diagram ships a visible pause toggle, a role of img, a title and a desc.
Who the dashmotion skill is for
Best for
- Landing pages, READMEs, docs and product demos where a diagram represents requests, events, data or jobs in motion.
- Teams with Mermaid flowchart, graph or stateDiagram-v2 source who want the same diagram animated.
- Anyone who wants a few kilobytes of vector output rather than a GIF.
Not for
- Other Mermaid types. Sequence, class, ER and gantt diagrams are unsupported, and the skill says so instead of guessing.
- GIF or MP4 as the default output. Export needs screen recording or the timecut and ffmpeg commands the SKILL.md gives.
Use it with UiChemy
Dashmotion output is a standalone HTML and SVG file. To place it in a WordPress site, route the build through Figma, Composer, or an AI build plus MCP, then convert, and check the motion on the live page yourself. Click Get Started on uichemy.com.
How to install Dashmotion Skill: Animated Flow and Architecture Diagrams
git clone https://github.com/csthink/dashmotion.git
cp -r dashmotion/skills/dashmotion ~/.claude/skills/Clone the repository
Run
git clone https://github.com/csthink/dashmotion.gitto fetch the skill and its scripts.Copy the skill folder
Run
cp -r dashmotion/skills/dashmotion ~/.claude/skills/to place the skill in your Claude Code skills directory.Or use claude.ai
Download dashmotion.zip from the repository Releases, then open Settings, Capabilities, Skills, add it and toggle it on. The README says this needs a plan that includes skills.
Ask for a diagram
Try the README's prompt,
Use dashmotion to draw a simple 3 step login flow.It names the skill directly.
Check that it loaded
Run the login flow prompt. You should get one HTML file that opens in a browser, and python3 scripts/check_diagram.py on it should print 0 violations.
Key features
- Two diagram modesFlow mode covers sequence, branching and state transitions, and Architecture mode covers services, containment and topology.
- Flowing connectorsAnimates dashed connectors with stroke-dashoffset so lines stream in the direction of execution.
- Traveling request dotsMoves light dots along connector paths with animateMotion, so a request visibly hops from client to database.
- Mermaid inputConverts flowchart, graph and stateDiagram-v2 source, keeping every node, edge and label verbatim while recomputing layout.
- Deterministic layout engineUses a pure standard library Python script for row packing, boundary padding and orthogonal routing, then renders the HTML.
- Structural checkerDetects overlaps, connectors through boxes, dash loop seams, out of bounds shapes and dots that leave their line.
- Fidelity checkerConfirms every Mermaid node, edge and group label appears verbatim and that the connector count matches the source.
- Reduced motion and pauseGates CSS animation behind the reduced motion query, removes SMIL dots by script and adds a visible pause toggle.
- Shared design tokensUses a dark page, a 40px grid and a system monospace stack, with no web font fetch, so the file stays self contained.
- Plain language refinementAccepts follow ups such as making the auth path stand out or splitting workers into a second diagram.
Frequently asked questions
What is the dashmotion skill?
It is a skill by csthink that creates animated technical diagrams from plain English or Mermaid. The result is one self contained HTML and SVG file where dashed connectors stream along the flow and light dots travel through the system like requests in flight.
How do I install the dashmotion skill?
Clone csthink/dashmotion and copy skills/dashmotion into your skills directory, for example ~/.claude/skills/. On claude.ai, download dashmotion.zip from Releases and add it under Settings, Capabilities, Skills. The README says a plan that includes skills is needed.
Which Mermaid diagrams does it support?
Flowchart, graph and stateDiagram-v2. Node and edge labels, subgraph containment and edge kinds are preserved, while layout is recomputed top down. Sequence, class, ER and gantt diagrams are not supported, and the skill says so rather than producing a lossy conversion.
What is the difference between Flow and Architecture mode?
Flow mode answers what happens and in what order, with steps, branches and state transitions. Architecture mode answers what the system is made of, with components, boundaries, a legend and animated request journeys. Mixed requests go to Architecture mode.
Are the animations accessible?
The README says all CSS animation is gated behind prefers-reduced-motion, SMIL dots are removed by script under reduced motion, and every diagram has a visible pause toggle plus a role of img, a title and a desc. It does not claim full compliance.
Can I export a GIF or MP4?
Only if asked. The SKILL.md says to screen record the open file, or capture it headless with timecut and convert with ffmpeg. A 3 second capture loops cleanly when all durations divide 3 seconds, such as 0.75, 1.5 or 3.
Does the dashmotion skill work outside Claude Code?
The README presents it as a Claude skill, with install paths for Claude Code and claude.ai, and adds that other agents such as Cursor and Codex read ~/.agents/skills/ directly. The output HTML opens in any browser.
What license does the repository use?
GitHub lists csthink/dashmotion under the MIT license, and the README ends with a single MIT line under its License heading. Check the license file in the repository again before reusing the templates inside a product.