Dashmotion
Animerade flödes- och arkitekturdiagram med mörkt tema som en enda självständig HTML-fil
Testad · Fungerar
Vad den gör
Förvandlar en enkel engelsk beskrivning eller Mermaid-källa till ett animerat tekniskt diagram: en enda självständig HTML+SVG-fil där streckade kopplingar strömmar och ljuspunkter färdas längs begäransvägen. Utlöses vid förfrågningar om flödesscheman, pipelines, tillståndsmaskiner, arkitektur, mikroservicer eller nätverkstopologier, särskilt när diagrammet behöver se levande ut på en landningssida, README eller dokumentsajt.
Testrapport
Uppgift: Animerat flödesschema för en CI/CD-pipeline (push → build → test → gate → deploy → smoke → rollback). Baslinjekörningen utan skill – SVG:n är handskriven, och den vanliga check_diagram.py hittade i den 6 verkliga defekter: två kopplingar utan fill="none" (renderas som svarta polygoner), rollback-vägen går genom Test-boxen, dashoffset -8 vid dasharray 5 5 (skarv vid varje cykel) och en punkt som flyger förbi linjen. Med skillen: beskrev semantiken i JSON, layout.py --render sammanställde filen – check_diagram.py gav PASS, 0 violations. Motorn vände själv den omvända kanten GATE→BUILD till en ↻-annotation och byggde 6 sammankopplade animateMotion-punkter. Resultatet – 7.7 KB, 0 externa länkar, SVG parsas som giltig XML, det finns prefers-reduced-motion och pauseAnimations; påståendena i README om «några KB, utan beroenden» bekräftades av mätningen. Den första renderingen kraschade med ett tydligt valideringsfel (hops-loggen kräver ett par [from,to], inte en lista med noder) – skriptet är inte tyst, men formatet i SKILL.md-kroppen beskrivs mindre tydligt än i references.
Testad: 2026-07-17 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/csthink/dashmotion.git mkdir -p ~/.claude/skills cd dashmotion && cp -r skills/dashmotion ~/.claude/skills/dashmotion
Kommandon och exempelprompter
/dashmotionAnimerade flödes- och arkitekturdiagram med mörkt tema som en enda självständig HTML-fil
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
Make an animated diagram of our CI/CD pipeline with a retry loop and rollbackI need a self-contained animated architecture diagram for the READMETurn this Mermaid flowchart into a dark-theme animated HTML diagram