Estoy usando Mermaid para crear un diagrama de flujo con subgráficos.
Esto funciona bien, excepto que el diseño funciona de manera diferente a lo que esperaba.
Con un diseño LR , los subgráficos se disponen de arriba hacia abajo, al igual que los nodos dentro de cada subgráfico:
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <div class="mermaid"> flowchart LR subgraph Subgraph One A -->B -->C end subgraph Subgraph Two D -->E -->F end subgraph Subgraph Three X -->Y -->Z end </div> Pero si uso un diseño TD , los subgráficos se distribuyen de izquierda a derecha, pero los nodos dentro de cada subgráfico están de arriba hacia abajo.
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <div class="mermaid"> flowchart TD subgraph Subgraph One A -->B -->C end subgraph Subgraph Two D -->E -->F end subgraph Subgraph Three X -->Y -->Z end </div>Esto me sorprende: esperaría que los subgráficos se dispusieran en la dirección que especifiqué (ya sea de arriba hacia abajo o de izquierda a derecha). O al menos, esperaría que fueran ortogonales al diseño, por ejemplo, los subgráficos son de izquierda a derecha con nodos que están de arriba hacia abajo, o viceversa.
Y en ambos casos, los subgráficos se muestran en el orden opuesto al que esperaría, con el último subgráfico mostrándose primero.
Y con gráficos más complejos, en realidad estoy viendo una combinación de diseños de arriba hacia abajo y de izquierda a derecha, sin importar qué diseño especifique.
¿Cómo puedo usar Mermaid para crear un gráfico con subgráficos dispuestos de izquierda a derecha, pero cuyos nodos están de arriba hacia abajo, en el orden en que los especifiqué?
Esto me sorprende: esperaría que los subgráficos se dispusieran en la dirección que especifiqué (ya sea de arriba hacia abajo o de izquierda a derecha). O al menos, esperaría que fueran ortogonales al diseño, por ejemplo, los subgráficos son de izquierda a derecha con nodos que están de arriba hacia abajo, o viceversa.
No creo que se especifique el comportamiento, pero puede especificar explícitamente la dirección en los subgráficos :
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <div class="mermaid"> flowchart TD subgraph Subgraph One direction LR %% <-- here A -->B -->C end subgraph Subgraph Two direction LR %% <-- here D -->E -->F end </div>Y en ambos casos, los subgráficos se muestran en el orden opuesto al que esperaría, con el último subgráfico mostrándose primero.
Podría intentar ordenar sus subgráficos al revés, pero no creo que Mermaid garantice cómo los distribuirá. Esto podría mostrarse como desee hoy y cambiar mañana con una nueva versión del software.
El objetivo de Mermaid, al final del día, es conectar los nodos a través de los bordes. Obedece a algunas sugerencias, pero si desea un control totalmente arbitrario del diseño, es posible que desee elegir una herramienta diferente.
Si está familiarizado con (La)TeX, Mermaid funciona de manera similar: le permite concentrarse en el contenido al renunciar al control detallado sobre cómo se representan exactamente las cosas. Hay otras herramientas que te dan control total sobre el diseño, pero eso también significa que tienes toda la responsabilidad.