Configurations for links


I am using following diagram configuration:

const createDiagram = (userMapService: UserMapService): go.Diagram => {
  const { make } = go.GraphObject;

  return make(go.Diagram, {
    'undoManager.isEnabled': true,
    'textEditingTool.selectsTextOnActivate': false,
    'commandHandler.archetypeGroupData': { isGroup: true, vertical: true },
    padding: 20,
    mouseDrop: (e) => {
      finishDrop(e, null);
    'dragSelectingTool.isEnabled': true,
    'draggingTool.isEnabled': false,
    model: make(go.GraphLinksModel, {
      linkKeyProperty: 'key',
    ChangedSelection: userMapService.selectionChanged,
    BackgroundSingleClicked: userMapService.clearPropertiesSelection,
    TextEdited: userMapService.nodeNameChanged,
    layout: make(go.TreeLayout, {
      layerSpacing: 40, 
      nodeSpacing: 40, 
      angle: 90, 

In the output from this, the links are coming out from below the nodes, even if the link needs to go top right node instead, is there a confirmation in which the links which need to go to top right nodes can come out from right side of node?
As well as when the link’s source and destinations are same at that time instead of having a big self link can we configure it to have a small one(please refer attached image)

Because TreeLayout.angle is 90 and you have not set TreeLayout.setsPortSpot to false, links will always come out from the parent port at go.Spot.Bottom. And because you have not set TreeLayout.setsChildPortSpot to false, links should always be going into child nodes at go.Spot.Top.

I think TreeLayout does not route reflexive links. Let me check on that.

OK, with this TreeLayout:

      $(go.Diagram, . . .,
            $(go.TreeLayout, {
              angle: 90,
              layerSpacing: 40, 
              nodeSpacing: 40, 
              setsPortSpot: false,
              setsChildPortSpot: false,
              commitLinks: function() {
                  var n = v.node;
                  if (!n) return;
                  n.findLinksConnected().each(function(l) {
                    if (l.fromNode !== l.toNode) return;
                    l.routing = go.Link.Normal;
                    l.fromSpot = go.Spot.Right;
                    l.toSpot = go.Spot.Right;

and setting:

    { fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides }

on the node template’s port, and with the typical example minimal model, the result is:

Note how the override of TreeLayout.commitLinks explicitly sets properties on reflexive links so that they route on the right side of the node.