Auto Layout : organisez vos diagrammes d'architecture instantanément
Il y a une tâche à laquelle chaque équipe d'architecture finit par faire face : le diagramme a grandi. Ce qui a commencé comme cinq systèmes bien arranges est devenu vingt-sept éléments avec quarante relations, dont la moitié se croisent. Quelqu'un a ajouté un nouveau conteneur la semaine dernière et l'a déposé dans le seul espace libre — le coin en bas à droite, connecte par une ligne qui traverse trois autres noeuds. Le diagramme contient toujours des informations exactes. Il est juste illisible.
Alors quelqu'un passe un après-midi à déplacer des boîtes. La moitié supérieure a bonne allure, puis on realise que déplacer la passerelle API casse l'alignement de tout ce qui se trouve en dessous. On recommence. Une heure plus tard, le diagramme est légèrement meilleur. La prochaine personne qui ajoute un élément le place au mauvais endroit, et le cycle se répète.
C'est un problème de mise en page, et les problèmes de mise en page ont des solutions algorithmiques. C'est ce que fait Auto Layout.
Un clic, tout se déplace
Auto Layout se trouve dans la barre d'outils du diagramme. Cliquez sur le bouton, et chaque élément de votre diagramme — systèmes, conteneurs, composants, éléments de code, overlays et groupes composes — se déplace vers une position optimale calculée. Les relations se démêlement. Les arêtes qui se croisent se séparent. La hiérarchie devient visible.
L'animation dure 400 millisecondes. Les noeuds glissent de leurs positions actuelles vers les nouvelles avec une courbe cubique adoucie. Vous voyez la transformation se produire, ce qui vous aide à maintenir votre orientation spatiale — vous pouvez suivre ou chaque élément est alle plutôt que de voir le diagramme basculer soudainement vers un arrangement inconnu.
Comment ça fonctionne
Sous le capot, Auto Layout utilise ELK.js, l'Eclipse Layout Kernel compile en JavaScript. ELK est un moteur de mise en page de graphes qui implémente plusieurs décennies de recherche en dessin automatique de graphes. Archyl utilise son algorithme en couches, spécialement conçu pour les graphes orientes — exactement ce que sont les diagrammes d'architecture.
Le processus de mise en page se déroule en plusieurs étapes :
Attribution des couches
ELK attribue d'abord chaque noeud à une couche en fonction de sa position dans le graphe de dépendances. Les éléments sans relations entrantes vont dans la première couche. Les éléments qui dépendent uniquement des éléments de la première couche vont dans la deuxième. Et ainsi de suite. Cela crée la hiérarchie naturelle de haut en bas (ou de gauche à droite) qui rend les diagrammes d'architecture lisibles.
Minimisation des croisements
Au sein de chaque couche, ELK réordonne les noeuds pour minimiser le nombre d'arêtes qui se croisent. Il utilise une technique appelée balayage de couches — parcourant les couches de manière répétée et échangeant les positions des noeuds jusqu'à ce que le nombre de croisements se stabilise. Moins de croisements signifie des diagrammes plus propres et plus lisibles.
Placement des noeuds
Une fois les couches et l'ordre determines, ELK calcule les coordonnées x/y réelles. Archyl utilise l'algorithme de Brandes-Koepf avec un alignement équilibre, qui produit des mises en page compactes ou les noeuds connectés s'alignent verticalement (ou horizontalement en mode gauche-droite) dans la mesure du possible. Cela crée ces flèches droites satisfaisantes entre les éléments liés.
Routage des arêtes
ELK route les arêtes en utilisant des chemins spline, et Archyl recalcule le point de connexion optimal — haut, bas, gauche ou droite — pour chaque relation en fonction des positions finales des noeuds. Si un système se trouve au-dessus d'un conteneur, la relation se connecte du bas du système vers le haut du conteneur. S'ils sont côte à côte, la connexion va de gauche à droite.
Support des graphes composes
Les diagrammes d'architecture ne sont pas plats. Les conteneurs vivent à l'intérieur des systèmes. Les composants vivent à l'intérieur des conteneurs. Les overlays regroupent les éléments liés. Auto Layout gère toutes ces relations d'imbrication.
Quand un système contient des conteneurs sur le diagramme (affiche comme un noeud de groupe compose), ELK le traite comme un parent compose avec des enfants internes. Les enfants sont disposés à l'intérieur du parent, et le parent se redimensionne pour s'adapter. La mise en page interne utilise le même algorithme que le niveau supérieur — en couches, avec minimisation des croisements et alignement — donc la structure à l'intérieur d'un groupe système est tout aussi propre que la structure à l'extérieur.
Les overlays fonctionnent de la même manière. Si un overlay a des éléments configurés, ces éléments sont traités comme des enfants de l'overlay pendant la mise en page. L'overlay se redimensionne et se repositionne pour englober ses membres avec un rembourrage adéquat. Même les overlays "flottants" — ceux sans attribution explicite d'éléments — sont gérés : Auto Layout détecte quels noeuds sont visuellement à l'intérieur des limites de l'overlay et les maintient ensemble.
Post-traitement : alignement et accrochage a la grille
La sortie brute d'ELK est bonne mais pas parfaite. Archyl applique deux passes de post-traitement pour l'affiner.
L'alignement des chaînes trouve les noeuds connectés qui sont presque alignés sur l'axe perpendiculaire et les force au même centre exact. Cela utilise une structure Union-Find pour regrouper les chaînes de noeuds connectés, puis calcule le centre median et aligne la chaîne entière. Le résultat : des flèches parfaitement droites entre les éléments connectés — plus de lignes "presque verticales" qui ont l'air négligé.
La résolution des chevauchements détecte les noeuds qui se retrouvent trop proches après l'alignement et les écarte. Elle s'exécute de manière iterative jusqu'à cinq passes, ce qui gère les décalages en cascade ou le déplacement d'un noeud crée un nouveau chevauchement avec un autre.
Après les deux passes, chaque position s'accroche à une grille de 20 pixels qui correspond à l'arrière-plan React Flow. Cela signifie que les éléments s'alignent précisément avec les lignes de la grille, créant un aspect soigné et intentionnel.
Basculer la direction
Auto Layout supporte deux directions : Haut vers Bas et Gauche vers Droite. Un bouton bascule a côté du bouton Auto Layout vous permet de passer de l'une a l'autre.
Haut vers Bas est la direction par défaut et fonctionne bien pour la plupart des diagrammes d'architecture — les acteurs externes en haut, les systèmes au milieu, l'infrastructure en bas. Gauche vers Droite fonctionne mieux pour les architectures de type pipeline ou les vues orientées flux ou les données se déplacent horizontalement à travers les étapes de traitement.
La direction affecte tout : l'attribution des couches, la minimisation des croisements, les chaînes d'alignement et le calcul des points de connexion. Changez de direction et le diagramme entier se réoriente.
Ce qui est persiste
Auto Layout n'est pas juste un effet visuel. Après la fin de l'animation, chaque position calculée est persistée sur le serveur. Les positions des noeuds, les limites des overlays, les dimensions des groupes composes et les poignées des arêtes sont tous sauvegardes. Fermez le navigateur, revenez demain, et la mise en page est exactement telle qu'Auto Layout l'a laissée.
Les mises à jour des poignées d'arêtes sont regroupées en un seul appel API pour l'efficacité. Les redimensionnements des overlays sont persistes individuellement. Les positions des noeuds sont envoyées en masse. Rien n'est perdu.
Vue Architecture Globale
Auto Layout fonctionne aussi sur la page Architecture Globale — pas seulement dans les projets individuels. Quand vous regardez des systèmes à travers toute votre organisation avec des dizaines de relations inter-projets, la mise en page manuelle est particulièrement pénible. Auto Layout apporte la même organisation en un clic à la vue globale, avec le même support des graphes composes pour les groupes systèmes contenant leurs conteneurs.
Quand l'utiliser
Auto Layout est le plus utile dans trois scénarios :
Après la découverte par IA. Quand l'IA d'Archyl analyse un dépôt et génère un modèle C4, les positions initiales sont calculées algorithmiquement mais peuvent ne pas refléter la mise en page que vous choisiriez. Auto Layout vous donne un point de départ propre.
Après des changements significatifs. Vous avez ajouté cinq nouveaux conteneurs, reorganise les relations et déplacé des composants entre systèmes. Le diagramme est devenu désordonner. Auto Layout recalcule tout à partir de zéro.
Quand vous explorez un nouveau projet. Vous avez rejoint un projet et voulez comprendre son architecture. Le diagramme a été mis en page selon le modèle mental de quelqu'un d'autre. Auto Layout produit un arrangement standard et lisible qui rend la structure claire.
Vous pouvez toujours ajuster les éléments individuels après avoir exécuté Auto Layout. C'est un point de départ, pas une contrainte.
Pour commencer
Auto Layout est disponible des maintenant sur tous les plans et sur chaque diagramme — au niveau projet et global. Ouvrez n'importe quel diagramme, cliquez sur le bouton Auto Layout dans la barre d'outils, et regardez votre architecture s'organiser d'elle-même.
Votre architecture mérite d'être lisible. Auto Layout s'assure que le diagramme ne soit pas un obstacle.
Pour en savoir plus sur la création de diagrammes d'architecture efficaces, consultez notre guide du modèle C4. Pour comprendre comment Auto Layout interagit avec les vues inter-projets, explorez Collaboration en Temps Réel et Architecture Globale. Pour analyser les relations qu'Auto Layout arrange, essayez Impact Radar.