Dieser Post setzt den dreizehnten Teil fort. Wenn neue Elemente ins Modell kommen landen sie in draw.io oft übereinander oder an ungünstigen Positionen. bausteinsicht layout berechnet ein hierarchisches Layout und schreibt die Positionen direkt ins Diagramm.

bausteinsicht layout

bausteinsicht layout

Bausteinsicht erkennt das Modell automatisch (AutoDetect) und die zugehörige architecture.drawio im gleichen Verzeichnis.

Ausgabe:

Layout applied (hierarchical): architecture.drawio

Das Diagramm ist jetzt hierarchisch angeordnet — Elemente mit vielen ausgehenden Verbindungen stehen oben, Blätter stehen unten.

Richtung wählen

# Top-to-Bottom (Standard)
bausteinsicht layout --rank-dir TB

# Left-to-Right (für breite Diagramme)
bausteinsicht layout --rank-dir LR

LR eignet sich besonders für Systeme mit vielen parallelen Diensten auf gleicher Ebene.

Pinning: Bestimmte Elemente fixieren

Nicht alle Elemente sollen automatisch verschoben werden. Externe Systeme, wichtige Kerndienste oder manuell positionierte Übersichtselemente können mit einem Metadaten-Flag fixiert werden:

In architecture.jsonc:

{
  "model": {
    "external-payment-provider": {
      "kind": "external",
      "title": "Payment Provider",
      "metadata": {
        "bausteinsicht-pinned": "true"
      }
    }
  }
}

Beim Layout-Befehl bleibt dieses Element an seiner Position — alle anderen werden neu angeordnet:

# Standard: gepinnte Elemente werden nicht verschoben
bausteinsicht layout --preserve-pinned true

# Alle Elemente neu anordnen (Pinning ignorieren)
bausteinsicht layout --preserve-pinned false

Typischer Workflow

Nach dem Hinzufügen neuer Elemente (z.B. via bausteinsicht add element oder manuellem Editieren):

# 1. Neues Element hinzufügen
bausteinsicht add element --id newservice --kind service --title "New Service"

# 2. Sync: draw.io kennt das neue Element
bausteinsicht sync

# 3. Layout neu berechnen
bausteinsicht layout

# 4. draw.io öffnen — sauber angeordnet
layout verändert nur die Positionen in architecture.drawio, nicht das Modell in architecture.jsonc. Die Positions-Änderungen werden von sync nicht überschrieben — sync aktualisiert Elemente und Stile, aber nicht Positionen.

Grenzen

  • Aktuell wird nur der hierarchical-Algorithmus unterstützt (Sugiyama-basiert)

  • Überlappungen bei sehr dichten Diagrammen möglich — manuelles Nacharbeiten kann nötig sein

  • Scope-Boxen (→ Teil 5) werden als Container behandelt und beeinflussen das Layout

Beispiel-Modell

Das Beispiel für diesen Teil (Modell mit gepinntem externen System) liegt unter teil_14.jsonc.

So sieht das Ergebnis in draw.io aus (bausteinsicht sync):

Das draw.io-File dafür findest du hier: teil_14.drawio

Generierte PNG-Dateien via bausteinsicht export --image-format png:

containers
context

Generierte PlantUML-Diagramme via bausteinsicht export-diagram:

Diagram
Diagram

Was als nächstes kommt

  • Teil 15: Templates — Eigene visuelle Stile für alle Element-Typen als draw.io-Template generieren

  • Teil 16: Workspace — Mehrere Architekturmodelle in einem Workspace kombinieren

Offizielle Dokumentation: User Manual · Tutorial auf doctoolchain.org