Introduction
DataFlow Animator compile une spécification JSON en animation déterministe et navigable de flux de données.
Un moteur, quatre paquets
Le moteur, le rendu DOM et la feuille de style vivent dans le cœur. Chaque liaison n'ajoute que la colle propre à son framework : elle ne recopie ni le moteur ni la CSS.
| Paquet | API | Rôle |
|---|---|---|
@dataflow-animator/core | mountPlayer() | Le moteur, le rendu DOM et la feuille de style. Se monte seul, sans framework. |
@dataflow-animator/react | <DataFlowPlayer> | La liaison React (18 ou 19). |
@dataflow-animator/element | <dataflow-player> | L'élément personnalisé : HTML brut, Vue, Svelte, Astro… et un CDN sans build. |
@dataflow-animator/angular | <dfa-player> | Le composant standalone Angular (22). |
La feuille de style est toujours celle du cœur, quelle que soit la liaison — et elle est obligatoire. Comparer les quatre surfaces →
Aperçu
Vous décrivez :
- des objets statiques (les nœuds : serveurs, clients, bases de données…) ;
- des objets dynamiques (les payloads qui se déplaceront : paquets HTTP, requêtes SQL…) ;
- une suite d'actions (déplacements, flèches, commentaires, chargements…).
Le moteur place les nœuds, trace les trajets et déroule la timeline sans qu'aucune coordonnée manuelle ne soit nécessaire.
Chargement…
Principes
- Le temps est l'unique source de vérité. Le moteur compile la spec en une chronologie pure : t (ms) → état visuel. Le seek arrière et la navigation par étapes sont triviaux et déterministes.
- Disposition automatique. Linéaire (selon direction et lane) ou circular. Aucune coordonnée à fournir.
- Rendu rapide. Un moteur de rendu DOM en mode retenu mute la frame sur place au lieu de la re-rendre — environ 6× moins de temps de script par frame. Il se monte côté client : le diagramme apparaît à l’hydratation.
- Indépendant du framework. Le cœur n’importe aucun framework. React, Angular et l’élément personnalisé montent exactement le même rendu — l’égalité est vérifiée au pixel près dans le dépôt.
- Extensible. Icônes de nœuds, sous-icônes technos et coloration syntaxique sont enregistrables / remplaçables.
Pour aller plus loin
- Installation — démarrer en 5 lignes, dans votre framework.
- Générer avec Claude — décrire une animation avec ses mots et obtenir une spec prête à jouer.
- Paquets et liaisons — React, Angular, élément personnalisé, ou le cœur seul.
- Nœuds — types, badges, contenu et visibilité.
- Paquets — les objets dynamiques qui se déplacent.
- Connexions et zones — le décor permanent de la scène.
- Disposition — comment les nœuds sont placés.
- Timeline et étapes — comment les actions se chaînent et persistent.
- Notation mathématique — du LaTeX inline entre $…$ dans les libellés.
- Accessibilité — l'animation rendue aussi en texte, navigable au clavier et lisible par un lecteur d'écran.
- Types d'actions — move, arrow, parallel, loading, set_content, comment, highlight, set_visible, wait.
- Composants et API JavaScript — props React de <DataFlowPlayer>, icônes, coloration syntaxique.
- Référence API (spec JSON) — générée depuis le JSON Schema.