Issue with align the initial node to top of the screen

I am facing some issue regarding aligning my first node to the top of the screen. The screen is loaded by default ( already present in the nodeDataArray) while other nodes to be added dynamically.

Want the node to appear just at the top of the screen aligned center horizontally not vertically.

  1. Init method where I defined the template :
    const $ = go.GraphObject.make;

    const dia = $(go.Diagram, {

    ‘undoManager.isEnabled’: true, // must be set to allow for model change listening

    // ‘undoManager.maxHistoryLength’: 0, // uncomment disable undo/redo functionality

    model: $(go.GraphLinksModel,

       linkToPortIdProperty: 'toPort',
       linkFromPortIdProperty: 'fromPort',
       linkKeyProperty: 'key' // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel



    // define the Node template

    var nodeTemplate =

    $(go.Node, ‘Auto’,

       toLinkable: true, fromLinkable: true
     new go.Binding("location", "loc", go.Point.parse),
     $(go.Shape, { strokeWidth: 0 },
       new go.Binding('width', 'width'),
       new go.Binding('height', 'height'),
       new go.Binding('figure', 'figure'),
       new go.Binding('fill', 'color'),
     $(go.Panel, "Table",
       $(go.RowColumnDefinition, { row: 2, column: 2 }),
         { row: 0, column: 0 },
         new go.Binding('text', 'desc'),
         new go.Binding('stroke', 'stroke'),
         { row: 1, column: 0 },
         new go.Binding('text', 'task'),
         new go.Binding('stroke', 'stroke'),
         click: function (e, obj) {

    return dia;

  2. node Data array :
    public diagramNodeData: Array<go.ObjectData> = [
    { key: 0, desc: ‘Trigger Event’, task: ‘Choose an event’, width: 220, height: 60, stroke: ‘white’, color: ‘#1d1b1bb8’, figure: “Rectangle”, loc: “0 0”, category: “initialTemplate” }

Here is provided the location as 0,0 and the node is appearing the the center of the screen, but when I changed the location to any of the other value, there is no effect on the node positions.


Unless you specify otherwise, the diagram will initially scroll so that the contents are centered.

I suggest that you set Diagram.initialContentAlignment:

$(go.Diagram, ...,
  { ...,
    initialContentAlignment: go.Spot.Top