Para manter um contêiner do draw.io e seu conteúdo juntos durante o layout automático da página inteira, use um contêiner de layout automático. O draw.io o trata como uma única forma e mantém intacta sua disposição interna. A seleção é importante: selecionar apenas contêineres de layout altera seus layouts internos. Formas de layout avançado e contêineres de layout, Aplicar layouts para reorganizar um diagrama

Este guia aborda como organizar vários diagramas pequenos e contidos no Mac, mantendo cada diagrama unido. Os exemplos usam rótulos neutros, como Container A, A1 e A2. A página oficial da versão atual para desktop lista a versão 32.6.1 com um pacote para macOS; use uma versão atual para desktop ao seguir os menus da documentação atual. Versão 32.6.1

Que tipo de contêiner preserva o layout interno?

Primeiro, decida o que significa “juntos” no seu diagrama. Manter os elementos filhos dentro de um elemento pai, preservar suas posições relativas e organizar esses elementos automaticamente são requisitos diferentes.

Um contêiner comum estabelece a contenção. Para adicionar uma forma, arraste-a sobre o contêiner e solte quando o contorno ficar roxo. Desenhar apenas um retângulo grande atrás de vários nós não estabelece essa relação. Os conectores podem cruzar os limites do contêiner pai. Ativar ou desativar o recurso de recolher/expandir em formas de contêiner

A documentação geral de layout diz que o conteúdo de contêineres comuns é organizado dentro deles quando um layout é executado. Selecionar um contêiner com pelo menos duas formas limita a operação ao conteúdo dele. Portanto, um contêiner comum é útil para estabelecer contenção, mas esse comportamento não garante que a disposição interna existente permanecerá inalterada. Aplicar layouts para organizar diagramas rapidamente

Os contêineres de layout automático fornecem o limite documentado necessário neste caso: durante um layout do diagrama inteiro, suas formas e seus conectores internos não são reorganizados, e cada contêiner é tratado como uma única forma. Formas de layout avançado e contêineres de layout

Resultado pretendido Ponto de partida adequado Condição importante
Manter os nós dentro de um elemento pai, permitindo a reorganização interna Contêiner comum Estabeleça a contenção real antes de aplicar o layout.
Reorganizar a página preservando o layout interno de cada contêiner Contêiner de layout automático Execute um layout do diagrama inteiro.
Organizar continuamente os nós dentro de um limite visível Forma de layout automático da biblioteca Advanced O layout próprio dela reage às edições internas.
Mover junto uma disposição manual exata Agrupe as formas e os conectores A movimentação do grupo é documentada; o agrupamento, por si só, não garante que todo layout automático preserve as posições internas.

A tabela é um guia de decisão baseado nas diferenças documentadas entre formas de contêiner, contêineres de layout automático e grupos.

Criar um contêiner pequeno que permaneça unido

Para criar um limite visível, comece com uma forma de layout de fluxo automático. Assim, você não precisa depender de um retângulo comum para que ele se comporte como um contêiner de layout.

Criar o diagrama interno

  1. Abra seu diagrama no draw.io Desktop no Mac.
  2. Encontre a biblioteca de formas Advanced no painel esquerdo. Se ela não aparecer, clique em More Shapes, selecione a biblioteca de formas General e clique em Apply.
  3. Arraste uma forma de layout de fluxo horizontal ou vertical para a tela.
  4. Use as formas iniciais para criar uma cadeia curta conectada, com os rótulos A1, A2 e A3.
  5. Para estender a cadeia, passe o cursor sobre um nó e clique em uma seta direcional para cloná-lo e conectar outro nó. Clique duas vezes no rótulo para renomeá-lo.

Nos contêineres de layout de fluxo, cada seta direcional cria uma forma conectada a partir do nó sobre o qual você passou o cursor; o layout define sua posição. Os contêineres de árvore seguem regras diferentes para irmãos e filhos. As formas de layout automático também ajustam o tamanho do contêiner ao conteúdo. Estas etapas seguem o guia oficial de formas de layout automático.

Crie uma segunda forma de layout de fluxo automático com os nós B1, B2 e B3. Esses rótulos são ilustrativos, não uma convenção de nomenclatura obrigatória. Dois contêineres facilitam distinguir o movimento de um contêiner inteiro da reorganização dos elementos filhos.

Mantenha pelo menos um elemento dentro de cada contêiner de layout durante a edição. A documentação alerta que excluir o último elemento contido também exclui o contêiner de layout. Ao reconstruir uma seção existente, mantenha um elemento inicial até que o conteúdo substituto esteja presente. Formas de layout avançado e contêineres de layout

Escolher um limite visível ou transparente

As formas de layout Advanced têm uma raia ao redor que permite conexões de entrada e saída em seu limite. Os contêineres criados por Arrange > Insert > Layout têm um limite transparente; os conectores precisam se ligar às formas internas. Escolha com base em se o diagrama externo deve se conectar ao próprio contêiner ou a um nó específico. Formas de layout avançado e contêineres de layout

Para usar a alternativa transparente, escolha Arrange > Insert > Layout e selecione um layout. Crie o diagrama interno soltando formas nas setas direcionais de um nó. A alça com setas cruzadas no canto superior esquerdo move o contêiner de layout. Inserir um layout automatizado

Aplicar o layout externo sem alterar os layouts internos

Antes de executar o layout externo, finalize a disposição interna de cada contêiner e adicione as conexões que expressam a relação entre as seções do diagrama. Por exemplo, conecte o limite visível de Container A ao limite visível de Container B se a relação disser respeito às duas seções como um todo.

Em seguida, siga esta sequência:

  1. Clique em uma área vazia da tela para limpar a seleção.
  2. Abra Arrange > Layout.
  3. Escolha uma predefinição adequada, como Horizontal Flow para uma relação da esquerda para a direita.
  4. Revise as opções de espaçamento e clique em Apply.
  5. Inspecione as posições dos contêineres e os nós dentro deles.

Um fluxo horizontal organiza as formas na direção da esquerda para a direita indicada pelos conectores. Node Spacing controla a separação dentro de uma linha ou coluna, enquanto Rank Spacing controla a separação entre linhas ou colunas consecutivas. Aumente o espaçamento relevante se os rótulos ou as conexões precisarem de mais espaço. Layouts de fluxo

Limpar a seleção é importante. Se apenas contêineres de layout estiverem selecionados, Arrange > Layout substituirá seus layouts internos ativos, em vez de reorganizar a página. Para ajustar deliberadamente as opções de um contêiner existente, selecione-o e escolha Arrange > Layout > Edit Layout. Aplicar layouts para reorganizar um diagrama

Use o exemplo sintético como critério de aceitação: A1, A2 e A3 devem manter sua disposição interna durante o layout externo, assim como os três nós B. Os contêineres pai podem se mover. Essa verificação segue o tratamento documentado dos contêineres de layout como formas únicas; não é o relato de um teste da versão para desktop realizado aqui. Formas de layout avançado e contêineres de layout

Diagnosticar alterações antes de ajustar outras configurações

Os elementos filhos se reorganizam dentro do contêiner

Verifique primeiro o tipo de contêiner e a seleção. Um contêiner comum permite que seu conteúdo seja organizado pelo layout. Um contêiner de layout automático selecionado pode ter seu layout ativo substituído pelo comando de layout. Identifique qual operação ocorreu antes de alterar o espaçamento ou reconstruir o diagrama. Aplicar layouts para organizar diagramas rapidamente, Aplicar layouts para reorganizar um diagrama

O contêiner aumenta ou diminui

Uma alteração de tamanho não significa necessariamente que a contenção falhou. A documentação geral de layout diz que os contêineres são redimensionados para acomodar o conteúdo organizado, mesmo quando Resize Nodes está desativado. Essa opção controla o redimensionamento de nós individuais; ela não garante um limite fixo para o contêiner. Aplicar layouts para organizar diagramas rapidamente

Redimensionar o limite estica os elementos filhos

Para redimensionar manualmente um grupo, selecione-o e desative Resize Children em Style > Properties. O equivalente documentado no estilo é recursiveResize=0, aplicado ao grupo. Isso controla o redimensionamento proporcional; a documentação não descreve essa opção como um controle para preservar posições durante o layout automático. Desativar o redimensionamento dos elementos filhos para redimensionar formas agrupadas individualmente

Você precisa de uma disposição manual exata

Para uma seção cuja geometria posicionada manualmente precisa permanecer exata, selecione suas formas e seus conectores internos e use Arrange > Group ou Cmd+G. Arrastar o grupo resultante move todos os seus elementos juntos. Esse é um método compatível de movimentação manual; a documentação sobre agrupamento não garante um bloqueio universal contra layouts automáticos para grupos arbitrários. Agrupar e desagrupar formas e conectores

Um layout produz um resultado inadequado

Pressione Cmd+Z para desfazê-lo antes de comparar outra predefinição. O guia oficial alerta que os layouts usam o estado atual do diagrama; portanto, aplicar vários layouts em sequência não reproduz a mesma estrutura de maneira consistente. Voltar à mesma disposição inicial torna as comparações mais úteis. Aplicar layouts para reorganizar um diagrama

Para esta tarefa, decida explicitamente duas coisas: qual layout controla os nós dentro de cada contêiner e qual layout organiza a página. Os contêineres de layout automático oferecem a separação documentada entre essas operações. Primeiro, crie as seções internas; depois, limpe a seleção, aplique o layout externo e inspecione o resultado antes de continuar.

Fontes