Group graph inner side of node , I will try poollayout with group

I want this graph and I using poollayout and lane template
but as this staircase type link not achievable and group width and nodes dynamic means many much nodes come so group width also increase

Are you saying that you do not want the layout that you are getting now and that you are showing in your screenshot? If so, could you please show us the layout that you want, in a screenshot (via manually moving the nodes where you want them to be)?


  <!DOCTYPE html>
  <html lang="en">
  <body>
  <!-- <script src="https://unpkg.com/[email protected]/release/go.js"></script> -->
  <script src="https://unpkg.com/[email protected]"></script>      

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Lora&amp;display=swap" rel="stylesheet">
<script id="code">
  let myDiagram;
  function init() {

    const $ = go.GraphObject.make;

  myDiagram = new go.Diagram('myDiagramDiv', {
      allowDrop: false,
      //isReadOnly:true,
      //movable: false,
    //   alignDocument:go.Spot.LeftCenter,
    //   contentAlignment:go.Spot.LeftCenter,
    initialContentAlignment:go.Spot.LeftCenter,
      padding: 10,
      //layout: $(PoolLayout),
      layout: $(go.GridLayout, {
        wrappingColumn: 1,
        wrappingWidth:Infinity,
        alignment: go.GridLayout.Position,
        cellSize: new go.Size(1, 1),
        spacing: new go.Size(0, 0),
        isOngoing: false,
        isRealtime: true
      }),
      'undoManager.isEnabled': false,
    });

  myDiagram.nodeTemplate = $(go.Node, "Auto",
      {
        selectionAdorned:false,
        movable: true,
        selectionChanged: (part) => {
          console.log(part)
        }
      },
      new go.Binding('location', 'loc', go.Point.parse),
      go.Panel.Horizontal,
      { 
        portId: '', 
        // fromLinkable: true, 
        // toLinkable: true,
        fromSpot: go.Spot.RightCenter,  // coming out from right side
        toSpot: go.Spot.LeftCenter,   // g
        click:(e, node) =>{
          //this.showHideNode(node)
          console.log('ddd', e, node)
        }
      },
      $(go.Panel,
        go.Panel.Auto,
        {
          // click:(e, node) =>{
          //   console.log('ddd', e, node)
          // }
        },
        $(go.Shape, 'RoundedRectangle',
          { 
            fill: 'white', 
            minSize: new go.Size(120, 100), 
            desiredSize: new go.Size(120, 100), 
            strokeWidth: 1,
            //stretch: go.GraphObject.Horizontal,
          },
          { cursor: 'pointer' }, // indicate that linking may start here
          new go.Binding('stroke', 'color'),
          new go.Binding("strokeWidth", "isSelected", s => s ? 2 : 1).ofObject(),
          new go.Binding("strokeWidth", "isMain", isMain => isMain == true ? 0 : 1).ofObject(),
          //new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
          
        ),
        $(go.Panel,
          'Horizontal',
          
          $(go.TextBlock,
            { margin: 2, stroke:'#4c525e', cursor: 'pointer',verticalAlignment: go.Spot.Center, isMultiline:true, textAlign:'left'},
            { fromLinkable: false, toLinkable: false }, // don't start drawing a link from the text
            new go.Binding('text', 'text'),
            new go.Binding('stroke', 'color')
          ),
          
        ),
      ),
    );
  myDiagram.groupTemplate = $(go.Group,
      'Auto',
      {
        movable: false,
        minSize:new go.Size(1000, 300),
        selectionAdorned:false,
        isSubGraphExpanded: true,
        "subGraphExpandedChanged":(grp) =>{
          console.log('obj', grp.isSubGraphExpanded)
          if(!grp.isSubGraphExpanded){
            console.log('grp.isSubGraphExpanded')
            //this.removeAllLinks()
          }
        },
      },
      new go.Binding('text', 'text'),

      $(go.Shape, 'Rectangle', { fill: null, stroke: 'red', height:300, strokeWidth: 1 }),
      $(go.Panel,
        'Auto',
        // create a placeholder to represent the area where the contents of the group are
        $(go.Placeholder, { padding: 10, alignment: go.Spot.Left})
      ) // end Vertical Panel
    );

      

  myDiagram.linkTemplate = $(go.Link, 
      { 
        // relinkableFrom: true, 
        // relinkableTo: true,
        routing:go.Link.AvoidsNodes,
        curve: go.Link.Orthogonal,  // Bezier curve
       
      }, 
      $(go.Shape), $(go.Shape, { toArrow: 'Standard' })
    );

   const jsonData =  { 
    "class": "GraphLinksModel",
    "nodeDataArray": [
    {
        "key": "",
        "text": "",
        "category": "Lane",
        "isGroup": true
    },
    {
        "key": "Benefits Partner",
        "text": "Benefits Partner",
        "category": "Lane",
        "isGroup": true
    },
    {
        "key": "Compensation Partner",
        "text": "Compensation Partner",
        "category": "Lane",
        "isGroup": true
    },
    {
        "key": "HR Partner",
        "text": "HR Partner",
        "category": "Lane",
        "isGroup": true
    },
    {
        "key": "Payroll Administrator",
        "text": "Payroll Administrator",
        "category": "Lane",
        "isGroup": true
    },
    {
        "key": "Manager",
        "text": "Manager",
        "category": "Lane",
        "isGroup": true
    },
    {
        "key": "Payroll Administrator UK",
        "text": "Payroll Administrator UK",
        "category": "Lane",
        "isGroup": true
    }
    ],
    "linkDataArray": [
        {
            "from": "start_node",
            "to": "Hire_a_0"
        },
        {
            "from": "Hire_a_0",
            "to": "Hire_a_2"
        },
        {
            "from": "Hire_a_2",
            "to": "Hire_a_3"
        },
        {
            "from": "Hire_a_3",
            "to": "Hire_a_4"
        },
        {
            "from": "Hire_a_4",
            "to": "end_node"
        },
        {
            "from": "Hire_a_3",
            "to": "Hire_a_5"
        },
        {
            "from": "Hire_a_5",
            "to": "Hire_a_4"
        },
    ]
  };


  myDiagram.model = go.Model.fromJson(jsonData);

  createNodeData()
  
  
}

const  dummyData = [
    {
        "key": "start_node",
        "text": "Start",
        "type": "start_node",
        "group":''
    },
    {
        "_id": "ebb502f3-3125-4bff-a49d-e0f78a5d9111",
        "key": "Hire_a_0",
        "text": "Hire",
        "type": "BusinessStep",
        "actionType": "Initiation",
        "group": "",
        "order": "a"
    },
    {
        "_id": "ebb502f3-3125-4bff-a49d-e0f78a5d9111",
        "key": "Hire_a_2",
        "text": "Hire-2",
        "type": "BusinessStep",
        "actionType": "Initiation",
        "group": "Benefits Partner",
        "order": "a"
    },
    {
        "_id": "ebb502f3-3125-4bff-a49d-e0f78a5d9111",
        "key": "Hire_a_3",
        "text": "Hire-3",
        "type": "BusinessStep",
        "actionType": "Initiation",
        "group": "Benefits Partner",
        "order": "a"
    },
    {
        "_id": "ebb502f3-3125-4bff-a49d-e0f78a5d9111",
        "key": "Hire_a_5",
        "text": "Hire-5",
        "type": "BusinessStep",
        "actionType": "Initiation",
        "group": "Benefits Partner",
        "order": "a"
    },
    {
        "_id": "ebb502f3-3125-4bff-a49d-e0f78a5d9111",
        "key": "Hire_a_4",
        "text": "Hire-4",
        "type": "BusinessStep",
        "actionType": "Initiation",
        "group": "Benefits Partner",
        "order": "a"
    },
    
    {
        "key": "end_node",
        "text": "End",
        "type": "end_node",
        "group":''
    },
];




window.addEventListener('DOMContentLoaded', init);

function createNodeData() {
    let nextLocation = 0;
    myDiagram.startTransaction('add node');
    if(myDiagram){
        dummyData.forEach((ele) => {
            ele.loc = `${this.nextLocation} 0`
            myDiagram.model.addNodeData(ele);
            nextLocation = nextLocation + 220;
        });
      }
      myDiagram.commitTransaction('stop');

  }
</script>

<div id="sample">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div id="myDiagramDiv" style="flex-grow: 1; height: 100vh; background-color: rgb(223, 235, 229); border: 1px solid black; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);"><canvas tabindex="0" width="1114" height="498" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 1114px; height: 498px;"></canvas><div style="position: absolute; overflow: auto; width: 1114px; height: 498px; z-index: 1;"><div style="position: absolute; width: 1px; height: 1px;"></div></div></div>
  </div>
  </body>
  </html>

but node not set at a position in group with equal groups width

I still don’t understand what you want. Might you want something like: Swim Lane Layout | GoJS but oriented in the other direction?

I suspect you don’t want to use a Placeholder in your Group.

Wait – didn’t you want to use some sort of Group.layout? Either a TableLayout or a LayeredDigraphLayout? Or maybe you want to set Group.layout to null in the lanes, so that a single layout can be responsible for laying out all of the Nodes and Links, as shown in that SwimLaneLayout, above.