Graphviz de arriba a abajo Y de izquierda a derecha

Posteriormente a mirar en diferentes repositorios y foros al terminar encontramos la resolución que te mostramos más adelante.

Solución:

Lo que describes parece ser lo que dot hace por defecto.

Por ejemplo, este gráfico:

digraph SO 
  a -> a1 -> a2
  b -> b1 -> b2
  c -> c1 -> c2
  d -> d1 -> d2
 

sale asi:

Si tiene un gráfico más complejo, puede forzar que los nodos estén a la misma altura usando rank=same. Por ejemplo:

digraph SO 
   rank = same
    a b c d
  

  a -> a1 -> a2 
  b -> b1 -> b2 -> b3 -> b4
  c -> c1 
  d -> d1 -> d2 -> d3
  d2 -> a2

sale asi:

Sin embargo, si quieres a, b, c y d para estar en un orden específico, creo que tendrá que usar bordes invisibles como sugirió. Él dot guía incluso recomienda esto:

Los pesos de borde también juegan un papel cuando los nodos están restringidos al mismo rango. Los bordes con peso distinto de cero entre estos nodos se apuntan a través del rango en la misma dirección (de izquierda a derecha o de arriba a abajo en un dibujo girado) en la medida de lo posible. Este hecho puede aprovecharse para ajustar el orden de los nodos colocando bordes invisibles (style="invis") donde sea necesario.

Puede probar mscgen (generador de gráficos de secuencia de mensajes)

Un diagrama simple sería ejemplo.msc

msc 

A,B;

--- [label="Start", ID="1"];

A->B [label="signal"];
A<-B [label="signal"];

$: mscgen -T png -o ejemplo.png -i ejemplo.msc.

Eso es lo que genera un buen diagrama de secuencia.

Gracias, Srikanth Kyatham

¡Donde hay voluntad hay un camino!

Este es un ejemplo de cómo hacerlo usando punto:

digraph SEQ_DIAGRAM 
    graph [overlap=true, splines=line, nodesep=1.0, ordering=out];
    edge [arrowhead=none];
    node [shape=none, width=0, height=0, label=""];

    
        rank=same;
        node[shape=rectangle, height=0.7, width=2];
        api_a[label="API A"];
        api_b[label="API B"];
        api_c[label="API C"];
    
    // Draw vertical lines
    
        edge [style=dashed, weight=6];
        api_a -> a1 -> a2 -> a3;
        a3 -> a4 [penwidth=5, style=solid];
        a4 -> a5;
    
    
        edge [style=dashed, weight=6];
        api_b -> b1 -> b2 -> b3 -> b4;
        b4 -> b5 [penwidth=5; style=solid];
    
    
        edge [style=dashed, weight=6];
        api_c -> c1;
        c1-> c2 [penwidth=5, style=solid];
        c2 -> c3 -> c4 -> c5;
    
    // Draws activations
     rank=same; a1 -> b1 [label="activate()"]; b1 -> c1 [arrowhead=normal]; 
     rank=same; a2 -> b2 [style=invis]; b2 -> c2 [label="refund()", arrowhead=normal, dir=back]; 
     rank=same; a3 -> b3 [arrowhead=normal, dir=back, label="place_order()"]; b3 -> c3; 
     rank=same; a4 -> b4 [label="distribute()", arrowhead=normal]; 
     rank=same; a5 -> b5 [style=invis]; b5 -> c5 [label="bill_order()", arrowhead=normal]; 

Después de renderizado, esto producirá esta imagen:

Hay algunos consejos importantes sobre cómo se logró esto:

• Cada componente tiene una lista de nodos que no tienen forma, altura ni ancho.
• Cada línea debe estar en el mismo rango, de lo contrario, el DOT las posicionará de acuerdo con su clasificación automática.
• Para enderezar las cosas, todas las direcciones son iguales: de a a b a c. Si invierte algunos de ellos, DOT hará un desastre. El truco para lograr la dirección correcta en la flecha es usar dir edge attribute.
• Peso attribute en los bordes es muy importante mantener rectas las líneas verticales. Deben superar en número al rango más grande. Si necesita crear un diagrama en el que un rango llegue hasta 100, su peso debe ser al menos 101 o será imposible tener una línea recta vertical discontinua.
• Para obtener una línea horizontal recta, debe conectar cada nodo en el mismo rango. De lo contrario, DOT doblará la línea. Por ejemplo, conectar a1 a c1 se logra conectando a1 a b1 y b1 a c1.

Sección de Reseñas y Valoraciones

Tienes la opción de defender nuestra investigación ejecutando un comentario y valorándolo te lo agradecemos.

---

---

Utiliza Nuestro Buscador