csthink/dashmotion

Was macht dashmotion?

Diagramme, die sich bewegen – ein Claude-KI-Skill, der animierte Flussdiagramme und Architekturdiagramme als eigenständiges HTML/SVG erzeugt. Fließende Verbindungen, Anfragen, die als Lichtpunkte reisen.

Übersicht

Dieser Skill generiert animierte technische Diagramme, die sich perfekt eignen, um dynamische Systemabläufe, Datenflüsse und Architekturen zu visualisieren. Die Ausgabe erfolgt als alleinstehende HTML-Datei mit eingebettetem SVG, CSS und JavaScript – keine externen Abhängigkeiten erforderlich.

Funktionen

• Animierte Verbindungen: Pfeile und Linien fließen entlang der Verbindungen zwischen Knoten
• Lichtpunkte: Anfragen oder Datenpakete werden als kleine, sich bewegende Lichtpunkte dargestellt
• Selbstständige HTML-Ausgabe: Eine einzige Datei, die in jedem Browser funktioniert
• Einfache Anpassung: Knoten, Verbindungen und Animationen über ein einfaches Schema definiert

Verwendung

Fordere Claude auf, ein animiertes Diagramm zu einem bestimmten Thema zu erstellen. Claude wird den Skill csthink/dashmotion aufrufen und ein vollständiges HTML-Snippet generieren.

Beispiel-Eingabeaufforderung:

Erstelle ein animiertes Architekturdiagramm für eine Microservices-basierte E-Commerce-Plattform mit den Services: Frontend, API-Gateway, Bestellservice, Zahlungsservice und Datenbank. Zeige Anfragen als Lichtpunkte, die vom Frontend über das Gateway zu den Services reisen.

Plattformen

Dieser Skill ist für die Verwendung mit Claude AI (Desktop- und Web-Versionen) konzipiert.

Technische Details

Der Skill generiert eine HTML-Datei mit:

• Einem definierten Satz von Knoten (Positionen, Größen, Farben)
• Verbindungen zwischen Knoten mit optionaler Animationsrichtung
• Einer eingebetteten Animations-Engine (CSS und JavaScript), die Bewegungen entlang der Pfade erzeugt
• Lichtpunkten (kleine Kreise), die die Verbindungen entlang reisen

Ausgabeformat

<!DOCTYPE html>
<html>
<head>
  <title>Animiertes Diagramm</title>
  <style>
    /* Animations-CSS */
  </style>
</head>
<body>
  <svg>
    <!-- Diagramm-Inhalt -->
  </svg>
  <script>
    // Animationslogik
  </script>
</body>
</html>

Beispiel-Knotendefinition

{
  "nodes": [
    { "id": "frontend", "label": "Frontend", "x": 100, "y": 50, "color": "#4A90D9" },
    { "id": "gateway", "label": "API-Gateway", "x": 300, "y": 50, "color": "#50E3C2" },
    { "id": "service", "label": "Service", "x": 500, "y": 50, "color": "#F5A623" }
  ],
  "connections": [
    { "from": "frontend", "to": "gateway", "label": "API-Aufruf" },
    { "from": "gateway", "to": "service", "label": "Weiterleitung" }
  ]
}

Hinweise

• Die generierte HTML-Datei kann direkt gespeichert und im Browser geöffnet werden
• Die Animation läuft automatisch beim Öffnen der Datei
• Der Skill ist optimiert für technische Präsentationen, Architekturdokumentationen und Bildungskontexte