Diseño Automático
Diagrammix3 incluye una potente función de diseño automático que organiza automáticamente tu diagrama para una legibilidad óptima. Ofrece varios algoritmos de diseño — desde el diseño jerárquico predeterminado basado en Sugiyama hasta disposiciones en árbol, radial, circular, basada en fuerzas, orgánica y en cuadrícula — para que puedas elegir el que mejor se adapte a tu diagrama.
Cuándo Usar el Diseño Automático
El diseño automático es útil cuando:
- Has importado un diagrama desde Mermaid u otro formato
- Tu diagrama se ha desordenado después de muchas ediciones
- Quieres organizar rápidamente una gran cantidad de elementos
- Estás partiendo de un boceto y quieres un diseño limpio
Aplicar el Diseño Automático
El diseño automático se encuentra en el Inspector — no existe ningún menú Organizar ni botón de la barra de herramientas para esto.
- Abre el Inspector (barra lateral derecha) y selecciona la pestaña Organizar
- Despliega la sección Diseño
- Elige un algoritmo en el menú desplegable Diseño
- Ajusta las opciones del algoritmo si lo deseas (cambian según el algoritmo)
- Haz clic en el botón Diseño para organizar el diagrama
El botón Diseño organiza todo el diagrama activo (todas las figuras de la pestaña actual), por lo que no necesitas seleccionar nada primero. Presiona Cmd+Z para deshacer si no te gusta el resultado.
Algoritmos de Diseño
Elige en el menú desplegable Diseño el algoritmo que mejor se adapte a la forma de tus datos:
| Algoritmo | Ideal Para |
|---|---|
| Tradicional (predeterminado) | Diagramas de flujo, organigramas, grafos de dependencias — una jerarquía por capas basada en Sugiyama |
| Por Capas | Grafos dirigidos donde quieres control explícito sobre la dirección del flujo y el estilo de los conectores (estilo Dagre) |
| Árbol | Jerarquías estrictas padre → hijo |
| Radial | Jerarquías que irradian desde una raíz central |
| Circular | Nodos dispuestos en anillo; ideal para ciclos y redes entre iguales |
| Basado en Fuerzas | Espaciado orgánico, basado en física, para grafos generales |
| Orgánico | Diseños naturales y uniformemente distribuidos para grafos densos |
| Cuadrícula / Empaquetado | Disposiciones en cuadrícula ordenada o empaquetada de elementos débilmente relacionados |
Consejo: Prueba varios algoritmos sobre el mismo diagrama —
Cmd+Zdeshace cada resultado al instante, por lo que es fácil compararlos.
Opciones de Diseño
Las opciones que se muestran debajo del menú desplegable del algoritmo cambian según el algoritmo seleccionado. Las más útiles:
Dirección (Por Capas y Árbol)
Para los algoritmos Por Capas y Árbol, un selector de Dirección controla el flujo de la jerarquía:
| Dirección | Ideal Para |
|---|---|
| De arriba a abajo | Organigramas, diagramas de flujo |
| De abajo a arriba | Árboles de decisión |
| De izquierda a derecha | Flujos de proceso, líneas de tiempo |
| De derecha a izquierda | Diagramas RTL |
Espaciado
Los controles de espaciado tienen nombres específicos para cada algoritmo — por ejemplo:
- Por Capas: Espaciado de nodos (entre hermanos) y Espaciado de rangos (entre niveles)
- Árbol: espaciado de nivel, de hermanos y de subárbol
- Cuadrícula / Empaquetado: número de columnas más espaciado horizontal y vertical
- Circular / Radial: radio (o espaciado de nivel) y ángulo de inicio
Estilo de conector (Por Capas)
El algoritmo Por Capas también te permite elegir cómo se dibujan los conectores — Recto, Ortogonal (en ángulo recto) o Curvo — y afinar el enrutamiento ortogonal (margen de la figura, penalizaciones de segmento y de cruce).
Diseño de fuerzas en vivo (Basado en Fuerzas y Orgánico)
Para los algoritmos Basado en Fuerzas y Orgánico, un interruptor En vivo mantiene la simulación en marcha: arrastra un nodo y el diseño se reorganiza a su alrededor. Desactiva En vivo para conservar el resultado.
Curvas de diseño automático
La casilla Diseño automático afecta a los conectores, no a la posición de los nodos: cuando está activada, los conectores curvos recalculan automáticamente su forma a medida que mueves las figuras conectadas. Desactívala para tener control manual total sobre los manejadores de las curvas.
Consejo: La misma sección Diseño también tiene un botón Conectar figuras seleccionadas, que enlaza en secuencia las figuras seleccionadas — una forma rápida de construir un grafo antes de organizarlo.
El Algoritmo Tradicional (Sugiyama)
El algoritmo Tradicional predeterminado es una implementación completa del método Sugiyama (dibujo de grafos por capas), que:
- Asigna capas: Coloca los nodos en niveles jerárquicos según las conexiones
- Reduce cruces: Minimiza los cruces de aristas entre capas
- Posiciona nodos: Coloca los nodos para minimizar la longitud de las aristas
- Enruta aristas: Crea trazados limpios para los conectores
El algoritmo independiente Por Capas es un diseño por capas relacionado, de estilo Dagre, que añade controles explícitos de dirección y de estilo de conector. Ambos son ideales para:
- Diagramas de flujo
- Organigramas
- Grafos de dependencias
- Jerarquías de clases UML
- Máquinas de estados
Consejos para Mejores Resultados
Antes de Ejecutar el Diseño Automático
- Elimina conexiones innecesarias: Las aristas adicionales aumentan la complejidad
- Agrupa elementos relacionados: Los grupos se tratan como nodos individuales
- Considera la dirección: Para Por Capas y Árbol, piensa en qué dirección tiene sentido para tu diagrama
Después de Ejecutar el Diseño Automático
- Ajusta las posiciones: Modifica elementos individuales según sea necesario
- Revisa las etiquetas: Asegúrate de que las etiquetas sean legibles y no se superpongan
- Ajusta el espaciado: Aumenta el espaciado si los elementos se ven apretados y vuelve a hacer clic en Diseño
Limitaciones
- Solo el diagrama completo: El botón Diseño organiza toda la pestaña activa, no solo la selección actual
- Grafos cíclicos: Los diagramas con referencias circulares pueden no organizarse perfectamente
- Grafos densos: Los diagramas muy densos pueden seguir teniendo algunos cruces de aristas
- Posiciones personalizadas: Ejecutar un diseño sobrescribe cualquier posicionamiento manual
Deshacer
Si no te gusta el resultado, presiona Cmd+Z para deshacer el diseño y restaurar las posiciones anteriores.