Zum Hauptinhalt springen

Animierte Diagramme

Diese Seite demonstriert animierte Mermaid-Diagramme — ganz ohne externes SaaS. Mermaid rendert wie gewohnt das SVG, danach schickt ein kleines Client-Modul (src/js/mermaid-flow.js) per SVG-animateMotion Datenpunkte entlang jeder Kante. Die Punkte tragen den Signal-Akzent, die Linien bleiben unverändert.

Läuft nur bei Flowcharts (flowchart / graph). Bei aktivierter Systemeinstellung „Bewegung reduzieren" werden keine Partikel gezeigt.

Datenfluss (LR)​

Verzweigung (TD)​

So funktioniert es​

  1. theme-mermaid rendert pro Diagramm ein <svg> mit <path class="flowchart-link"> je Kante.
  2. Das Client-Modul liest das d-Attribut jeder Kante, berechnet ihre Länge und hängt gestaffelte <circle> mit <animateMotion path="…"> in die Kanten-Gruppe.
  3. Die Geschwindigkeit ist konstant (px/s), unabhängig von der Kantenlänge.