Per mantenere insieme un contenitore di draw.io e i suoi contenuti durante il layout automatico dell’intera pagina, usa un contenitore con layout automatico. draw.io lo tratta come un’unica forma e lascia invariata la sua disposizione interna. La selezione è importante: selezionando solo i contenitori con layout si modificano invece i loro layout interni. Forme con layout avanzato e contenitori con layout, Applicare i layout per ridisporre un diagramma

Questa guida illustra come disporre su un Mac diversi piccoli diagrammi contenuti, mantenendo unito ciascun diagramma. Gli esempi usano etichette neutre come Container A, A1 e A2. La pagina ufficiale delle versioni desktop attuali indica la versione 32.6.1 con un pacchetto macOS; quando segui i menu descritti nella documentazione attuale, usa una versione desktop recente. Versione 32.6.1

Quale tipo di contenitore conserva il layout interno?

Per prima cosa, decidi cosa significa «insieme» per il tuo diagramma. Mantenere gli elementi figli all’interno di un elemento padre, conservarne le posizioni relative e disporre automaticamente tali elementi sono requisiti diversi.

Un contenitore normale definisce il contenimento. Per aggiungere una forma, trascinala sopra il contenitore e rilasciala quando il bordo diventa viola. Disegnare semplicemente un grande rettangolo dietro a diversi nodi non crea questa relazione. I connettori possono oltrepassare i confini dei contenitori padre. Attivare o disattivare la funzione di compressione/espansione sulle forme contenitore

La documentazione generale sui layout indica che, quando si esegue un layout, i contenuti dei contenitori normali vengono disposti al loro interno. Selezionando un contenitore con almeno due forme, l’operazione viene limitata ai suoi contenuti. Un contenitore normale è quindi utile per definire il contenimento, ma questo comportamento non garantisce che la disposizione interna esistente resti invariata. Applicare i layout per organizzare rapidamente i diagrammi

I contenitori con layout automatico forniscono il confine documentato necessario in questo caso: durante il layout dell’intero diagramma, le forme e i connettori al loro interno non vengono ridisposti e ogni contenitore viene trattato come un’unica forma. Forme con layout avanzato e contenitori con layout

Risultato desiderato Punto di partenza adatto Condizione importante
Mantenere i nodi all’interno di un elemento padre consentendo la ridisposizione interna Contenitore normale Definisci il contenimento effettivo prima di applicare il layout.
Ridisporre la pagina conservando il layout interno di ogni contenitore Contenitore con layout automatico Esegui il layout dell’intero diagramma.
Disporre continuamente i nodi all’interno di un confine visibile Forma con layout automatico dalla libreria Advanced Il layout della forma si adatta alle modifiche interne.
Spostare insieme una disposizione manuale esatta Raggruppa le forme e i connettori È documentato lo spostamento del gruppo; il solo raggruppamento non garantisce che ogni layout automatico conservi le posizioni interne.

La tabella aiuta a scegliere in base alle differenze documentate tra forme contenitore, contenitori con layout automatico e gruppi.

Crea un piccolo contenitore che rimanga unito

Per ottenere un riquadro visibile, parti da una forma con layout automatico a flusso. Così non dovrai affidarti a un rettangolo normale perché si comporti come un contenitore con layout.

Crea il diagramma interno

  1. Apri il diagramma in draw.io Desktop sul tuo Mac.
  2. Trova la libreria di forme Advanced nel pannello a sinistra. Se non è presente, fai clic su More Shapes, seleziona la libreria di forme General e fai clic su Apply.
  3. Trascina sulla tela una forma con layout a flusso orizzontale o verticale.
  4. Usa le forme iniziali per creare una breve sequenza collegata, con le etichette A1, A2 e A3.
  5. Per estendere la sequenza, passa il puntatore su un nodo e fai clic su una freccia direzionale per clonare e collegare un altro nodo. Fai doppio clic sulla sua etichetta per rinominarlo.

Nei contenitori con layout a flusso, ogni freccia direzionale crea una forma collegata al nodo su cui hai passato il puntatore; il layout ne determina la posizione. I contenitori ad albero seguono regole diverse per gli elementi fratelli e figli. Le forme con layout automatico adattano anche le dimensioni del contenitore ai suoi contenuti. Questi passaggi seguono la guida ufficiale alle forme con layout automatico.

Crea una seconda forma con layout automatico a flusso, con i nodi B1, B2 e B3. Sono etichette d’esempio, non una convenzione di denominazione obbligatoria. Due contenitori rendono più facile distinguere lo spostamento di un intero contenitore dalla ridisposizione dei suoi elementi figli.

Durante le modifiche, mantieni almeno un elemento all’interno di ogni contenitore con layout. La documentazione avverte che eliminando l’ultimo elemento contenuto viene eliminato anche il contenitore con layout. Quando ricostruisci una sezione esistente, conserva un elemento iniziale finché non sono presenti i contenuti sostitutivi. Forme con layout avanzato e contenitori con layout

Scegli un confine visibile o trasparente

Le forme con layout della libreria Advanced hanno una corsia esterna che supporta collegamenti da e verso il suo confine. I contenitori creati tramite Arrange > Insert > Layout hanno un confine trasparente; i connettori devono invece collegarsi alle forme al loro interno. Scegli in base alla necessità che il diagramma esterno si colleghi al contenitore stesso o a un nodo specifico. Forme con layout avanzato e contenitori con layout

Per l’alternativa trasparente, scegli Arrange > Insert > Layout e seleziona un layout. Crea il diagramma interno trascinando le forme sulle frecce direzionali di un nodo. La maniglia con le frecce incrociate in alto a sinistra sposta il contenitore con layout. Inserire un layout automatizzato

Applica il layout esterno senza modificare i layout interni

Prima di eseguire il layout esterno, completa la disposizione interna di ciascun contenitore e aggiungi i collegamenti che esprimono il rapporto tra le sezioni del diagramma. Per esempio, collega il confine visibile di Container A a quello di Container B se la relazione riguarda le due sezioni nel loro insieme.

Segui quindi questa sequenza:

  1. Fai clic su una parte vuota della tela per deselezionare tutto.
  2. Apri Arrange > Layout.
  3. Scegli una preimpostazione adatta, come Horizontal Flow per una relazione da sinistra a destra.
  4. Esamina le opzioni di spaziatura e fai clic su Apply.
  5. Controlla sia la posizione dei contenitori sia i nodi al loro interno.

Un layout orizzontale a flusso dispone le forme da sinistra a destra, seguendo la direzione indicata dai connettori. Node Spacing controlla la distanza all’interno di una riga o colonna, mentre Rank Spacing controlla la distanza tra righe o colonne successive. Aumenta la spaziatura pertinente se le etichette o i collegamenti hanno bisogno di più spazio. Layout a flusso

Deselezionare tutto è importante. Se sono selezionati solo i contenitori con layout, Arrange > Layout sostituisce i loro layout interni attivi invece di ridisporre la pagina. Per modificare deliberatamente le opzioni di un contenitore esistente, selezionalo e scegli Arrange > Layout > Edit Layout. Applicare i layout per ridisporre un diagramma

Usa l’esempio sintetico come controllo di accettazione: A1, A2 e A3 dovrebbero conservare la propria disposizione interna durante il layout esterno, così come i tre nodi B. I contenitori padre possono spostarsi. Questo controllo si basa sul trattamento documentato dei contenitori con layout come forme singole; non è il resoconto di una prova eseguita qui sull’app desktop. Forme con layout avanzato e contenitori con layout

Individua la causa delle modifiche prima di regolare altre impostazioni

Gli elementi figli si ridispongono all’interno del contenitore

Controlla prima il tipo di contenitore e la selezione. Un contenitore normale consente di applicare un layout ai suoi contenuti. Selezionando un contenitore con layout automatico, il comando di layout può sostituire il layout attivo. Individua quale operazione è avvenuta prima di modificare la spaziatura o ricostruire il diagramma. Applicare i layout per organizzare rapidamente i diagrammi, Applicare i layout per ridisporre un diagramma

Il contenitore si ingrandisce o si restringe

Una variazione delle dimensioni non significa necessariamente che il contenimento sia venuto meno. La documentazione generale sui layout specifica che i contenitori si ridimensionano per adattarsi ai contenuti disposti, anche quando Resize Nodes è disattivato. Questa opzione controlla il ridimensionamento dei singoli nodi; non garantisce che il confine del contenitore resti fisso. Applicare i layout per organizzare rapidamente i diagrammi

Ridimensionando il confine, gli elementi figli si deformano

Per ridimensionare manualmente un gruppo, selezionalo e disattiva Resize Children in Style > Properties. L’equivalente documentato nello stile è recursiveResize=0, applicato al gruppo. Questa opzione controlla il ridimensionamento proporzionale; la documentazione non la descrive come un comando per conservare le posizioni durante il layout automatico. Disattivare il ridimensionamento degli elementi figli per ridimensionare separatamente le forme raggruppate

Hai bisogno di una disposizione manuale esatta

Per una sezione in cui la geometria definita a mano deve restare esatta, seleziona le forme e i connettori interni, quindi usa Arrange > Group o Cmd+G. Trascinando il gruppo risultante, i suoi elementi si spostano insieme. Questo è un metodo supportato per lo spostamento manuale; la documentazione sul raggruppamento non garantisce che i layout automatici congelino sempre la disposizione di gruppi arbitrari. Raggruppare e separare forme e connettori

Un layout produce un risultato non adatto

Premi Cmd+Z per annullarlo prima di confrontare un’altra preimpostazione. La guida ufficiale avverte che i layout usano lo stato corrente del diagramma, quindi applicarne diversi in successione non riproduce sempre la stessa struttura. Tornare alla stessa disposizione iniziale rende i confronti più utili. Applicare i layout per ridisporre un diagramma

Per questa attività, decidi esplicitamente due cose: quale layout gestisce i nodi all’interno di ciascun contenitore e quale layout dispone la pagina. I contenitori con layout automatico forniscono la separazione documentata tra queste operazioni. Crea prima le sezioni interne, deseleziona tutto, applica il layout esterno e controlla il risultato prima di proseguire.

Fonti