Connexions et zones
Deux éléments de décor structurent la scène en arrière-plan, indépendamment de la timeline : les connexions (liens permanents entre nœuds) et les zones (régions englobant un groupe de nœuds). Tous deux sont affichés dès l'initialisation, sans animation à déclencher.
Connexions permanentes
Le tableau racine connections déclare des liens affichés en permanence
(le décor du diagramme). À distinguer de l'action
arrow, qui trace une flèche animée à un
instant précis de la timeline.
connections: [
{ from: 'browser', to: 'api', style: 'dashed', arrow_head: 'both' },
{ from: 'api', to: 'db', style: 'dashed' },
],
style — style de ligne
Quatre styles, partagés avec l'action arrow (l'alias historique full est
toléré pour solid) :
- solid
- dotted
- dashed
- animated
Le style animated fait défiler les tirets pour suggérer un flux continu
(connexion temps réel, WebSocket…).
path — forme du tracé
Indépendamment du style de trait, path règle la forme du chemin. Cinq
valeurs, partagées avec l'action arrow (bezier par défaut) :
- bezier
- simplebezier
- straight
- step
- smoothstep
{ from: 'lb', to: 'api1', path: 'bezier' } // courbe douce (défaut)
{ from: 'lb', to: 'api1', path: 'simplebezier' } // courbe plus discrète
{ from: 'lb', to: 'api1', path: 'straight' } // segment direct
{ from: 'lb', to: 'api1', path: 'step' } // angles droits
{ from: 'lb', to: 'api1', path: 'smoothstep' } // angles droits arrondis
La courbure n'apparaît qu'en présence d'un décalage transverse (lanes
différentes, fan-out, voies bidirectionnelles) : entre deux nœuds parfaitement
alignés, toutes les formes se confondent avec un trait droit. Les paquets d'une
action move épousent le tracé bezier par
défaut.
arrow_head — pointes de flèche
arrow_head contrôle les extrémités fléchées (forward par défaut) :
{ from: 'a', to: 'b', arrow_head: 'forward' } // pointe à l'arrivée (défaut)
{ from: 'a', to: 'b', arrow_head: 'backward' } // pointe au départ
{ from: 'a', to: 'b', arrow_head: 'both' } // double sens
{ from: 'a', to: 'b', arrow_head: 'none' } // simple trait, sans pointe
text — étiquette médiane
Un text optionnel s'affiche au milieu du lien (ex. un protocole, un port) :
{ from: 'api', to: 'db', text: 'TCP 5432' }
color — couleur du trait
color teinte tout le tracé et sa (ses) pointe(s) — un nom CSS prédéfini
(steelblue, tomato…) ou un hex exact. L'étiquette médiane text conserve la
couleur du thème pour rester lisible. Omise, la connexion prend la couleur neutre
du thème. Une action set_color sur l'id
de la connexion la recolore à l'exécution.
{ from: 'api', to: 'db', color: 'steelblue' }
highlighted — mise en avant permanente
highlighted: true donne à la connexion la couleur d'accent, un trait plus épais
et un halo — la même mise en avant que l'action
highlight applique à un instant de la
timeline, mais statique (affichée dès le départ). Elle prime sur color.
{ from: 'api', to: 'db', highlighted: true }
Zones
Le tableau racine zones dessine des rectangles d'arrière-plan englobant un
groupe de nœuds : pratique pour matérialiser un réseau, un cluster, une frontière
de confiance. Une zone se dimensionne automatiquement pour contenir tous ses
membres.
zones: [
{ contains: ['browser'], label: 'Client', color: '#3b82f6' },
{ contains: ['api', 'db'], label: 'Infrastructure', color: '#22c55e' },
],
| Champ | Rôle |
|---|---|
contains | IDs des nœuds et/ou des zones englobés (requis). |
color | Couleur CSS de la bordure et du fond semi-transparent. |
label | Texte affiché en haut à gauche de la zone. |
id | Optionnel — requis seulement pour imbriquer la zone (ci-dessous). |
Zones imbriquées
Une zone peut en contenir une autre : référencez l'id de la zone interne dans
le contains de la zone externe. La zone englobante s'étend pour la couvrir.
zones: [
{ id: 'core', contains: ['svc', 'data'], label: 'Cœur métier', color: '#a855f7' },
{ contains: ['gw', 'core'], label: 'Cluster', color: '#64748b' }, // englobe la zone `core`
],