Making a clustered graphviz graph look more tree-like

Question

I have the following Graphviz:

graph {
    node[width = 0.6, height = 0.6, fixedsize=true, shape=circle];
    nodesep = 0.5;
    a[label="22"];
    b[label="22"];
    c[label="34"];
    d[label="22"];
    e[label="99"];
    f[label="34"];
    g[label="40"];
    h[label="37"];
    i[label="22"];
    j[label="99"];
    k[label="135"];
    l[label="129"];
    m[label="40"];
    edge[penwidth=1.0]; //principal path edges
    a -- b;
    b -- d;
    c -- f;
    d -- i;
    e -- j;
    g -- m;
    edge[penwidth=1.0]; //other edges
    a -- c;
    b -- e;
    c -- g;
    d -- h;
    e -- k;
    g -- l;
}

This draws me a nice, tree-shaped graph:

Then, I wanted to change up a few things (in particular, 'drawing around' paths with matching values), so I did this, following this example:

graph {
    node[width = 0.6, height = 0.6, fixedsize=true, shape=circle];
    nodesep = 0.5;
    subgraph cluster_0 {
             style = rounded;
             a[label="22"];
             b[label="22"];
             d[label="22"];
             i[label="22"];
    }
    subgraph cluster_1 {
             style = rounded;            
             c[label="34"];
             f[shape=diamond, label="34"];
    }
    subgraph cluster_2 {
             style = rounded;
             e[label="99"];
             j[shape=diamond,label="99"]; 
    }
    subgraph cluster_3 {
             style = rounded;
             g[label="40"];
             m[shape=diamond, label="40"];
    }
    node[shape = diamond];
    h[shape=diamond, label="37"];
    k[label="135"];
    l[label="129"];
    edge[penwidth=1.0]; //principal path edges
    a -- b;
    b -- d;
    c -- f;
    d -- i;
    e -- j;
    g -- m;
    edge[penwidth=3.0]; //other edges
    a -- c;
    b -- e;
    c -- g;
    d -- h;
    e -- k;
    g -- l;
}

However, the end result has each cluster vertical, which doesn't look especially tree-like:

Is there a way to make the second graph look more like the first?

Answer 1

As I understand it, you need to keep the visible border around the cluster and double-sided branches, maybe even with the arrangement of nodes on a diagonal inside the cluster. In dot layout engine, you can make a diagonal of nodes using invisible nodes and edges, but if extra nodes are not desired, then try fdp or osage layout engines, since they keep the border around the cluster visible.

The osage engine is more for rectangular areas and not good for trees (screenshot), so I tried fdp. With K=.5 and start=5 attributes and by assigning explicit positions to nodes with pos I got something similar to a tree, I think if I tried changing this values, it might work better.
Script:

graph {
    layout=fdp
    K=.5
    start=5
    
    node[width = 0.6, height = 0.6, fixedsize=true, shape=circle];
    nodesep = .5;
    subgraph cluster_0 {
             style = rounded;
             a[label="22" pos="0,0!"];
             b[label="22" pos="-1,-1!"];
             d[label="22" pos="-2,-2!"];
             i[label="22" pos="-3,-3!"];
    }
    subgraph cluster_1 {
             style = rounded;            
             c[label="34" pos="1,-1!"];
             f[shape=diamond, label="34" pos="1,-2!"];
    }
    subgraph cluster_2 {
             style = rounded;
             e[label="99" pos="2,-2!"];
             j[shape=diamond,label="99" pos="2,-3!"]; 
    }
    subgraph cluster_3 {
             style = rounded;
             g[label="40" pos="3,-2!"];
             m[shape=diamond, label="40" pos="3,-3!"];
    }
    node[shape = diamond];
    h[shape=diamond, label="37"];
    k[label="135"];
    l[label="129"];
    edge[penwidth=1.0]; //principal path edges
    a -- b;
    b -- d;
    c -- f;
    d -- i;
    e -- j;
    g -- m;
    edge[penwidth=3.0]; //other edges
    a -- c;
    b -- e;
    c -- g;
    d -- h;
    e -- k;
    g -- l;
}

Result: