Arrange boxes horizontally and then vertically in a graph

Question

Is there a way that windows are displayed horizontally in some cases and vertically in others? (see related question ).

Here is the code and output that I get:

the code:

/** ** Diagram representing the Simulator Engine **/ digraph G { graph [ rankdir = "TB" ]; /** ** The simulator engine rectangle **/ subgraph cluster_simulator_engine { style=filled; color=lightgrey; node [style=filled,color=white]; label = "Simulator Engine"; /** ** The first topology **/ subgraph cluster_T1 { color=white; node [style=filled]; /** ** The n^th neuron **/ subgraph cluster_T1_N3 { color=lightgrey; node [style=filled]; label = "Neuron n"; /** ** The n^th synapse **/ "T1_N3_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T1_N3_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T1_N3_S1" [ style=filled shape=box color=white label="Synapse 1" ]; /*"T1_N1_S3" -> "T1_N1_S2" [style=invis];*/ } /** ** The second neuron **/ subgraph cluster_T1_N2 { color=lightgrey; node [style=filled]; label = "Neuron 2"; /** ** The n^th synapse **/ "T1_N2_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T1_N2_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T1_N2_S1" [ style=filled shape=box color=white label="Synapse 1" ]; /*"T1_N1_S3" -> "T1_N1_S2" [style=invis];*/ } /** ** The third neuron **/ subgraph cluster_T1_N1 { color=lightgrey; node [style=filled]; label = "Neuron 1"; /** ** The n^th synapse **/ "T1_N1_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T1_N1_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T1_N1_S1" [ style=filled shape=box color=white label="Synapse 1" ]; /*"T1_N1_S3" -> "T1_N1_S2" [style=invis];*/ } label = "Topology 1"; } /** ** The second topology **/ subgraph cluster_T2 { color=white; node [style=filled]; /** ** The n^th neuron **/ subgraph cluster_T2_N3 { color=lightgrey; node [style=filled]; label = "Neuron n"; /** ** The n^th synapse **/ "T2_N3_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T2_N3_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T2_N3_S1" [ style=filled shape=box color=white label="Synapse 1" ]; /*"T1_N1_S3" -> "T1_N1_S2" [style=invis];*/ } /** ** The second neuron **/ subgraph cluster_T2_N2 { color=lightgrey; node [style=filled]; label = "Neuron 2"; /** ** The n^th synapse **/ "T2_N2_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T2_N2_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T2_N2_S1" [ style=filled shape=box color=white label="Synapse 1" ]; /*"T1_N1_S3" -> "T1_N1_S2" [style=invis];*/ } /** ** The third neuron **/ subgraph cluster_T2_N1 { color=lightgrey; node [style=filled]; label = "Neuron 1"; /** ** The n^th synapse **/ "T2_N1_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T2_N1_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T2_N1_S1" [ style=filled shape=box color=white label="Synapse 1" ]; /*"T1_N1_S3" -> "T1_N1_S2" [style=invis];*/ } label = "Topology 2"; } } } 

Conclusion:

Obviously, this is too long. I want to move each synapse to its own line (I think it's called a “rank” in Graphviz jargon). There seems to be no way to do this, but there is a trick . So I take the same code above and entering invisible edges, e.g.

the code:

 /** ** Diagram representing the Simulator Engine **/ digraph G { graph [ rankdir = "TB" ]; /** ** The simulator engine rectangle **/ subgraph cluster_simulator_engine { style=filled; color=lightgrey; node [style=filled,color=white]; label = "Simulator Engine"; /** ** The first topology **/ subgraph cluster_T1 { color=white; node [style=filled]; /** ** The n^th neuron **/ subgraph cluster_T1_N3 { color=lightgrey; node [style=filled]; label = "Neuron n"; /** ** The n^th synapse **/ "T1_N3_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T1_N3_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T1_N3_S1" [ style=filled shape=box color=white label="Synapse 1" ]; "T1_N3_S1" -> "T1_N3_S2" [style=invis]; "T1_N3_S2" -> "T1_N3_S3" [style=invis]; } /** ** The second neuron **/ subgraph cluster_T1_N2 { color=lightgrey; node [style=filled]; label = "Neuron 2"; /** ** The n^th synapse **/ "T1_N2_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T1_N2_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T1_N2_S1" [ style=filled shape=box color=white label="Synapse 1" ]; "T1_N2_S2" -> "T1_N2_S3" [style=invis]; "T1_N2_S1" -> "T1_N2_S2" [style=invis]; } /** ** The third neuron **/ subgraph cluster_T1_N1 { color=lightgrey; node [style=filled]; label = "Neuron 1"; /** ** The n^th synapse **/ "T1_N1_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T1_N1_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T1_N1_S1" [ style=filled shape=box color=white label="Synapse 1" ]; "T1_N1_S1" -> "T1_N1_S2" [style=invis]; "T1_N1_S2" -> "T1_N1_S3" [style=invis]; } label = "Topology 1"; } /** ** The second topology **/ subgraph cluster_T2 { color=white; node [style=filled]; /** ** The n^th neuron **/ subgraph cluster_T2_N3 { color=lightgrey; node [style=filled]; label = "Neuron n"; /** ** The n^th synapse **/ "T2_N3_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T2_N3_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T2_N3_S1" [ style=filled shape=box color=white label="Synapse 1" ]; "T2_N3_S1" -> "T2_N3_S2" [style=invis]; "T2_N3_S2" -> "T2_N3_S3" [style=invis]; } /** ** The second neuron **/ subgraph cluster_T2_N2 { color=lightgrey; node [style=filled]; label = "Neuron 2"; /** ** The n^th synapse **/ "T2_N2_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T2_N2_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T2_N2_S1" [ style=filled shape=box color=white label="Synapse 1" ]; "T2_N2_S1" -> "T2_N2_S2" [style=invis]; "T2_N2_S2" -> "T2_N2_S3" [style=invis]; } /** ** The third neuron **/ subgraph cluster_T2_N1 { color=lightgrey; node [style=filled]; label = "Neuron 1"; /** ** The n^th synapse **/ "T2_N1_S3" [ style=filled shape=box color=white label="Synapse n" ]; /** ** The second synapse **/ "T2_N1_S2" [ style=filled shape=box color=white label="Synapse 2" ]; /** ** The first synapse **/ "T2_N1_S1" [ style=filled shape=box color=white label="Synapse 1" ]; "T2_N1_S1" -> "T2_N1_S2" [style=invis]; "T2_N1_S2" -> "T2_N1_S3" [style=invis]; } label = "Topology 2"; } } } 

and now the result looks more attractive.

exit:

But now there is a huge gap between the synapses. Setting nodesep=0.1 or len=0.1 not affected. Can someone tell me how to fix this, or how to reverse engineer it.

NOTE. If anyone is wondering why I switch from 1 to 2 to n, it is because I plan to put ellipses there, but I don’t know how to do it ... cross this bridge when I get to it.

Answer 1

It ranksep you are looking for - add this line to the attributes for the graph:

 ranksep = 0.1 

At points, this gives the desired division of the rank in inches. This is the minimum vertical distance between the bottom of nodes in one rank and the vertices of nodes in the next.