Auto Layout: Organisieren Sie Ihre Architekturdiagramme sofort
Es gibt eine Aufgabe, der sich jedes Architekturteam irgendwann stellen muss: das Diagramm ist gewachsen. Was als fuenf ordentlich angeordnete Systeme begann, sind jetzt siebenundzwanzig Elemente mit vierzig Beziehungen, von denen die Haelfte sich ueberkreuzt. Jemand hat letzte Woche einen neuen Container hinzugefuegt und ihn in den einzigen freien Platz fallen lassen — die rechte untere Ecke, verbunden durch eine Linie, die durch drei andere Knoten schneidet. Das Diagramm enthaelt immer noch korrekte Informationen. Es ist nur unleserlich.
Also verbringt jemand einen Nachmittag damit, Boxen zu verschieben. Die obere Haelfte sieht gut aus, dann stellt man fest, dass das Verschieben des API-Gateways die Ausrichtung von allem darunter zerstoert. Man faengt von vorne an. Eine Stunde spaeter ist das Diagramm etwas besser. Die naechste Person, die ein Element hinzufuegt, platziert es an der falschen Stelle, und der Zyklus wiederholt sich.
Das ist ein Layout-Problem, und Layout-Probleme haben algorithmische Loesungen. Genau das macht Auto Layout.
Ein Klick, alles bewegt sich
Auto Layout befindet sich in der Diagramm-Symbolleiste. Klicken Sie auf die Schaltflaeche, und jedes Element in Ihrem Diagramm — Systeme, Container, Komponenten, Code-Elemente, Overlays und zusammengesetzte Gruppen — bewegt sich zu einer berechneten optimalen Position. Beziehungen entwirren sich. Sich kreuzende Kanten trennen sich. Die Hierarchie wird sichtbar.
Die Animation dauert 400 Millisekunden. Knoten gleiten von ihren aktuellen Positionen zu den neuen mit einer gedaempften kubischen Kurve. Sie sehen die Transformation geschehen, was Ihnen hilft, die raeumliche Orientierung beizubehalten — Sie koennen verfolgen, wohin jedes Element gegangen ist, anstatt dass das Diagramm ploetzlich zu einer unbekannten Anordnung springt.
Wie es funktioniert
Unter der Haube verwendet Auto Layout ELK.js, den Eclipse Layout Kernel, kompiliert nach JavaScript. ELK ist eine Graph-Layout-Engine, die mehrere Jahrzehnte Forschung im automatischen Graphenzeichnen implementiert. Archyl nutzt den Schichtenalgorithmus, der speziell fuer gerichtete Graphen konzipiert ist — genau das, was Architekturdiagramme sind.
Der Layout-Prozess laeuft in mehreren Phasen:
Schichtzuweisung
ELK weist zunaechst jeden Knoten einer Schicht zu, basierend auf seiner Position im Abhaengigkeitsgraphen. Elemente ohne eingehende Beziehungen kommen in die erste Schicht. Elemente, die nur von Elementen der ersten Schicht abhaengen, kommen in die zweite. Und so weiter. Das erzeugt die natuerliche Hierarchie von oben nach unten (oder von links nach rechts), die Architekturdiagramme lesbar macht.
Kreuzungsminimierung
Innerhalb jeder Schicht ordnet ELK die Knoten um, um die Anzahl der sich kreuzenden Kanten zu minimieren. Es verwendet eine Technik namens Schichtendurchlauf — wiederholtes Durchlaufen der Schichten und Tauschen von Knotenpositionen, bis die Kreuzungszahl sich stabilisiert. Weniger Kreuzungen bedeuten sauberere, besser lesbare Diagramme.
Knotenplatzierung
Sobald die Schichten und die Reihenfolge bestimmt sind, berechnet ELK die tatsaechlichen x/y-Koordinaten. Archyl verwendet den Brandes-Koepf-Algorithmus mit ausgewogener Ausrichtung, der kompakte Layouts erzeugt, bei denen verbundene Knoten sich vertikal (oder horizontal im Links-nach-Rechts-Modus) ausrichten, wann immer moeglich. Das erzeugt diese befriedigenden geraden Pfeile zwischen verwandten Elementen.
Kantenrouting
ELK routet Kanten mit Spline-Pfaden, und Archyl berechnet den optimalen Verbindungspunkt — oben, unten, links oder rechts — fuer jede Beziehung basierend auf den endgueltigen Knotenpositionen neu. Wenn ein System ueber einem Container sitzt, verbindet sich die Beziehung vom unteren Rand des Systems zum oberen Rand des Containers. Wenn sie nebeneinander stehen, geht die Verbindung von links nach rechts.
Unterstuetzung zusammengesetzter Graphen
Architekturdiagramme sind nicht flach. Container leben in Systemen. Komponenten leben in Containern. Overlays gruppieren verwandte Elemente. Auto Layout beruecksichtigt all diese Verschachtelungsbeziehungen.
Wenn ein System Container auf dem Diagramm enthaelt (dargestellt als zusammengesetzter Gruppenknoten), behandelt ELK es als zusammengesetztes Elternelement mit internen Kindern. Die Kinder werden innerhalb des Elternelements angeordnet, und das Elternelement passt seine Groesse an. Das interne Layout verwendet denselben Algorithmus wie die oberste Ebene — geschichtet, mit Kreuzungsminimierung und Ausrichtung — sodass die Struktur innerhalb einer Systemgruppe genauso sauber ist wie die Struktur ausserhalb.
Overlays funktionieren genauso. Wenn ein Overlay konfigurierte Elemente hat, werden diese Elemente waehrend des Layouts als Kinder des Overlays behandelt. Das Overlay aendert seine Groesse und Position, um seine Mitglieder mit angemessenem Abstand zu umfassen. Sogar "schwebende" Overlays — solche ohne explizite Elementzuweisungen — werden behandelt: Auto Layout erkennt, welche Knoten sich visuell innerhalb der Grenzen des Overlays befinden, und haelt sie zusammen.
Nachbearbeitung: Ausrichtung und Rastereinrastung
Die Rohausgabe von ELK ist gut, aber nicht perfekt. Archyl wendet zwei Nachbearbeitungsdurchlaeufe an, um sie zu verfeinern.
Kettenausrichtung findet verbundene Knoten, die auf der senkrechten Achse nahezu ausgerichtet sind, und zwingt sie auf dieselbe exakte Mittellinie. Dies verwendet eine Union-Find-Struktur, um Ketten verbundener Knoten zu gruppieren, berechnet dann den Medianmittelpunkt und richtet die gesamte Kette aus. Das Ergebnis: perfekt gerade Pfeile zwischen verbundenen Elementen — keine "fast vertikalen" Linien mehr, die schlampig aussehen.
Ueberlappungsaufloesung erkennt Knoten, die nach der Ausrichtung zu nahe beieinander gelandet sind, und schiebt sie auseinander. Sie laeuft iterativ bis zu fuenf Durchlaeufe, was kaskadierende Verschiebungen behandelt, bei denen das Bewegen eines Knotens eine neue Ueberlappung mit einem anderen erzeugt.
Nach beiden Durchlaeufen rastet jede Position auf einem 20-Pixel-Raster ein, das dem React-Flow-Hintergrund entspricht. Das bedeutet, dass Elemente sich praezise an den Rasterlinien ausrichten und ein gepflegtes, beabsichtigtes Aussehen erzeugen.
Richtungsumschalter
Auto Layout unterstuetzt zwei Richtungen: Von oben nach unten und Von links nach rechts. Ein Umschalter neben der Auto-Layout-Schaltflaeche laesst Sie zwischen ihnen wechseln.
Von oben nach unten ist der Standard und funktioniert gut fuer die meisten Architekturdiagramme — externe Akteure oben, Systeme in der Mitte, Infrastruktur unten. Von links nach rechts funktioniert besser fuer Pipeline-artige Architekturen oder flussorientierte Ansichten, in denen Daten horizontal durch Verarbeitungsstufen fliessen.
Die Richtung beeinflusst alles: Schichtzuweisung, Kreuzungsminimierung, Ausrichtungsketten und Verbindungspunktberechnung. Wechseln Sie die Richtung, und das gesamte Diagramm orientiert sich neu.
Was gespeichert wird
Auto Layout ist nicht nur ein visueller Effekt. Nach Abschluss der Animation wird jede berechnete Position auf dem Server gespeichert. Knotenpositionen, Overlay-Grenzen, Dimensionen zusammengesetzter Gruppen und Kantenverbindungspunkte werden alle gesichert. Schliessen Sie den Browser, kommen Sie morgen zurueck, und das Layout ist genau so, wie Auto Layout es hinterlassen hat.
Kantenverbindungspunkt-Aktualisierungen werden fuer Effizienz in einem einzigen API-Aufruf zusammengefasst. Overlay-Groessenaenderungen werden einzeln gespeichert. Knotenpositionen werden gebundelt gesendet. Nichts geht verloren.
Globale Architekturansicht
Auto Layout funktioniert auch auf der Seite Globale Architektur — nicht nur innerhalb einzelner Projekte. Wenn Sie Systeme quer durch Ihre gesamte Organisation mit Dutzenden projektuebergreifender Beziehungen betrachten, ist manuelles Layout besonders muehsam. Auto Layout bringt dieselbe Ein-Klick-Organisation in die globale Ansicht, mit derselben Unterstuetzung zusammengesetzter Graphen fuer Systemgruppen, die ihre Container enthalten.
Wann man es nutzen sollte
Auto Layout ist in drei Szenarien am nuetzlichsten:
Nach der KI-Entdeckung. Wenn Archyls KI ein Repository analysiert und ein C4-Modell generiert, werden die initialen Positionen algorithmisch berechnet, spiegeln aber moeglicherweise nicht das Layout wider, das Sie waehlen wuerden. Auto Layout gibt Ihnen einen sauberen Ausgangspunkt.
Nach signifikanten Aenderungen. Sie haben fuenf neue Container hinzugefuegt, Beziehungen reorganisiert und Komponenten zwischen Systemen verschoben. Das Diagramm ist unuebersichtlich geworden. Auto Layout berechnet alles von Grund auf neu.
Beim Erkunden eines neuen Projekts. Sie sind einem Projekt beigetreten und moechten seine Architektur verstehen. Das Diagramm wurde nach dem mentalen Modell eines anderen gestaltet. Auto Layout erzeugt eine standardisierte, lesbare Anordnung, die die Struktur klar macht.
Sie koennen einzelne Elemente jederzeit nach dem Ausfuehren von Auto Layout anpassen. Es ist ein Ausgangspunkt, keine Einschraenkung.
Erste Schritte
Auto Layout ist ab sofort auf allen Plaenen und in jedem Diagramm verfuegbar — auf Projektebene und global. Oeffnen Sie ein beliebiges Diagramm, klicken Sie auf die Schaltflaeche Auto Layout in der Symbolleiste und schauen Sie zu, wie sich Ihre Architektur selbst organisiert.
Ihre Architektur verdient es, lesbar zu sein. Auto Layout stellt sicher, dass das Diagramm nicht im Weg steht.
Mehr ueber die Erstellung effektiver Architekturdiagramme erfahren Sie unter Einfuehrung in das C4-Modell. Um zu verstehen, wie Auto Layout mit projektuebergreifenden Ansichten interagiert, erkunden Sie Echtzeit-Zusammenarbeit und Globale Architektur. Um die Beziehungen zu analysieren, die Auto Layout anordnet, probieren Sie Impact Radar.