You haven’t provided your node template(s), so I had to guess. I did take a bit from our FlowChart sample. Here’s a partial screenshot of my result:
And my complete sample:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
function makePort(name, align, spot, output, input) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
// the port is basically just a transparent rectangle that stretches along the side of the node,
// and becomes colored when the mouse passes over it
return $(go.Shape,
{
fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
portId: name, // declare this object to be a "port"
fromSpot: spot, // declare where links may connect at this port
fromLinkable: output, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
toLinkable: input, // declare whether the user may draw links to here
cursor: "pointer", // show a different cursor to indicate potential link point
mouseEnter: function(e, port) { // the PORT argument will be this Shape
if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
},
mouseLeave: function(e, port) {
port.fill = "transparent";
}
});
}
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "", function(d) { return new go.Point(d.xloc, d.yloc); }),
$(go.Panel, "Auto",
$(go.Shape,
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8, maxSize: new go.Size(150, NaN) },
new go.Binding("text"))
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, false, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
);
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.Orthogonal, corner: 10,
reshapable: true,
relinkableFrom: true, relinkableTo: true
},
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model =
$(go.GraphLinksModel,
{
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: [
{"key":"1016606","text":"20 Misbrug","color":"#999900","bounds":null,"xloc":0,"yloc":0,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"MDC","leafnode":false,"tooltip":null,"yellowbox":false},
{"key":"1016607","text":"Kontaktdage >1","color":"#ffeb00","bounds":null,"xloc":235,"yloc":0,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016608","text":" 20M11 Alkoholisk psykose + andre alv. mentale","color":"#FFA918","bounds":null,"xloc":470,"yloc":0,"fig":"F M0 100 L200 0 L400 100 L200 200 L0 100z","width":"159","height":"79","groupCode":"DGCAT","leafnode":false,"tooltip":null,"yellowbox":false},{"key":"1016609","text":"20MA01 Alkohol- eller stofmisbrug eller afhængighed og afgiftning etc., m. kompl. bidiag.","color":"#d5d5c9","bounds":null,"xloc":705,"yloc":0,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"DGCAT","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016610","text":" 20M12 Medicinforårsaget sindssygdom mv.","color":"#FFA918","bounds":null,"xloc":470,"yloc":130,"fig":"F M0 100 L200 0 L400 100 L200 200 L0 100z","width":"159","height":"79","groupCode":"DGCAT","leafnode":false,"tooltip":null,"yellowbox":false},{"key":"1016611","text":"20MA01 Alkohol- eller stofmisbrug eller afhængighed og afgiftning etc., m. kompl. bidiag.","color":"#d5d5c9","bounds":null,"xloc":705,"yloc":130,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"DGCAT","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016612","text":"OR ikke tilladt","color":"#ffeb00","bounds":null,"xloc":470,"yloc":260,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016613","text":" 20K00 Komplicerende bidiagnoser til MDC20","color":"#FFA918","bounds":null,"xloc":705,"yloc":260,"fig":"F M0 100 L200 0 L400 100 L200 200 L0 100z","width":"159","height":"79","groupCode":"DGALT","leafnode":false,"tooltip":null,"yellowbox":false},{"key":"1016614","text":"20MA01 Alkohol- eller stofmisbrug eller afhængighed og afgiftning etc., m. kompl. bidiag.","color":"#d5d5c9","bounds":null,"xloc":940,"yloc":260,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"DGALT","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016615","text":"OR ikke tilladt","color":"#ffeb00","bounds":null,"xloc":235,"yloc":390,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016616","text":"Kontaktdage <=1 ","color":"#ffeb00","bounds":null,"xloc":470,"yloc":390,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016620","text":"20MA02 Alkohol- eller stofmisbrug eller afgiftning etc., u. kompl. bidiag.","color":"#d5d5c9","bounds":null,"xloc":1670,"yloc":520,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016617","text":"Alder <7 år","color":"#ffeb00","bounds":null,"xloc":705,"yloc":390,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016618","text":"20MA99 MDC20 1-dagsgruppe, pat. 0-6 år","color":"#d5d5c9","bounds":null,"xloc":940,"yloc":390,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016619","text":"20MA98 MDC20 1-dagsgruppe, pat. mindst 7 år","color":"#d5d5c9","bounds":null,"xloc":1905,"yloc":520,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"","leafnode":true,"tooltip":"","yellowbox":false}],
linkDataArray: [
{"from":"1016606","to":"1016607","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},
{"from":"1016607","to":"1016608","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016607","to":"1016615","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016608","to":"1016609","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016608","to":"1016610","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016610","to":"1016611","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016610","to":"1016612","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016612","to":"1016613","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016612","to":"1016615","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016613","to":"1016614","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016613","to":"1016615","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016615","to":"1016616","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016616","to":"1016617","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016616","to":"1016620","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016617","to":"1016618","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016617","to":"1016619","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"}]
});
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>