Links overlapped on nodes

Hi,
I am facing issue with overlapping of links on nodes below image is reference of gojs generated digaram
image
and i need the diagram to be like below image

My code

  this.diagram.initialContentAlignment = go.Spot.Center;

      this.diagram.nodeTemplate = this.myGoMaker(
         go.Node, "Vertical",
  
         this.myGoMaker(go.Picture,
            { maxSize: new go.Size(30, 30) },
            new go.Binding("source", "img")),
      
         this.myGoMaker(go.TextBlock, { text: "textAlign: 'center'", textAlign: "center", overflow: go.TextBlock.OverflowEllipsis, maxLines: 1, width: 150, margin: 8, isMultiline: false },
            new go.Binding("text", "name")),
         {
            toolTip:  // define a tooltip for each node that displays the color as text
               this.myGoMaker("ToolTip",
                  this.myGoMaker(go.TextBlock, { margin: 4 },
                     new go.Binding("text", "name"))
               )  // end of Adornment
         }
      );

      this.diagram.linkTemplate =
         this.myGoMaker(go.Link,
            { routing: go.Link.Orthogonal, corner: 10 },
            this.myGoMaker(go.Shape, { strokeWidth: 2 }),
            this.myGoMaker(go.Shape, { toArrow: "OpenTriangle" })
         );

      this.diagram.groupTemplate = this.myGoMaker(
         go.Group, "Auto",
         { // define the group's internal layout
            layout: this.myGoMaker(go.TreeLayout,
               { angle: 0, arrangement: go.TreeLayout.ArrangementVertical, isRealtime: true }),
            // the group begins unexpanded;
            // upon expansion, a Diagram Listener will generate contents for the group
            isSubGraphExpanded: true,
            // when a group is expanded, if it contains no parts, generate a subGraph inside of it
            subGraphExpandedChanged: function (group) {
               if (group.memberParts.count === 0) {
                  // randomGroup(group.data.key);
               }
            }
         },
         this.myGoMaker(go.Shape, "RoundedRectangle",
            { fill: null, stroke: "lightgray", strokeWidth: 2 }),
         this.myGoMaker(go.Panel, "Vertical",
            { defaultAlignment: go.Spot.Left, margin: 4 },
            this.myGoMaker(go.Panel, "Horizontal",
               { defaultAlignment: go.Spot.Top },
               // the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
               this.myGoMaker("SubGraphExpanderButton",
                  { alignment: go.Spot.Right, margin: 5, "ButtonIcon.stroke": "blue", }),
               this.myGoMaker(go.TextBlock,
                  { font: "Bold 14px Sans-Serif", margin: 4 },
                  new go.Binding("text", "name"))
            ),
            // create a placeholder to represent the area where the contents of the group are
            this.myGoMaker(go.Placeholder,
               { padding: new go.Margin(0, 10) })
         )  // end Vertical Panel
      );
this.diagram.model = new go.GraphLinksModel([
    {
        "key": 0,
        "name": "Published",
        "group": -1,
        "color": "white",
        "isGroup": true,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 491
    },
    {
        "key": 1,
        "name": "Source",
        "group": 0,
        "color": "white",
        "isGroup": true,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 492
    },
    {
        "key": 2,
        "name": "OE",
        "group": 1,
        "color": "white",
        "isGroup": true,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 493
    },
    {
        "key": 3,
        "name": "ACTION_TABLE",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 494
    },
    {
        "key": 4,
        "name": "CATEGORIES_TAB",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 495
    },
    {
        "key": 5,
        "name": "CUSTOMERS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 496
    },
    {
        "key": 6,
        "name": "INVENTORIES",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 497
    },
    {
        "key": 7,
        "name": "LINEITEM_TABLE",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 498
    },
    {
        "key": 8,
        "name": "ORDERS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 499
    },
    {
        "key": 9,
        "name": "ORDER_ITEMS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 500
    },
    {
        "key": 10,
        "name": "PRODUCT_DESCRIPTIONS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 501
    },
    {
        "key": 11,
        "name": "PRODUCT_INFORMATION",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 502
    },
    {
        "key": 12,
        "name": "PRODUCT_REF_LIST_NESTEDTAB",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 503
    },
    {
        "key": 13,
        "name": "PROMOTIONS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 504
    },
    {
        "key": 14,
        "name": "PURCHASEORDER",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 505
    },
    {
        "key": 15,
        "name": "SUBCATEGORY_REF_LIST_NESTEDTAB",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 506
    },
    {
        "key": 16,
        "name": "WAREHOUSES",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 507
    },
    {
        "key": 17,
        "name": "ACCOUNT_MANAGERS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 508
    },
    {
        "key": 18,
        "name": "BOMBAY_INVENTORY",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 509
    },
    {
        "key": 19,
        "name": "CUSTOMERS_VIEW",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 510
    },
    {
        "key": 20,
        "name": "OC_CORPORATE_CUSTOMERS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 511
    },
    {
        "key": 21,
        "name": "OC_CUSTOMERS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 512
    },
    {
        "key": 22,
        "name": "OC_INVENTORIES",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 513
    },
    {
        "key": 23,
        "name": "OC_ORDERS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 514
    },
    {
        "key": 24,
        "name": "OC_PRODUCT_INFORMATION",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 515
    },
    {
        "key": 25,
        "name": "ORDERS_VIEW",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 516
    },
    {
        "key": 26,
        "name": "PRODUCTS",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 517
    },
    {
        "key": 27,
        "name": "PRODUCT_PRICES",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 518
    },
    {
        "key": 28,
        "name": "SYDNEY_INVENTORY",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 519
    },
    {
        "key": 29,
        "name": "TORONTO_INVENTORY",
        "group": 2,
        "color": "white",
        "isGroup": false,
        "img": "assets/images/icons/Capture1.PNG",
        "__gohashid": 520
    }
], [
    {
        "from": 5,
        "to": 17,
        "__gohashid": 523
    },
    {
        "from": 5,
        "to": 20,
        "__gohashid": 524
    },
    {
        "from": 5,
        "to": 21,
        "__gohashid": 525
    },
    {
        "from": 5,
        "to": 19,
        "__gohashid": 526
    },
    {
        "from": 6,
        "to": 28,
        "__gohashid": 527
    },
    {
        "from": 6,
        "to": 22,
        "__gohashid": 528
    },
    {
        "from": 6,
        "to": 18,
        "__gohashid": 529
    },
    {
        "from": 6,
        "to": 29,
        "__gohashid": 530
    },
    {
        "from": 8,
        "to": 25,
        "__gohashid": 531
    },
    {
        "from": 8,
        "to": 20,
        "__gohashid": 532
    },
    {
        "from": 8,
        "to": 21,
        "__gohashid": 533
    },
    {
        "from": 8,
        "to": 23,
        "__gohashid": 534
    },
    {
        "from": 9,
        "to": 23,
        "__gohashid": 535
    },
    {
        "from": 9,
        "to": 20,
        "__gohashid": 536
    },
    {
        "from": 9,
        "to": 21,
        "__gohashid": 537
    },
    {
        "from": 10,
        "to": 26,
        "__gohashid": 538
    },
    {
        "from": 11,
        "to": 26,
        "__gohashid": 539
    },
    {
        "from": 11,
        "to": 24,
        "__gohashid": 540
    },
    {
        "from": 11,
        "to": 27,
        "__gohashid": 541
    },
    {
        "from": 16,
        "to": 22,
        "__gohashid": 542
    },
    {
        "from": 22,
        "to": 24,
        "__gohashid": 543
    },
    {
        "from": 26,
        "to": 29,
        "__gohashid": 544
    },
    {
        "from": 26,
        "to": 18,
        "__gohashid": 545
    },
    {
        "from": 26,
        "to": 28,
        "__gohashid": 546
    }
]);

sorry first image is below one

The positioning of nodes is the responsibility of the layout. What is your Group.layout?

TreeLayout

But your most recent screenshot seems to show that the graph is not tree-structured enough that a tree layout will work. Try a LayeredDigraphLayout.

4 posts were split to a new topic: Designing nodes and groups

If i use LayeredDigraphLayout meaning of diagram is totally changed it indicates the flow. can below image type diagram is achievable by using grid layout or tree layout


in above image nodes which are not having any links are placed at right side by any chance can it be moved to left side

You could set https://gojs.net/latest/api/symbols/LayeredDigraphLayout.html#layeringOption to LayerLongestPathSource.

$(go.LayeredDigraphLayout,
  { . . .,
    layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource
  })

But you might not like the results. If you don’t like it you could try using the ArrangingLayout extension instead: Arranging Layout of the Class Hierarchy so that you can control where those individual nodes are placed and how.

For some reason the forum is not showing the posts in chronological order.

LayeredDigraphLayout is exactly what you want to use in order to get results like what you just posted. You’ll want to increase the LayeredDigraphLayout.layerSpacing. And you will want to change your link template not to be Orthogonal.