graphvizdot

How to overlap 2 nodes on exactly the same location?

I have the following graphviz code:

digraph G {

  x [label = "X", shape = cylinder, width = 1, height = 1, style = filled, fillcolor = lightblue]
    
}

which produces:

enter image description here

Now, I want to make another cylinder node on exactly the same location and I want its height to be a bit longer than the other one. The difference should have the red colour. For example, something like this (just a manual attempt to roughly show what i mean):

enter image description here

How can I achieve this?

My attempt:

digraph G {
  node [shape=cylinder, width=1, style=filled];
  
  // Node 1
  x [label="X", height=1, color=lightblue, pos="0,0!"];
  
  // Node 2 (overlapping with Node 1)
  y [label="Y", height=2, color=red, pos="0,0!"];

  // Invisible edge to make the nodes overlap
  edge [style=invis];
  y -> x;
}

which produces:

enter image description here

Solution

  • neato can do what you want, but you have to adjust the pos values to overlap correctly (pos sets the center of the node)

    use this command: neato -Tpng myfile.gv >myfile.png

    digraph G {
  layout=neato // added for javascript use

  node [shape=cylinder, width=1, style=filled];

  // Node 2 (overlapping with Node 1)
  y [label="", height=2, color=red pos="2,2!" ]  

  // Node 1  (smaller on top)
  x [label="X", height=1, color=lightblue, pos="2,1.5!"];
}

    Giving:
    enter image description here