How to make links between two 2 nodes parallel

GoJS
1

Hi when I am joining a link from first node to second node and again when I am joining the link from second node to first node I want the links to be placed in parallel position.

the image I attached below shows an example of what I want to achieve but I want the links to be in a parallel position
parallel image
parallel lines

2

Well, if you don’t mind the link end points not connecting at the edges of the shapes, you can set fromSpot and toSpot to be one of the “…Side” Spots, such as go.Spot.AllSides.

Another possibility is to use ParallelRouteLinks: Parallel Route Links

3

Here I don’t wants to use code from Parallel Route Links

So is there any other way to achieve parallel routing links?
. I want to send link from first node to second node and then when I send link from second node to first node, both the link should remain parallel to each other as shown in the image below.
parallel lines

4

Could you please show us what you want when the nodes are rectangular, and the links are on the diagonal because the nodes are not above or beside each other?

Do you mind there being links crossing each other when there are multiple links coming from different nodes?

What should happen as there are more and more links between two nodes? What in general determines the spacing between the parallel links?

5

I am using link validation here by which in a node there can be only one incoming link and only one outgoing link. And the incoming and outgoing link of a node should place in a parallel position.

I tried to use link shifting tool Link Shifting Tool but as here I am using TreeLayout the link shifting tool is not working on TreeLayout.

Below is an image of what I want to achieve.
image

6

OK, so at most only two links between any pair of nodes. Is the distance between a pair of links a constant or does the size of the nodes matter or does the thickness of the links matter? Think about large link labels.

TreeLayout normally assigns the fromSpot and toSpot, which would prevent the custom routing that you want. Try setting TreeLayout.portSpot to go.Spot.LeftRightSides and childPortSpot to go.Spot.LeftRightSides. (This assumes angle is zero.)

7

After applying the changes you mentioned above I am getting the below result.
image

8

Try this instead:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="go.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      layout: $(go.TreeLayout,
        { layerSpacing: 80, setsPortSpot: false, setsChildPortSpot: false }),
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Vertical",
    $(go.Shape, "RoundedRectangle",
      { width: 40, height: 40, fill: "white" },
      { portId: "", fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 2 },
      new go.Binding("text"))
  );

myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape),
    $(go.Shape, { toArrow: "OpenTriangle" }),
    new go.Binding("isTreeLink", "tl"),
    new go.Binding("isLayoutPositioned", "tl"),
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 1, to: 4 },
  { from: 2, to: 1, tl: false },
  { from: 3, to: 1, tl: false },
  { from: 4, to: 1, tl: false },
]);
  </script>
</body>
</html>

The result:
image

The only tricky thing is that the "back-"links are marked so that they do not participate in the layout, since apparently that confuses TreeLayout with deciding what the root is. I’m assuming that you want to keep things tree-like, even though the graph really isn’t due to all of the “up” links.

9

Thanks for your help now its working fine