Auto Layout : organisez vos diagrammes d'architecture instantanement
Il y a une tache a laquelle chaque equipe d'architecture finit par faire face : le diagramme a grandi. Ce qui a commence comme cinq systemes bien arranges est devenu vingt-sept elements avec quarante relations, dont la moitie se croisent. Quelqu'un a ajoute un nouveau conteneur la semaine derniere et l'a depose dans le seul espace libre — le coin en bas a 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 apres-midi a deplacer des boites. La moitie superieure a bonne allure, puis on realise que deplacer la passerelle API casse l'alignement de tout ce qui se trouve en dessous. On recommence. Une heure plus tard, le diagramme est legerement meilleur. La prochaine personne qui ajoute un element le place au mauvais endroit, et le cycle se repete.
C'est un probleme de mise en page, et les problemes de mise en page ont des solutions algorithmiques. C'est ce que fait Auto Layout.
Un clic, tout se deplace
Auto Layout se trouve dans la barre d'outils du diagramme. Cliquez sur le bouton, et chaque element de votre diagramme — systemes, conteneurs, composants, elements de code, overlays et groupes composes — se deplace vers une position optimale calculee. Les relations se demelement. Les aretes qui se croisent se separent. La hierarchie 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 a maintenir votre orientation spatiale — vous pouvez suivre ou chaque element est alle plutot que de voir le diagramme basculer soudainement vers un arrangement inconnu.
Comment ca 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 implemente plusieurs decennies de recherche en dessin automatique de graphes. Archyl utilise son algorithme en couches, specialement concu pour les graphes orientes — exactement ce que sont les diagrammes d'architecture.
Le processus de mise en page se deroule en plusieurs etapes :
Attribution des couches
ELK attribue d'abord chaque noeud a une couche en fonction de sa position dans le graphe de dependances. Les elements sans relations entrantes vont dans la premiere couche. Les elements qui dependent uniquement des elements de la premiere couche vont dans la deuxieme. Et ainsi de suite. Cela cree la hierarchie naturelle de haut en bas (ou de gauche a droite) qui rend les diagrammes d'architecture lisibles.
Minimisation des croisements
Au sein de chaque couche, ELK reordonne les noeuds pour minimiser le nombre d'aretes qui se croisent. Il utilise une technique appelee balayage de couches — parcourant les couches de maniere repetee et echangeant les positions des noeuds jusqu'a 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 coordonnees x/y reelles. Archyl utilise l'algorithme de Brandes-Koepf avec un alignement equilibre, qui produit des mises en page compactes ou les noeuds connectes s'alignent verticalement (ou horizontalement en mode gauche-droite) dans la mesure du possible. Cela cree ces fleches droites satisfaisantes entre les elements lies.
Routage des aretes
ELK route les aretes 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 systeme se trouve au-dessus d'un conteneur, la relation se connecte du bas du systeme vers le haut du conteneur. S'ils sont cote a cote, la connexion va de gauche a droite.
Support des graphes composes
Les diagrammes d'architecture ne sont pas plats. Les conteneurs vivent a l'interieur des systemes. Les composants vivent a l'interieur des conteneurs. Les overlays regroupent les elements lies. Auto Layout gere toutes ces relations d'imbrication.
Quand un systeme 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 disposes a l'interieur du parent, et le parent se redimensionne pour s'adapter. La mise en page interne utilise le meme algorithme que le niveau superieur — en couches, avec minimisation des croisements et alignement — donc la structure a l'interieur d'un groupe systeme est tout aussi propre que la structure a l'exterieur.
Les overlays fonctionnent de la meme maniere. Si un overlay a des elements configures, ces elements sont traites 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 adequat. Meme les overlays "flottants" — ceux sans attribution explicite d'elements — sont geres : Auto Layout detecte quels noeuds sont visuellement a l'interieur 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 chaines trouve les noeuds connectes qui sont presque alignes sur l'axe perpendiculaire et les force au meme centre exact. Cela utilise une structure Union-Find pour regrouper les chaines de noeuds connectes, puis calcule le centre median et aligne la chaine entiere. Le resultat : des fleches parfaitement droites entre les elements connectes — plus de lignes "presque verticales" qui ont l'air neglige.
La resolution des chevauchements detecte les noeuds qui se retrouvent trop proches apres l'alignement et les ecarte. Elle s'execute de maniere iterative jusqu'a cinq passes, ce qui gere les decalages en cascade ou le deplacement d'un noeud cree un nouveau chevauchement avec un autre.
Apres les deux passes, chaque position s'accroche a une grille de 20 pixels qui correspond a l'arriere-plan React Flow. Cela signifie que les elements s'alignent precisement avec les lignes de la grille, creant un aspect soigne et intentionnel.
Basculer la direction
Auto Layout supporte deux directions : Haut vers Bas et Gauche vers Droite. Un bouton bascule a cote du bouton Auto Layout vous permet de passer de l'une a l'autre.
Haut vers Bas est la direction par defaut et fonctionne bien pour la plupart des diagrammes d'architecture — les acteurs externes en haut, les systemes au milieu, l'infrastructure en bas. Gauche vers Droite fonctionne mieux pour les architectures de type pipeline ou les vues orientees flux ou les donnees se deplacent horizontalement a travers les etapes de traitement.
La direction affecte tout : l'attribution des couches, la minimisation des croisements, les chaines d'alignement et le calcul des points de connexion. Changez de direction et le diagramme entier se reoriente.
Ce qui est persiste
Auto Layout n'est pas juste un effet visuel. Apres la fin de l'animation, chaque position calculee est persistee sur le serveur. Les positions des noeuds, les limites des overlays, les dimensions des groupes composes et les poignees des aretes sont tous sauvegardes. Fermez le navigateur, revenez demain, et la mise en page est exactement telle qu'Auto Layout l'a laissee.
Les mises a jour des poignees d'aretes sont regroupees en un seul appel API pour l'efficacite. Les redimensionnements des overlays sont persistes individuellement. Les positions des noeuds sont envoyees 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 systemes a travers toute votre organisation avec des dizaines de relations inter-projets, la mise en page manuelle est particulierement penible. Auto Layout apporte la meme organisation en un clic a la vue globale, avec le meme support des graphes composes pour les groupes systemes contenant leurs conteneurs.
Quand l'utiliser
Auto Layout est le plus utile dans trois scenarios :
Apres la decouverte par IA. Quand l'IA d'Archyl analyse un depot et genere un modele C4, les positions initiales sont calculees algorithmiquement mais peuvent ne pas refleter la mise en page que vous choisiriez. Auto Layout vous donne un point de depart propre.
Apres des changements significatifs. Vous avez ajoute cinq nouveaux conteneurs, reorganise les relations et deplace des composants entre systemes. Le diagramme est devenu desordonner. Auto Layout recalcule tout a partir de zero.
Quand vous explorez un nouveau projet. Vous avez rejoint un projet et voulez comprendre son architecture. Le diagramme a ete mis en page selon le modele mental de quelqu'un d'autre. Auto Layout produit un arrangement standard et lisible qui rend la structure claire.
Vous pouvez toujours ajuster les elements individuels apres avoir execute Auto Layout. C'est un point de depart, 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-meme.
Votre architecture merite d'etre lisible. Auto Layout s'assure que le diagramme ne soit pas un obstacle.
Pour en savoir plus sur la creation de diagrammes d'architecture efficaces, consultez l'Introduction au modele C4. Pour comprendre comment Auto Layout interagit avec les vues inter-projets, explorez Collaboration en Temps Reel et Architecture Globale. Pour analyser les relations qu'Auto Layout arrange, essayez Impact Radar.