Damit ein draw.io-Container und sein Inhalt bei einem seitenweiten automatischen Layout zusammenbleiben, verwenden Sie einen Container mit automatischem Layout. draw.io behandelt ihn als eine Form und lässt seine interne Anordnung unverändert. Die Auswahl ist entscheidend: Wenn nur Layout-Container ausgewählt sind, werden stattdessen ihre internen Layouts geändert. Erweiterte Layout-Formen und Layout-Container, Layouts anwenden, um ein Diagramm neu anzuordnen

Diese Anleitung behandelt das Anordnen mehrerer kleiner, eingebetteter Diagramme auf einem Mac, wobei jedes Diagramm zusammenbleibt. Die Beispiele verwenden neutrale Bezeichnungen wie Container A, A1 und A2. Auf der aktuellen offiziellen Seite für Desktop-Versionen ist Version 32.6.1 mit einem macOS-Paket aufgeführt. Verwenden Sie einen aktuellen Desktop-Build, wenn Sie den Menüs der aktuellen Dokumentation folgen. Version 32.6.1

Welche Art von Container bewahrt das interne Layout?

Entscheiden Sie zunächst, was „zusammenbleiben“ für Ihr Diagramm bedeutet. Kinder innerhalb eines übergeordneten Elements zu halten, ihre relative Position zu bewahren und diese Kinder automatisch anzuordnen, sind unterschiedliche Anforderungen.

Ein gewöhnlicher Container legt die Zugehörigkeit fest. Um eine Form hinzuzufügen, ziehen Sie sie über den Container und lassen Sie sie los, sobald dessen Umriss lila wird. Ein großes Rechteck hinter mehreren Knoten zu zeichnen, stellt diese Beziehung allein nicht her. Verbinder können die Grenzen übergeordneter Container überschreiten. Die Funktion zum Ein- und Ausklappen von Container-Formen aktivieren oder deaktivieren

Die allgemeine Layout-Dokumentation besagt, dass Inhalte gewöhnlicher Container beim Ausführen eines Layouts innerhalb ihres Containers angeordnet werden. Wenn Sie einen Container mit mindestens zwei Formen auswählen, wird der Vorgang auf dessen Inhalte beschränkt. Ein gewöhnlicher Container eignet sich daher für die Zugehörigkeit; daraus folgt jedoch nicht, dass seine bestehende interne Anordnung unverändert bleibt. Layouts anwenden, um Diagramme schnell zu organisieren

Container mit automatischem Layout bieten die hier benötigte dokumentierte Abgrenzung: Bei einem diagrammweiten Layout werden ihre internen Formen und Verbinder nicht neu angeordnet, und jeder Container wird als eine einzelne Form behandelt. Erweiterte Layout-Formen und Layout-Container

Gewünschtes Ergebnis Geeigneter Ausgangspunkt Wichtige Bedingung
Knoten in einem übergeordneten Element halten und interne Neuanordnung zulassen Gewöhnlicher Container Vor dem Anwenden des Layouts die tatsächliche Zugehörigkeit herstellen.
Die Seite neu anordnen und dabei das interne Layout jedes Containers bewahren Container mit automatischem Layout Ein diagrammweites Layout ausführen.
Knoten innerhalb einer sichtbaren Begrenzung fortlaufend anordnen Form mit automatischem Layout aus der Bibliothek Advanced Das eigene Layout reagiert auf interne Änderungen.
Eine genau festgelegte manuelle Anordnung gemeinsam verschieben Formen und Verbinder gruppieren Die gemeinsame Bewegung einer Gruppe ist dokumentiert; das Gruppieren allein garantiert nicht, dass jedes automatische Layout interne Positionen bewahrt.

Die Tabelle dient als Entscheidungshilfe und leitet sich aus den dokumentierten Unterschieden zwischen Container-Formen, Containern mit automatischem Layout und Gruppen ab.

Einen kleinen Container erstellen, der zusammenbleibt

Für eine sichtbare Umrandung beginnen Sie mit einer Form für ein automatisches Flusslayout. So müssen Sie sich nicht darauf verlassen, dass sich ein gewöhnliches Rechteck wie ein Layout-Container verhält.

Das interne Diagramm erstellen

  1. Öffnen Sie Ihr Diagramm in draw.io Desktop auf Ihrem Mac.
  2. Suchen Sie in der linken Leiste die Formenbibliothek Advanced. Falls sie fehlt, klicken Sie auf More Shapes, wählen Sie die Formenbibliothek General aus und klicken Sie auf Apply.
  3. Ziehen Sie eine Form für ein horizontales oder vertikales Flusslayout auf die Arbeitsfläche.
  4. Erstellen Sie mit den Starter-Formen eine kurze verbundene Kette mit den Bezeichnungen A1, A2 und A3.
  5. Um die Kette zu verlängern, bewegen Sie den Mauszeiger über einen Knoten und klicken Sie auf einen Richtungspfeil, um einen weiteren Knoten zu klonen und zu verbinden. Doppelklicken Sie auf seine Beschriftung, um sie umzubenennen.

Bei Containern für Flusslayouts erzeugt jeder Richtungspfeil eine verbundene Form ausgehend von dem Knoten, auf den Sie den Mauszeiger bewegt haben; das Layout bestimmt ihre Position. Für Baum-Container gelten andere Regeln für Geschwister und Kinder. Formen mit automatischem Layout passen außerdem die Größe ihres Containers an dessen Inhalt an. Diese Schritte folgen der offiziellen Anleitung zu Formen mit automatischem Layout.

Erstellen Sie eine zweite Form für ein automatisches Flusslayout mit den Knoten B1, B2 und B3. Dies sind Beispiele für Bezeichnungen, keine vorgeschriebene Benennung. Zwei Container erleichtern es, die Bewegung eines ganzen Containers von der Neuanordnung seiner Kinder zu unterscheiden.

Lassen Sie beim Bearbeiten mindestens ein Element in jedem Layout-Container. Die Dokumentation weist darauf hin, dass beim Löschen des letzten enthaltenen Elements auch der Layout-Container gelöscht wird. Wenn Sie einen bestehenden Abschnitt neu erstellen, behalten Sie ein Startelement bei, bis der Ersatzinhalt vorhanden ist. Erweiterte Layout-Formen und Layout-Container

Eine sichtbare oder transparente Begrenzung wählen

Die Layout-Formen in Advanced verfügen über eine umgebende Swimlane, die Verbindungen zur Begrenzung und von ihr weg unterstützt. Container, die über Arrange > Insert > Layout erstellt werden, haben eine transparente Begrenzung; Verbinder müssen stattdessen an ihren internen Formen ansetzen. Wählen Sie danach, ob das äußere Diagramm mit dem Container selbst oder mit einem bestimmten Knoten verbunden werden soll. Erweiterte Layout-Formen und Layout-Container

Für die transparente Alternative wählen Sie Arrange > Insert > Layout und ein Layout aus. Erstellen Sie das interne Diagramm, indem Sie Formen auf die Richtungspfeile eines Knotens ziehen. Mit dem Pfeilkreuz-Griff oben links verschieben Sie den Layout-Container. Ein automatisiertes Layout einfügen

Das äußere Layout anwenden, ohne die inneren Layouts zu ändern

Schließen Sie vor dem Ausführen des äußeren Layouts die interne Anordnung jedes Containers ab und fügen Sie die Verbindungen hinzu, die die Beziehungen zwischen Ihren Diagrammabschnitten darstellen. Verbinden Sie zum Beispiel die sichtbare Begrenzung von Container A mit der sichtbaren Begrenzung von Container B, wenn die Beziehung für die beiden Abschnitte als Ganzes gilt.

Gehen Sie dann wie folgt vor:

  1. Klicken Sie auf einen leeren Bereich der Arbeitsfläche, um die Auswahl aufzuheben.
  2. Öffnen Sie Arrange > Layout.
  3. Wählen Sie eine passende Voreinstellung, etwa Horizontal Flow für eine Beziehung von links nach rechts.
  4. Prüfen Sie die Abstandsoptionen und klicken Sie auf Apply.
  5. Prüfen Sie die Positionen der Container und die Knoten in ihnen.

Ein horizontales Flusslayout ordnet Formen in der durch Verbinder angegebenen Richtung von links nach rechts an. Mit Node Spacing legen Sie den Abstand innerhalb einer Zeile oder Spalte fest, mit Rank Spacing den Abstand zwischen aufeinanderfolgenden Zeilen oder Spalten. Erhöhen Sie den passenden Abstand, wenn Beschriftungen oder Verbindungen mehr Platz benötigen. Flusslayouts

Die Auswahl aufzuheben ist entscheidend. Wenn nur Layout-Container ausgewählt sind, ersetzt Arrange > Layout ihre aktiven internen Layouts, anstatt die Seite neu anzuordnen. Um die Optionen eines bestehenden Containers gezielt anzupassen, wählen Sie ihn aus und dann Arrange > Layout > Edit Layout. Layouts anwenden, um ein Diagramm neu anzuordnen

Verwenden Sie das synthetische Beispiel als Abnahmekontrolle: A1, A2 und A3 sollten ihr internes Layout beim äußeren Layout beibehalten, ebenso die drei Knoten B. Ihre übergeordneten Container dürfen sich bewegen. Diese Prüfung folgt der dokumentierten Behandlung von Layout-Containern als einzelne Form; sie ist kein Bericht über einen hier durchgeführten Desktop-Test. Erweiterte Layout-Formen und Layout-Container

Änderungen untersuchen, bevor Sie weitere Einstellungen anpassen

Die Kinder werden innerhalb des Containers neu angeordnet

Prüfen Sie zuerst den Containertyp und Ihre Auswahl. Der Inhalt eines gewöhnlichen Containers kann neu angeordnet werden. Bei einem ausgewählten Container mit automatischem Layout kann der Layout-Befehl das aktive Layout ersetzen. Ermitteln Sie, welcher Vorgang stattgefunden hat, bevor Sie Abstände ändern oder das Diagramm neu erstellen. Layouts anwenden, um Diagramme schnell zu organisieren, Layouts anwenden, um ein Diagramm neu anzuordnen

Der Container wird größer oder kleiner

Eine Größenänderung bedeutet nicht unbedingt, dass die Zugehörigkeit fehlgeschlagen ist. Die allgemeine Layout-Dokumentation besagt, dass Container so angepasst werden, dass sie zu ihren neu angeordneten Inhalten passen, selbst wenn Resize Nodes deaktiviert ist. Diese Option steuert die Größenänderung einzelner Knoten; sie garantiert keine feste Containerbegrenzung. Layouts anwenden, um Diagramme schnell zu organisieren

Beim Ändern der Begrenzungsgröße werden die Kinder gestreckt

Um eine Gruppe manuell in der Größe zu ändern, wählen Sie die Gruppe aus und deaktivieren Sie Resize Children unter Style > Properties. Das dokumentierte Stil-Äquivalent ist recursiveResize=0 und wird auf die Gruppe angewendet. Damit wird die proportionale Größenänderung gesteuert; die Dokumentation beschreibt diese Option nicht als Schalter, der Positionen bei einem automatischen Layout bewahrt. „Resize Children“ deaktivieren, um gruppierte Formen einzeln in der Größe zu ändern

Sie benötigen eine exakt von Hand erstellte Anordnung

Wenn die von Hand platzierte Geometrie eines Abschnitts exakt erhalten bleiben muss, wählen Sie dessen Formen und interne Verbinder aus und verwenden Sie Arrange > Group oder Cmd+G. Durch Ziehen der entstandenen Gruppe bewegen sich ihre Elemente gemeinsam. Dies ist eine unterstützte Möglichkeit für manuelle Bewegungen; die Dokumentation zum Gruppieren belegt keine allgemeine Sperre für beliebige Gruppen bei automatischen Layouts. Formen und Verbinder gruppieren und Gruppierungen aufheben

Ein Layout ergibt ein ungeeignetes Ergebnis

Drücken Sie Cmd+Z, um es rückgängig zu machen, bevor Sie eine andere Voreinstellung ausprobieren. Die offizielle Anleitung weist darauf hin, dass Layouts den aktuellen Zustand des Diagramms verwenden. Deshalb ergibt das wiederholte Anwenden mehrerer Layouts nicht zuverlässig dieselbe Struktur. Wenn Sie zur gleichen Ausgangsanordnung zurückkehren, lassen sich die Ergebnisse besser vergleichen. Layouts anwenden, um ein Diagramm neu anzuordnen

Treffen Sie für diese Aufgabe zwei klare Entscheidungen: Welches Layout steuert die Knoten innerhalb jedes Containers, und welches Layout ordnet die Seite an? Container mit automatischem Layout sorgen für die dokumentierte Trennung dieser Vorgänge. Erstellen Sie zuerst die internen Abschnitte, heben Sie die Auswahl auf, wenden Sie das äußere Layout an und prüfen Sie das Ergebnis, bevor Sie fortfahren.

Quellen