Flow diagram

Ce qui est inclus

Un diagramme d’architecture animé, dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — on les copie dans un projet et ça marche.

Trois dispositions partagent la même coquille. Flux place un cœur au milieu, ses sources à gauche, ses sorties à droite, et fait circuler des points le long des courbes. Décision dessine un arbre et allume un chemin à la fois, de la racine à la feuille. Latence déroule une requête étape par étape, remplit chaque liaison, s’arrête sur celle qui échoue et affiche le verdict.

Fonctionnalités

• Marche sans JavaScript — la barre du bas est faite de boutons radio et d’une case à cocher natifs : changer de diagramme et passer du sombre au clair sont écrits en CSS. Sans le script, il ne manque que le mouvement.
• Des courbes qui restent sur leurs ancres — chaque liaison est un <svg> étiré à sa boîte, avec une courbe normalisée. Elle relie donc exactement ses deux extrémités à n’importe quelle taille, sans calcul.
• Clavier complet — les flèches parcourent les trois diagrammes, Espace bascule le thème, le focus reste visible. C’est le comportement natif des contrôles employés, pas une réimplémentation.
• Une variable pour l’échelle — toutes les mesures dérivent de --fd-font-size : cartes, arrondis, écartements, épaisseur des traits et barre de contrôle suivent ensemble.
• Deux thèmes en deux lignes — la palette est une seule encre déclinée en opacités. Le thème clair change la couleur d’encre et le fond, rien d’autre.
• Se repose quand on ne le regarde pas — rien ne tourne hors de l’écran, dans un onglet caché, ni sous prefers-reduced-motion.

Le poser dans une page

Deux fichiers à charger, puis le balisage. Un nœud se place sur une rangée, comptée depuis le milieu ; la liaison qui le relie au cœur porte la même rangée et le même côté :

<link rel="stylesheet" href="flow-diagram.css">
<script src="flow-diagram.js" defer></script>

<div class="flow-diagram">
  <div class="flow-diagram__stage">
    <div class="flow-diagram__view" data-fd-view="hub">

      <svg class="flow-diagram__wire" data-fd-side="in" data-fd-row="-1"
           viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
        <path d="M 0 0 C 45 0 55 100 100 100" vector-effect="non-scaling-stroke" />
      </svg>

      <article class="flow-diagram__node" data-fd-side="in" data-fd-row="-1">
        <span class="flow-diagram__tile"><!-- une icône --></span>
        <span class="flow-diagram__text">
          <span class="flow-diagram__title">Formulaire</span>
          <span class="flow-diagram__sub">Page d’inscription</span>
        </span>
      </article>

      <div class="flow-diagram__core"><!-- le cœur --></div>
      <div class="flow-diagram__dots" aria-hidden="true"></div>
    </div>
  </div>
</div>

Sans barre de contrôle, le composant affiche le seul diagramme qu’on lui donne. Avec, il faut les trois vues et un groupe de boutons radio — le script leur invente des identifiants si on les oublie, pour qu’on puisse coller deux fois le même balisage sur une page.

Ce qu’il faut savoir

• La scène suit son conteneur, pas seulement son texte. C’est un diagramme : il remplit la place qu’on lui donne, et l’écartement des rangées se calcule sur la hauteur. Sous 480 px de haut, les rangées se rapprochent trop — le composant s’arrête là avec un min-height.
• L’arbre se pose à la main. Un parent se place à la moyenne de ses enfants : c’est toute la règle, écrite dans deux attributs par nœud. On aurait pu la calculer en JavaScript, mais l’arbre aurait alors disparu sans script.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site et n’utilise jamais innerHTML. C’est aussi pourquoi les positions passent par des attributs plutôt que par un attribut style : sous CSP stricte, celui-ci est ignoré, et une mise en page qui vit dedans s’effondre.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer commercial, relevées sur son rendu à quatre largeurs — d’où viennent la formule d’écartement des rangées, les points de contrôle à 45 % et 55 %, et la période de 2857 ms. Le code, lui, est original : rien n’a été repris de son implémentation.