How to deal with jagged link lines

We’re using routing: go.Routing.AvoidsNodes on the link template and when the isGridSnapEnabled it’s not possible to get a straight link line as you see in the gif. What can I possibly look into to avoid jagged lines like this?

link_lines

I assume the link point is at the middle of the width of the node. You’ll need to make sure that the Part.locationSpot is Spot.Center so that that point is what is aligned to the grid.

And I hope the grid cell size will result in snap points that match your desired Node.locations.

Here’s an example with grids and DraggingTool.isGridSnapEnabled. The nodes are intentionally transparent so that you can see how each node is aligned with respect to the grid. The contents of the nodes don’t really matter to this issue.

Try moving the nodes around and see how the links are routed.

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

  <script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv", {
      initialScale: 2,
      "grid.visible": true,
      "draggingTool.isGridSnapEnabled": true,
      "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 =
  new go.Node("Auto", { locationSpot: go.Spot.Center })
    .bindTwoWay("location", "loc", go.Point.parse, go.Point.stringify)
    .add(
      new go.Shape({ fill: "transparent" }),
      new go.TextBlock({ margin: 8 })
        .bind("text")
    );

myDiagram.linkTemplate =
  new go.Link({
      routing: go.Link.AvoidsNodes, corner: 10,
    })
    .add(
      new go.Shape(),
      new go.Shape({ toArrow: "OpenTriangle" })
    );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", loc: "0 0" },
  { key: 2, text: "Beta", loc: "120 0" },
  { key: 3, text: "Gamma", loc: "0 100" },
  { key: 4, text: "Delta", loc: "100 100" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>

Thanks Walter. I’ll get back to you on this soon.