Para mantener juntos un contenedor de draw.io y su contenido durante la disposición automática de toda la página, usa un contenedor de disposición automática. draw.io lo trata como una sola forma y deja intacta su disposición interna. La selección importa: si seleccionas solo contenedores de disposición, cambiará su disposición interna. Formas de disposición avanzada y contenedores de disposición, Aplicar disposiciones para reorganizar un diagrama

Esta guía explica cómo organizar varios diagramas pequeños y contenidos en un Mac manteniendo unido cada diagrama. Los ejemplos usan etiquetas neutras como Container A, A1 y A2. La página oficial de versiones de escritorio actual indica la versión 32.6.1 con un paquete para macOS; usa una versión actual de escritorio para seguir los menús de la documentación vigente. Versión 32.6.1

¿Qué tipo de contenedor conserva su disposición interna?

Primero, decide qué significa «juntos» para tu diagrama. Mantener los elementos secundarios dentro de un elemento principal, conservar sus posiciones relativas y organizar automáticamente esos elementos son requisitos distintos.

Un contenedor normal establece la contención. Para añadir una forma, arrástrala sobre el contenedor y suéltala cuando el contorno se vuelva morado. Dibujar un rectángulo grande detrás de varios nodos no establece por sí solo esa relación. Los conectores pueden cruzar los límites del contenedor principal. Activar o desactivar la función de contraer y expandir en formas de contenedor

La documentación general de disposición indica que el contenido de los contenedores normales se organiza dentro del contenedor al ejecutar una disposición. Si seleccionas un contenedor con al menos dos formas, la operación se limita a su contenido. Por tanto, un contenedor normal sirve para establecer la contención, pero ese comportamiento no garantiza que su disposición interna actual permanezca sin cambios. Aplicar disposiciones para organizar diagramas rápidamente

Los contenedores de disposición automática proporcionan el límite documentado que se necesita en este caso: durante la disposición de todo el diagrama, sus formas y conectores internos no se reorganizan, y cada contenedor se trata como una sola forma. Formas de disposición avanzada y contenedores de disposición

Resultado que buscas Opción adecuada para empezar Condición importante
Mantener los nodos dentro de un elemento principal y permitir reorganizarlos internamente Contenedor normal Establece la contención real antes de aplicar la disposición.
Reorganizar la página y conservar la disposición interna de cada contenedor Contenedor de disposición automática Ejecuta una disposición para todo el diagrama.
Organizar continuamente los nodos dentro de un límite visible Forma de disposición automática de la biblioteca Advanced Su propia disposición responde a las ediciones internas.
Mover juntos elementos con una disposición manual exacta Agrupar las formas y los conectores Está documentado que se pueden mover grupos; agrupar no garantiza que todas las disposiciones automáticas conserven las posiciones internas.

La tabla sirve como ayuda para decidir y se basa en las diferencias documentadas entre formas de contenedor, contenedores de disposición automática y grupos.

Crear un contenedor pequeño que se mantenga unido

Para crear un límite visible, empieza con una forma de disposición automática de flujo. Así no tendrás que confiar en que un rectángulo normal se comporte como un contenedor de disposición.

Crear el diagrama interno

  1. Abre tu diagrama en draw.io Desktop en tu Mac.
  2. Busca la biblioteca de formas Advanced en el panel izquierdo. Si no aparece, haz clic en More Shapes, selecciona la biblioteca de formas General y haz clic en Apply.
  3. Arrastra una forma de disposición de flujo horizontal o vertical al lienzo.
  4. Usa las formas iniciales para crear una cadena corta conectada, con las etiquetas A1, A2 y A3.
  5. Para ampliar la cadena, pasa el cursor sobre un nodo y haz clic en una flecha direccional para clonar y conectar otro nodo. Haz doble clic en su etiqueta para cambiarle el nombre.

En los contenedores de disposición de flujo, cada flecha direccional crea una forma conectada al nodo sobre el que pasaste el cursor; la disposición determina su ubicación. Los contenedores de árbol tienen reglas distintas para los nodos hermanos y secundarios. Las formas de disposición automática también ajustan el tamaño del contenedor a su contenido. Estos pasos siguen la guía oficial de formas de disposición automática.

Crea una segunda forma de disposición automática de flujo con los nodos B1, B2 y B3. Estas etiquetas son ilustrativas; no es obligatorio seguir esta convención para nombrarlos. Dos contenedores facilitan distinguir entre mover un contenedor completo y reorganizar sus elementos secundarios.

Deja al menos un elemento dentro de cada contenedor de disposición mientras editas. La documentación advierte que al eliminar el último elemento contenido también se elimina el contenedor de disposición. Al reconstruir una sección existente, conserva un elemento inicial hasta que hayas añadido el contenido de reemplazo. Formas de disposición avanzada y contenedores de disposición

Elegir un límite visible o transparente

Las formas de disposición Advanced tienen un carril que las rodea y permite conectar con su límite y desde él. Los contenedores creados mediante Arrange > Insert > Layout tienen un límite transparente; los conectores deben unirse a las formas internas. Elige según si el diagrama externo debe conectarse al contenedor en sí o a un nodo concreto. Formas de disposición avanzada y contenedores de disposición

Como alternativa transparente, elige Arrange > Insert > Layout y selecciona una disposición. Crea el diagrama interno arrastrando formas hasta las flechas direccionales de un nodo. El control con flechas cruzadas de la esquina superior izquierda mueve el contenedor de disposición. Insertar una disposición automática

Aplicar la disposición externa sin cambiar las disposiciones internas

Antes de ejecutar la disposición externa, termina de organizar el contenido de cada contenedor y añade las conexiones que expresan la relación entre las secciones del diagrama. Por ejemplo, conecta el límite visible de Container A con el límite visible de Container B si la relación corresponde a las dos secciones en conjunto.

A continuación, sigue estos pasos:

  1. Haz clic en una zona vacía del lienzo para quitar la selección.
  2. Abre Arrange > Layout.
  3. Elige un ajuste preestablecido adecuado, como Horizontal Flow para una relación de izquierda a derecha.
  4. Revisa las opciones de espaciado y haz clic en Apply.
  5. Inspecciona tanto las posiciones de los contenedores como los nodos que hay dentro.

Un flujo horizontal organiza las formas de izquierda a derecha, según indican los conectores. Node Spacing controla la separación dentro de una fila o columna, mientras que Rank Spacing controla la separación entre filas o columnas consecutivas. Aumenta el espaciado pertinente si las etiquetas o conexiones necesitan más espacio. Disposiciones de flujo

Quitar la selección es importante. Si solo se seleccionan contenedores de disposición, Arrange > Layout reemplaza sus disposiciones internas activas en vez de reorganizar la página. Para ajustar deliberadamente las opciones de un contenedor existente, selecciónalo y elige Arrange > Layout > Edit Layout. Aplicar disposiciones para reorganizar un diagrama

Usa el ejemplo sintético como criterio de aceptación: A1, A2 y A3 deberían conservar su disposición interna al aplicar la disposición externa, al igual que los tres nodos B. Sus contenedores principales sí pueden moverse. Esta comprobación se basa en el tratamiento documentado de los contenedores de disposición como una sola forma; no informa de una prueba de escritorio realizada aquí. Formas de disposición avanzada y contenedores de disposición

Diagnosticar los cambios antes de ajustar más opciones

Los elementos secundarios se reorganizan dentro del contenedor

Comprueba primero el tipo de contenedor y la selección. Un contenedor normal permite reorganizar su contenido. Si seleccionas un contenedor de disposición automática, el comando de disposición puede reemplazar su disposición activa. Identifica qué operación ocurrió antes de cambiar el espaciado o reconstruir el diagrama. Aplicar disposiciones para organizar diagramas rápidamente, Aplicar disposiciones para reorganizar un diagrama

El contenedor aumenta o reduce su tamaño

Un cambio de tamaño no significa necesariamente que haya fallado la contención. La documentación general de disposición indica que los contenedores cambian de tamaño para ajustarse a su contenido reorganizado, incluso cuando Resize Nodes está desactivado. Esa opción controla el cambio de tamaño de los nodos individuales; no garantiza que el límite del contenedor mantenga un tamaño fijo. Aplicar disposiciones para organizar diagramas rápidamente

Al cambiar el tamaño del límite, los elementos secundarios se estiran

Para cambiar manualmente el tamaño de un grupo, selecciónalo y desactiva Resize Children en Style > Properties. La opción de estilo equivalente documentada es recursiveResize=0, aplicada al grupo. Esto controla el cambio de tamaño proporcional; la documentación no la describe como una opción para conservar las posiciones durante la disposición automática. Desactivar el cambio de tamaño de elementos secundarios para cambiar individualmente el tamaño de las formas agrupadas

Necesitas una disposición manual exacta

Si la geometría colocada a mano de una sección debe permanecer exacta, selecciona sus formas y conectores internos, y luego usa Arrange > Group o Cmd+G. Al arrastrar el grupo resultante, sus elementos se mueven juntos. Este método permite moverlos manualmente; la documentación sobre grupos no garantiza que se congelen universalmente durante la disposición automática de grupos arbitrarios. Agrupar y desagrupar formas y conectores

Una disposición produce un resultado inadecuado

Pulsa Cmd+Z para deshacerla antes de probar otro ajuste preestablecido. La guía oficial advierte que las disposiciones utilizan el estado actual del diagrama, por lo que aplicar varias disposiciones seguidas no reproduce siempre la misma estructura. Volver a la misma disposición inicial facilita comparar los resultados. Aplicar disposiciones para reorganizar un diagrama

Para esta tarea, decide explícitamente dos cosas: qué disposición organiza los nodos dentro de cada contenedor y cuál organiza la página. Los contenedores de disposición automática establecen la separación documentada entre esas operaciones. Primero crea las secciones internas, quita la selección, aplica la disposición externa e inspecciona el resultado antes de continuar.

Fuentes