This example intentionally sets **TreeLayout.nodeSpacing** to zero and **TreeLayout.layerSpacing** to 20, as reasonable minimum values, so that you can see the artificial spacing created by the override of **TreeLayout.assignTreeVertexValues**.

```
function init() {
const $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.TreeLayout,
{
nodeSpacing: 0, // to demonstrate making more room for a child inside a different group
layerSpacing: 20,
assignTreeVertexValues: function(v) {
if (this.angle !== 0) return;
const par = v.parent;
if (v.node) {
const group = v.node.containingGroup;
// increase height of vertex if the next sibling is in a different group
if (par) {
const arr = par.children;
const idx = arr.indexOf(v);
if (idx < arr.length-1) {
const sib = arr[idx+1];
if (sib.node && sib.node.containingGroup !== group) {
v.height += 20;
}
}
}
// increase width of vertex if there are any children in a different group
const children = v.children;
let diff = false;
for (let c of children) {
if (c.node && c.node.containingGroup !== group) {
diff = true;
break;
}
}
if (diff) v.width += 20;
}
}
})
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
//{ width: 100, height: 50 },
$(go.Shape,
{ fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8, editable: true },
new go.Binding("text").makeTwoWay())
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
{ layout: null },
$(go.Shape, { fill: "whitesmoke", stroke: "lightgray" }),
$(go.Placeholder, { padding: 10 })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 22, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen", group: -1 },
{ key: 33, text: "Gamma", color: "lightgreen", group: -1 },
{ key: 4, text: "Delta", color: "pink" },
{ key: 44, text: "Delta", color: "pink" },
{ key: 41, text: "Delta", color: "pink" },
{ key: 414, text: "Delta", color: "pink" },
{ key: 5, text: "Epsilon", color: "yellow", group: -2 },
{ key: 55, text: "Epsilon", color: "yellow", group: -3 },
{ key: 56, text: "Epsilon", color: "yellow", group: -3 },
{ key: 57, text: "Epsilon", color: "yellow", group: -3 },
{ key: -1, isGroup: true },
{ key: -2, isGroup: true },
{ key: -3, isGroup: true },
],
[
{ from: 1, to: 2 }, { from: 2, to: 22 },
{ from: 1, to: 3 }, { from: 3, to: 33 },
{ from: 1, to: 4 }, { from: 4, to: 44 },
{ from: 1, to: 41 }, { from: 41, to: 414 },
{ from: 1, to: 5 }, { from: 5, to: 55 }, { from: 5, to: 56 }, { from: 5, to: 57 },
]);
}
```