Having trouble correctly aligning the links

Hello :) I’m having trouble centering the links such that it connects in the center of the Rectangle Object and not the whole Node. This is my code so far i tried to use the fromSpot and toSpot but without any luck. Does anyone know what i’m doing wrong?

  myDiagram.nodeTemplate =
    $(go.Node, "Spot", {fromSpot: go.Spot.Center, toSpot: go.Spot.Center},     
      $(go.Panel, "Auto", 
        $(go.Shape, "RoundedRectangle",
          { fill: graygrad, stroke: "transparent",  margin: 0 },  
          new go.Binding("fill", "color")),   
        $(go.TextBlock,
          { margin: 10, font: "bold 18px Roboto, bold Arial, sans-serif", stroke:'red' },
          new go.Binding("text", "key")),
      ), 
      $(go.TextBlock, 
        {alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, font: "bold 18px Roboto, bold Arial, sans-serif",}, new go.Binding("text", "placement"))
    );

This produces this graph:

Instead of setting fromSpot and toSpot, set portId: "" on the RoundedRectangle Shape. This will treat the Shape as the port rather than the whole node.

https://gojs.net/latest/intro/ports.html#SinglePorts