How to separate picture and label of a node with GraphViz? - graphviz

Question

I am trying to display a graph with images and labels with GraphViz. I would like to display the label under the image (see labelloc="b" option on the graph) but somehow it doesn't not work. Label and image are overlapped.
Any idea what I am missing?
Below is the DOT code I am using, and the current result.
Thanks!
digraph {
graph [compound=true, labelloc="b"];
node [shape=box];
edge [dir=none];
Label1[label="Label1",image="images/Avatar1.png"];
Label2[label="Label2",image="images/Avatar2.png"];
Label3[label="Label3",image="images/Avatar3.png"];
{
rank=same;
Label1 -> h0 -> Label2;
h0[shape=circle,label="",height=0.01,width=0.01];
}
{
h0_0;
h0_0[shape=circle,label="",height=0.01,width=0.01];
}
h0 -> h0_0;
h0_0 -> Label3;
}

Answer 1

UPD: You need just to add an imagepos attribute to your solution with height:
digraph {
graph [compound=true, labelloc="b"];
node [shape=box];
edge [dir=none];
Label1[
label="Label1"
height="2.1"
imagepos="tc"
labelloc="b"
image="images/Avatar1.png"
];
Label2[
label="Label2"
height="2.1"
imagepos="tc"
labelloc="b"
image="images/Avatar2.png"
];
Label3[
label="Label3"
height="2.1"
imagepos="tc"
labelloc="b"
image="images/Avatar3.png"
];
{
rank=same;
Label1 -> h0 -> Label2;
h0[shape=circle,label="",height=0.01,width=0.01];
}
{
h0_0;
h0_0[shape=circle,label="",height=0.01,width=0.01];
}
h0 -> h0_0;
h0_0 -> Label3;
}
Result:
Or you may also use HTML-like labels, and specifically, tables:
digraph {
graph [compound=true, labelloc="b"];
node [shape=box];
edge [dir=none];
Label1 [
shape=plain
label=<
<table cellspacing="0" border="0" cellborder="1">
<tr><td><img src="images/Avatar1.png" /></td></tr>
<tr><td>Label1</td></tr>
</table>
>
];
Label2 [
shape=plain
label=<
<table cellspacing="0" border="0" cellborder="1">
<tr><td><img src="images/Avatar2.png" /></td></tr>
<tr><td>Label2</td></tr>
</table>
>
];
Label3 [
shape=plain
label=<
<table cellspacing="0" border="0" cellborder="1">
<tr><td><img src="images/Avatar3.png" /></td></tr>
<tr><td>Label3</td></tr>
</table>
>
];
{
rank=same;
Label1 -> h0 -> Label2;
h0[shape=circle,label="",height=0.01,width=0.01];
}
{
h0_0;
h0_0[shape=circle,label="",height=0.01,width=0.01];
}
h0 -> h0_0;
h0_0 -> Label3;
}
The code is a bit more complex (at first glance), but as a bonus you get more flexible control over the borders.
Result:

Answer 2

By specifying a "height" (warning, those are "inches") for the nodes, I get the "labelloc" to work and I can thus move the label out of the picture. I would prefer if the box didn't have that white place at the top, but it's better than before.