Gebruik een container voor automatische indeling om een draw.io-container en de inhoud ervan bij een automatische indeling van de hele pagina bij elkaar te houden. draw.io behandelt deze als één vorm en laat de interne indeling intact. De selectie is van belang: als je alleen containers voor automatische indeling selecteert, worden in plaats daarvan hun interne indelingen gewijzigd. Geavanceerde indelingsvormen en containers voor automatische indeling, Indelingen toepassen om een diagram opnieuw in te delen

Deze handleiding behandelt het rangschikken van meerdere kleine, ingesloten diagrammen op een Mac, waarbij elk diagram bij elkaar blijft. De voorbeelden gebruiken neutrale labels zoals Container A, A1 en A2. Op de huidige officiële pagina met desktopreleases staat versie 32.6.1 met een macOS-pakket; gebruik een actuele desktopversie wanneer je de menu’s uit de huidige documentatie volgt. Release 32.6.1

Welk type container behoudt de interne indeling?

Bepaal eerst wat ‘bij elkaar houden’ voor je diagram betekent. Kinderen binnen een oudervorm houden, hun relatieve posities behouden en die kinderen automatisch rangschikken zijn verschillende vereisten.

Een gewone container zorgt voor insluiting. Sleep een vorm over de container en laat deze los zodra de omtrek paars wordt. Alleen een grote rechthoek achter meerdere knooppunten tekenen, zorgt niet voor die relatie. Verbindingslijnen kunnen de grenzen van oudercontainers overschrijden. De functie voor in- en uitklappen op containervormen in- of uitschakelen

In de algemene documentatie over indelingen staat dat de inhoud van gewone containers binnen de container wordt gerangschikt wanneer een indeling wordt toegepast. Als je één container met ten minste twee vormen selecteert, wordt de bewerking beperkt tot de inhoud ervan. Een gewone container is daarom handig om vormen in te sluiten, maar dat gedrag garandeert niet dat de bestaande interne indeling ongewijzigd blijft. Indelingen toepassen om diagrammen snel te organiseren

Containers voor automatische indeling bieden de hier benodigde, gedocumenteerde grens: tijdens een indeling van het hele diagram worden de interne vormen en verbindingslijnen niet opnieuw gerangschikt en wordt elke container als één vorm behandeld. Geavanceerde indelingsvormen en containers voor automatische indeling

Gewenst resultaat Geschikt uitgangspunt Belangrijke voorwaarde
Knooppunten binnen een oudervorm houden en interne herschikking toestaan Gewone container Zorg voor daadwerkelijke insluiting voordat je de indeling toepast.
De pagina opnieuw indelen en de interne indeling van elke container behouden Container voor automatische indeling Pas een indeling toe op het hele diagram.
Knooppunten continu rangschikken binnen een zichtbare grens Automatische indelingsvorm uit de bibliotheek Advanced De eigen indeling reageert op interne bewerkingen.
Een exacte handmatige indeling als geheel verplaatsen De vormen en verbindingslijnen groeperen Groeperen voor verplaatsing is gedocumenteerd; groeperen alleen garandeert niet dat elke automatische indeling de interne posities behoudt.

De tabel helpt bij het kiezen op basis van de gedocumenteerde verschillen tussen containervormen, containers voor automatische indeling en groepen.

Een kleine container maken die bij elkaar blijft

Begin voor een zichtbare omsluiting met een automatische vorm met stroomindeling. Zo hoef je er niet op te vertrouwen dat een gewone rechthoek zich gedraagt als een container voor automatische indeling.

Het interne diagram maken

  1. Open je diagram in draw.io Desktop op je Mac.
  2. Zoek de vormenbibliotheek Advanced in het linkerpaneel. Ontbreekt deze, klik dan op More Shapes, selecteer de vormenbibliotheek General en klik op Apply.
  3. Sleep een horizontale of verticale vorm met stroomindeling naar het canvas.
  4. Gebruik de beginvormen om een korte verbonden keten te maken, met de labels A1, A2 en A3.
  5. Beweeg de aanwijzer over een knooppunt en klik op een richtingspijl om een volgend knooppunt te kopiëren en te verbinden. Dubbelklik op het label om het te wijzigen.

Bij containers met stroomindeling maakt elke richtingspijl een verbonden vorm vanaf het knooppunt waar je de aanwijzer boven hield; de indeling bepaalt de plaats ervan. Voor boomcontainers gelden andere regels voor verwante en onderliggende knooppunten. Automatische indelingsvormen passen ook de grootte van hun container aan de inhoud aan. Deze stappen volgen de officiële handleiding voor automatische indelingsvormen.

Maak een tweede automatische vorm met stroomindeling, met de knooppunten B1, B2 en B3. Dit zijn voorbeeldlabels, geen verplichte naamgevingsconventie. Met twee containers kun je makkelijker onderscheid maken tussen het verplaatsen van een hele container en het herschikken van de inhoud ervan.

Laat tijdens het bewerken ten minste één element in elke container voor automatische indeling staan. Volgens de documentatie wordt de container voor automatische indeling ook verwijderd als je het laatste ingesloten element verwijdert. Houd bij het opnieuw opbouwen van een bestaand gedeelte een beginvorm staan totdat de vervangende inhoud aanwezig is. Geavanceerde indelingsvormen en containers voor automatische indeling

Een zichtbare of transparante grens kiezen

De indelingsvormen in Advanced hebben een omringende zwembaan die verbindingen met en vanaf de grens mogelijk maakt. Containers die je maakt via Arrange > Insert > Layout hebben een transparante grens; verbindingslijnen moeten dan aan de interne vormen worden gekoppeld. Kies op basis van de vraag of het buitendiagram verbinding moet maken met de container zelf of met een specifiek knooppunt. Geavanceerde indelingsvormen en containers voor automatische indeling

Kies voor het transparante alternatief Arrange > Insert > Layout en selecteer een indeling. Bouw het interne diagram door vormen op de richtingspijlen van een knooppunt neer te zetten. Met de greep met gekruiste pijlen linksboven verplaats je de container voor automatische indeling. Een automatische indeling invoegen

De buitenste indeling toepassen zonder de interne indelingen te wijzigen

Voltooi de interne indeling van elke container voordat je de buitenste indeling toepast en voeg de verbindingen toe die de relatie tussen je diagramgedeelten weergeven. Verbind bijvoorbeeld de zichtbare grens van Container A met die van Container B als de relatie betrekking heeft op de gedeelten als geheel.

Volg daarna deze stappen:

  1. Klik op een leeg gedeelte van het canvas om de selectie op te heffen.
  2. Open Arrange > Layout.
  3. Kies een geschikte voorinstelling, zoals Horizontal Flow voor een relatie van links naar rechts.
  4. Controleer de opties voor tussenruimte en klik op Apply.
  5. Controleer zowel de posities van de containers als de knooppunten erin.

Met een horizontale stroomindeling worden vormen in de richting van links naar rechts gerangschikt, zoals aangegeven door de verbindingslijnen. Met Node Spacing bepaal je de afstand binnen een rij of kolom; met Rank Spacing bepaal je de afstand tussen opeenvolgende rijen of kolommen. Vergroot de betreffende tussenruimte als labels of verbindingen meer ruimte nodig hebben. Stroomindelingen

Het opheffen van de selectie is belangrijk. Als alleen containers voor automatische indeling geselecteerd zijn, vervangt Arrange > Layout hun actieve interne indelingen in plaats van de pagina opnieuw in te delen. Als je de opties van een bestaande container bewust wilt aanpassen, selecteer je deze en kies je Arrange > Layout > Edit Layout. Indelingen toepassen om een diagram opnieuw in te delen

Gebruik het synthetische voorbeeld als acceptatiecontrole: A1, A2 en A3 moeten hun interne indeling behouden wanneer de buitenste indeling wordt toegepast; hetzelfde geldt voor de drie knooppunten B. De bovenliggende containers mogen verplaatsen. Deze controle volgt uit de gedocumenteerde behandeling van containers voor automatische indeling als één vorm; dit is geen verslag van een desktoptest die hier is uitgevoerd. Geavanceerde indelingsvormen en containers voor automatische indeling

Wijzigingen onderzoeken voordat je meer instellingen aanpast

De kinderen worden binnen de container opnieuw gerangschikt

Controleer eerst het containertype en je selectie. De inhoud van een gewone container kan opnieuw worden ingedeeld. Als je een container voor automatische indeling selecteert, kan de opdracht voor indeling de actieve indeling ervan vervangen. Stel vast welke bewerking heeft plaatsgevonden voordat je de tussenruimte aanpast of het diagram opnieuw opbouwt. Indelingen toepassen om diagrammen snel te organiseren, Indelingen toepassen om een diagram opnieuw in te delen

De container wordt groter of kleiner

Een formaatwijziging betekent niet noodzakelijk dat de insluiting is mislukt. Volgens de algemene documentatie over indelingen worden containers aangepast aan hun opnieuw ingedeelde inhoud, zelfs als Resize Nodes is uitgeschakeld. Die optie bepaalt of afzonderlijke knooppunten van formaat veranderen; ze garandeert geen vaste containergrens. Indelingen toepassen om diagrammen snel te organiseren

Bij het vergroten of verkleinen van de grens worden de kinderen uitgerekt

Als je een groep handmatig van formaat wilt veranderen, selecteer je de groep en schakel je Resize Children uit onder Style > Properties. Het bijbehorende gedocumenteerde stijleigenschap is recursiveResize=0, toegepast op de groep. Dit regelt het proportioneel vergroten of verkleinen; de documentatie beschrijft het niet als een optie om posities tijdens automatische indeling te behouden. Resize Children uitschakelen om gegroepeerde vormen afzonderlijk te vergroten of te verkleinen

Je hebt een exacte handgemaakte indeling nodig

Als de handmatig geplaatste geometrie van een gedeelte exact moet blijven, selecteer je de vormen en interne verbindingslijnen en gebruik je Arrange > Group of Cmd+G. Als je de resulterende groep versleept, bewegen de onderdelen samen. Dit is een ondersteunde manier om onderdelen handmatig te verplaatsen; in de documentatie over groeperen staat geen algemene garantie dat willekeurige groepen bij automatische indeling bevroren blijven. Vormen en verbindingslijnen groeperen en de groepering opheffen

Een indeling levert een ongeschikt resultaat op

Druk op Cmd+Z om de indeling ongedaan te maken voordat je een andere voorinstelling probeert. In de officiële handleiding staat dat indelingen de huidige toestand van het diagram gebruiken. Daarom levert het achtereenvolgens toepassen van meerdere indelingen niet steeds dezelfde structuur op. Vergelijkingen zijn nuttiger als je terugkeert naar dezelfde uitgangsindeling. Indelingen toepassen om een diagram opnieuw in te delen

Neem voor deze taak twee expliciete beslissingen: welke indeling de knooppunten binnen elke container beheert en welke indeling de pagina rangschikt. Containers voor automatische indeling bieden de gedocumenteerde scheiding tussen die bewerkingen. Bouw eerst de interne gedeelten op, hef de selectie op, pas de buitenste indeling toe en controleer het resultaat voordat je verdergaat.

Bronnen