Link overlapping issue

i am facing link overlapping issue when i create a graph structure look like this

Yes, so what is the desired solution? What have you tried?

i have tried this solution but it doesn’t work in with my diagram

You still haven’t said what you want. A sketch would help.

i just want to remove overlapping of link on each other it soluld be look some like this

I really recommend that you not use four separate small ports. Just use the default behavior of having the whole Node act as a single port, and set fromSpot and toSpot to go.Spot.AllSides. Or if you want to get a bit more specific in your guidance, those top three "Label"ed Links could have fromSpot be go.Spot.RightSide or go.Spot.LeftRightSides and toSpot be go.Spot.TopSide.

For those bottom two "Label"ed Links, setting fromSpot and toSpot to go.Spot.BottomSide might help.

But all of these more specific suggestions depend on your not using small port elements.

I got the desired layout after removing all four ports and setting fromSpot and toSpot to go.Spot.AllSides .

But when i set fromLinkable: true, toLinkable: true, cursor: “pointer”,portId: “” to make nodes link able , again my diagram links get overlapped

On what did you set those properties? And what is your Diagram.layout?

my diagram layout and its properties

                         direction: 90,
                         isOngoing: false,  // sets the postion of the node to current drag pos
                         layerSpacing: 50,
                         setsPortSpots: false,
                         //columnSpacing: 20,
                         isRouting: true,
                         isValidLayout: true,
                         isViewportSized: true,
                         aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
                         cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
                         initializeOption: go.LayeredDigraphLayout.InitDepthFirstOut,
                         //layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
                         packOption: go.LayeredDigraphLayout.PackAll

and i am setting these property on nodeTemplate

Ah, good – you are setting LayeredDigraphLayout.setsPortSpots to false. Layouts normally do the link routing, so you need to disable that layout’s routing behavior to respect the wishes of the nodes’ port spots.

So I cannot explain the behavior you are getting. What’s your node template? If you want, you can excise stuff in the body that’s unrelated to this problem.

myDiagram.nodeTemplate =
$(go.Node, “Auto”,

        { layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, },
             new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
             { resizable: false, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate, desiredSize: new go.Size(108, 67), minSize: new go.Size(108, 67), maxSize: new go.Size(220, 120) },
             new go.Binding("angle").makeTwoWay(),
             new go.Binding("position", "position", go.Point.parse).makeTwoWay(go.Point.stringify),
             new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
            $(go.Shape, "RoundedRectangle",
                  parameter1: 2,
                  fill: fill, stroke: "orange", strokeWidth: 2,
                  spot1: new go.Spot(0, 0, 1, 1),
                  spot2: new go.Spot(1, 1, -1, 0),
                  minSize: new go.Size(95, 59),
                  maxSize: new go.Size(220, 120),
                  cursor: "pointer", portId: "",
                  fromLinkable: true,
                  fromLinkableSelfNode: true, 
                  toLinkable: true,
                  toLinkableSelfNode: true,
                new go.Binding("figure", "figure").makeTwoWay(),
                new go.Binding("fill", "fill").makeTwoWay(),
                new go.Binding("stroke", "stroke").makeTwoWay()

            $(go.Panel, "Vertical",
              { alignment: go.Spot.Top, stretch: go.GraphObject.Horizontal, minSize: new go.Size(108, 67) },
              $(go.Panel, "Table",
                { background: "lightblue", stretch: go.GraphObject.Horizontal, width: 15.5, height: 13 },
                    $(go.Shape, "StopSign", {
                        alignment: go.Spot.TopLeft, margin: 2,
                        fill: "red", width: 8, height: 8, stroke: null,
                        visible: visible
                    }, new go.Binding("visible", "visible").makeTwoWay())),

                  font: "12px Arial, sans-serif", //stroke: lightText,
                  margin: 4,
                  stretch: go.GraphObject.Horizontal, textAlign: "center",
                  height: 38,
                  maxLines: 3,
                  // cursor: "move",
                  verticalAlignment: go.Spot.Center,
                  editable: true, isMultiline: true, //textValidation: validateText,
                  textEdited: function (textBlock, previousText, currentText) {
                      if (previousText != currentText) {
             new go.Binding("text", "text").makeTwoWay()),
                     new go.Binding("visible", "text", function (t) { return !!t; }).ofObject("TB"),
                       { name: "TB", margin: 4, font: "bold 12px Verdana,serif", stroke: "black" },
                       new go.Binding("text", "", diagramNodeInfo))
              { contextMenu: $(go.Adornment) },
          { // handle mouse enter/leave events to show/hide the ports
              mouseEnter: function (e, node) { showSmallPorts(node, true); },
              mouseLeave: function (e, node) { showSmallPorts(node, false); },

You have to put port-related properties on the element that is the port, not on unrelated objects. A port object is whatever GraphObject has GraphObject.portId set to a string. By setting portId on the Shape, you’ve made it the port, so all port properties should be set on that Shape.

can you please provide me an example for this

write now i am setting fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, in go.Node and port info on shape as i share my code

But you’ve changed what is the port – it used to be the Node, but now it’s the Shape.