Node showing outside of group

Hi,
I am creating two group with fixed height and width but node inside group is not auto adjust with in group it is showing out of box, even it is having lots of space in group. I tried to set property stretch: go.GraphObject.Fill of Group , but it is not working. Following is the screen shot of the same:

Following is the code :
function init() {
var = go.GraphObject.make; myDiagram = (go.Diagram, “myDiagramDiv”,
{
initialContentAlignment: go.Spot.TopCenter,
contentAlignment: go.Spot.TopCenter,
autoScale: go.Diagram.Uniform,
“undoManager.isEnabled”: true
});

    myDiagram.nodeTemplate =
        $(go.Node, "Auto",
            $(go.Shape, "RoundedRectangle",
                new go.Binding("fill", "BackColor"),
                new go.Binding("stroke", "Stroke"),
                new go.Binding("figure", "Figure")
            ),
            $(go.TextBlock,
                new go.Binding("text", "Text"),
                new go.Binding("stroke", "ForeColor"),
                new go.Binding("font", "Font"),
                new go.Binding("margin", "Margin")
            ),
            $(go.Picture,
                new go.Binding("source", "Image")
            )
        );

   

    myDiagram.groupTemplate =
        $(go.Group, "Auto", {
            layout: $(go.TreeLayout,
                {
                    angle: 90,
                    arrangement: go.TreeLayout.ArrangementVertical,
                    alignment: go.TreeLayout.AlignmentBus
                }),
            resizeObjectName: "BODY",
            alignment: go.Spot.TopCenter,
            isSubGraphExpanded: true,
            resizable: false,
            ungroupable: true,
            stretch: go.GraphObject.Fill,
            desiredSize: new go.Size(700, 700),
            avoidable: false
        }
            ,
      $(go.Shape, {           
          alignment: go.Spot.TopCenter
      },
                     new go.Binding("fill", "GroupBackColor"),
                     new go.Binding("figure", "GroupFigure"),
                     new go.Binding("stroke", "GroupStroke")
    ),
      $(go.Panel, "Table",
          {
              name: "BODY",
              alignment: go.Spot.TopCenter,
              padding: 10,
              stretch: go.GraphObject.Fill,
          },
      $(go.TextBlock,
        {
            row: 0,
            stretch: go.GraphObject.Horizontal,
             textAlign: "center",
            editable: true,
            alignment:go.Spot.TopCenter

        },
         new go.Binding("text", "GroupText"),
                     new go.Binding("font", "GroupFont"),
                     new go.Binding("margin", "GroupMargin"),
                     new go.Binding("stroke", "GroupForeColor")
        ),
        $(go.Placeholder, {
             margin: go.Margin.parse("0 20 20 20"),
            alignment: go.Spot.TopCenter,
            row: 1,
            stretch: go.GraphObject.Fill,
        }, new go.Binding("row", "NodeRow")
        )
    )
  );
   
    myDiagram.linkTemplate =
        $(go.Link,
            {
                routing: go.Link.AvoidsNodes
            },
            $(go.Shape,
                new go.Binding("strokeWidth", "StrokeWidth"),
                new go.Binding("stroke", "LinkColor")
            ),
            $(go.Shape,
                {
                    stroke: null
                },
                new go.Binding("visible", "ToVisible"),
                new go.Binding("toArrow", "ToArrow"),
                new go.Binding("fill","ToArrowColor")
            ),
             $(go.Shape,
                 {
                    stroke: null
                },
                new go.Binding("visible","FromVisible"),
                new go.Binding("fromArrow", "FromArrow"),
                new go.Binding("fill","FromArrowColor")
            )
        );
    load();
}

function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);

    // make sure all data have up-to-date "members" collections
    // this does not prevent any "cycles" of membership, which would result in undefined behavior
    var arr = myDiagram.model.nodeDataArray;
    for (var i = 0; i < arr.length; i++) {
        var data = arr[i];
        var supers = data.supers;
        if (supers) {
            for (var j = 0; j < supers.length; j++) {
                var sdata = myDiagram.model.findNodeDataForKey(supers[j]);
                if (sdata) {
                    // update _supers to be an Array of references to node data
                    if (!data._supers) {
                        data._supers = [sdata];
                    } else {
                        data._supers.push(sdata);
                    }
                    // update _members to be an Array of references to node data
                    if (!sdata._members) {
                        sdata._members = [data];
                    } else {
                        sdata._members.push(data);
                    }
                }
            }
        }
    }
}

Model:

{
    "class": "go.GraphLinksModel",
    "nodeDataArray": [
        {
            "key": "FirstGroup",
            "Text": null,
            "isGroup": true,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "N/A",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": "#E3EFD9",
            "GroupForeColor": "#3A542D",
            "GroupStroke": "#748A63",
            "GroupText": "First Group Title",
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroup",
            "Text": null,
            "isGroup": true,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "N/A",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": "#CBFEFF",
            "GroupForeColor": "#3A542D",
            "GroupStroke": "#ABCBCC",
            "GroupText": "Second Group Title",
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "FirstGroupTools",
            "Text": null,
            "isGroup": false,
            "Image": "../images/deliveryTools.jpg",
            "BackColor": "#E3EFD9",
            "Stroke": "#E3EFD9",
            "group": "FirstGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "FirstGroupGatewayManager",
            "Text": "Gateway Manager",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "FirstGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "FirstGroupmyCORECategory ",
            "Text": "CORE Category ",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "FirstGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "FirstGroupAiOpsApps",
            "Text": "AiOps Apps",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "FirstGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "FirstGroupSystemsIntegration-Waterfall",
            "Text": "Systems Integration - Waterfall",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "FirstGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "FirstGroupSystemsIntegration-Agile",
            "Text": "Systems Integration - Agile",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "FirstGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupTools",
            "Text": null,
            "isGroup": false,
            "Image": "../images/deliveryTools.jpg",
            "BackColor": "#CBFEFF",
            "Stroke": "#CBFEFF",
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupGatewayManager",
            "Text": "Gateway Manager",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupmyCORECategory ",
            "Text": "CORE Category ",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupAiOpsApps",
            "Text": "AiOps Apps",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupApplicationManagement(AM/AO)",
            "Text": "Application Management (AM/AO)",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupDevOps",
            "Text": "DevOps",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupATRConnectors",
            "Text": "ATR Connectors",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupRPA|BOTS|AutomationScript",
            "Text": "RPA | BOTS | AutomationScript",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupTargetSystem",
            "Text": null,
            "isGroup": false,
            "Image": "../images/targetSystem.jpg",
            "BackColor": "#CBFEFF",
            "Stroke": "#CBFEFF",
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupSplunkForwarders",
            "Text": "Splunk Forwarders",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        },
        {
            "key": "SecondGroupToolGateway",
            "Text": "Tool Gateway",
            "isGroup": false,
            "Image": null,
            "BackColor": "#6FAD4A",
            "Stroke": null,
            "group": "SecondGroup",
            "ForeColor": "White",
            "Figure": null,
            "Font": "bold 16pt Calibri",
            "Margin": 8,
            "GroupFigure": null,
            "GroupBackColor": null,
            "GroupForeColor": "#3A542D",
            "GroupStroke": null,
            "GroupText": null,
            "GroupFont": "bold 20pt Arial",
            "GroupMargin": 10,
            "GroupMaxSize": null,
            "GroupStrokeWidth": 2
        }
    ],
    "linkDataArray": [
        {
            "from": "FirstGroupTools",
            "to": "FirstGroupGatewayManager",
            "ToVisible": false,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "FirstGroupGatewayManager",
            "to": "FirstGroupmyCORECategory ",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "FirstGroupGatewayManager",
            "to": "FirstGroupmyCORECategory ",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "FirstGroupmyCORECategory ",
            "to": "FirstGroupAiOpsApps",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "FirstGroupmyCORECategory ",
            "to": "FirstGroupSystemsIntegration-Waterfall",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "FirstGroupmyCORECategory ",
            "to": "FirstGroupSystemsIntegration-Agile",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupTools",
            "to": "SecondGroupGatewayManager",
            "ToVisible": false,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupGatewayManager",
            "to": "SecondGroupmyCORECategory ",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupGatewayManager",
            "to": "SecondGroupmyCORECategory ",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupmyCORECategory ",
            "to": "SecondGroupAiOpsApps",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupmyCORECategory ",
            "to": "SecondGroupApplicationManagement(AM/AO)",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupmyCORECategory ",
            "to": "SecondGroupDevOps",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupTools",
            "to": "SecondGroupATRConnectors",
            "ToVisible": false,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupATRConnectors",
            "to": "SecondGroupmyCORECategory ",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupATRConnectors",
            "to": "SecondGroupRPA|BOTS|AutomationScript",
            "ToVisible": false,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupTools",
            "to": "SecondGroupRPA|BOTS|AutomationScript",
            "ToVisible": false,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupRPA|BOTS|AutomationScript",
            "to": "SecondGroupTargetSystem",
            "ToVisible": true,
            "FromVisible": false,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupAiOpsApps",
            "to": "SecondGroupSplunkForwarders",
            "ToVisible": false,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupSplunkForwarders",
            "to": "SecondGroupTargetSystem",
            "ToVisible": true,
            "FromVisible": false,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupATRConnectors",
            "to": "SecondGroupDevOps",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupTools",
            "to": "SecondGroupToolGateway",
            "ToVisible": false,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "SecondGroupToolGateway",
            "to": "SecondGroupGatewayManager",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        },
        {
            "from": "FirstGroupGatewayManager",
            "to": "SecondGroupGatewayManager",
            "ToVisible": true,
            "FromVisible": true,
            "StrokeWidth": 1.5,
            "LinkColor": "gray",
            "ToArrow": "Triangle",
            "ToArrowColor": "gray",
            "FromArrow": "BackwardTriangle",
            "FromArrowColor": "gray"
        }
    ]
}

What you have provided is the model, which has only a tiny relationship with the diagram. In order to control the appearance and behavior of everything in your diagram you need to modify the properties of the diagram, including all of the templates that you want to use. So to help you we need to know what your Group template is. Have you set Group.layout in order to control how the group arranges its member nodes and links?

Hi walter,

Following are the properties defined of group:
myDiagram.groupTemplate =
(go.Group, "Auto", { layout: (go.TreeLayout,
{
angle: 90,
arrangement: go.TreeLayout.ArrangementVertical,
alignment: go.TreeLayout.AlignmentBus
}),
resizeObjectName: “BODY”,
alignment: go.Spot.TopCenter,
isSubGraphExpanded: true,
resizable: false,
ungroupable: true,
stretch: go.GraphObject.Fill,
desiredSize: new go.Size(700, 700),
avoidable: false
}

I already provided all the code in first post,please review it

So you have set the desiredSize of esch Group to be 700x700. Yet there are no limits on the width of the TreeLayout. You could try setting TreeLayout.breadthLimit. TreeLayout | GoJS API However that does not guarantee that the TreeLayout will be able to fit all of the Nodes and Links into that width, much less also fitting everything into a height of 700 as well. If there are too many nodes, or too big nodes, or too much space between the nodes or the layers, it might not be possible to fit. Are you sure you want to specify a fixed desiredSize? Why not set minSize instead?

Thanks for your response.

we have predefined nodes and that can adjust into 700x700. but yes we can fixed width only and height can grow dynamically.
To achieve it I tried to set minSize to 700xNaN and set TreeLayout.breadthLimit to 3 but it gives me one node per row, but actually I want 3 nodes per row then rest children node break in new row. it was also not able to achieve.
one more query, I am not able to align node in TopCenter of group, i set the alignment: go.Spot.TopCenter of group but once children node increases then parent node moving left side. but it should stay in center.
Please help here.

The TreeLayout.breadthLimit is a number in document coordinates, not a number of nodes in a layer. Try setting it to 700.

Thanks walter, its working after giving 700 to breadthLimit.