0

I am looking for a way to align individual nodes in graphviz with an entire subgraph/cluster.

I am currently teaching a small team of analysts to use rmarkdown and I want to allow them to include simple graphs and flowcharts in their documents. I therefore use DiagrammeR (and viz.js) to render charts written in dot. To increase user adoption, I want to minimize complexity and avoid HTML and use raw dot.

Our problem is that we frequently try to align nodes with subgraphs/clusters containing multiple nodes, but we cannot align the entire subgraph with the node. Alignment only works with the constituent nodes within the subgraph/cluster. (see nodes C,D,E and G,T below)

I have tried to create a record node using GT [shape = record label="{G | T}"] but that does not allow individual styling of the two nodes.

I have also tried creating an HTML record node which allows individual styling but increases complexity too much and requires users to know HTML.

Finally, I have tried to insert an invisible node inside the clusters to "simulate" the center and then use the invisible node for alignment. This unfortunately pushes G and T to far apart and doesn't achieve the intended effect.

digraph G {

  graph [splines = false, ranksep = 0.2]
  edge [style = "invis"]
  node [shape = box, width = 7.5]
  A B H 

  node [shape = circle, width = 1.5]

  subgraph cluster_2 {
    rank = same 
    C D E
  }

  subgraph cluster_1 { 
    G [shape = box]
    T [shape = box]
  }
  A -> B
  G -> T
  B -> {C D E G}
  {C D E T} -> H 

}

The following gives the output:

In the picture above, the subgraph containing G and T is not aligned with the subgraph containing C,D,E.

Is there a way to vertically align the centers of the two subgraphs?

Jonas
  • 95
  • 2
  • 2
  • 9

1 Answers1

2

The problem is that GraphViz only align node rows and {C D E} is one row where as {G->T} is two rows so {C D E} can only be align with either G or T

You can however align {C D E} with the space between G and T though that is probably not what you want. E.g. like this:

digraph G {

  graph [splines = false, ranksep = 0.2]
  //edge [style = "invis"]
  node [shape = box, width = 7.5]
  A B H 

  node [shape = circle, width = 1.5]

  subgraph cluster_2 {
    rank = same 
    C D E
  }

  subgraph cluster_1 { 
    G [shape = box]
    T [shape = box]
  }
  A -> B
  G -> T[minlen=2]
  B -> G
  B -> {C D E} -> H [minlen=2]
    T -> H
}

Resulting in:

enter image description here

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Jens
  • 2,327
  • 25
  • 34