I want diagram to be like this.

This pic is without linkarray json data.
This happens when I put a predefined in link in linkarray.

You can see nodes has been horiontallly aligned.
here is my code
myDiagram.model = go.Model.fromJson({ “class”: “go.GraphLinksModel”,
“copiesArrays”: true,
“copiesArrayObjects”: true,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“nodeDataArray”: [
{
“key”: “parent”,
“name”: “parentshelf”,
“size”: “480 350”,
“shapetype”:“Rectangle”,
“stroke”:“black”,
“strokeWidth”:6,
“lyt2”:{ arrangement:0 },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementHorizontal },
“isGroup”: true
},
{
“key”: “portonshelf”,
“name”: “portonshelf”,
“size”: “480 80”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“group”: “parent”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
}, {
“portColor”: “yellow”,
“portId”: “right1”
},
{
“portColor”: “yellow”,
“portId”: “right2”
},
{
“portColor”: “yellow”,
“portId”: “right3”
},
{
“portColor”: “yellow”,
“portId”: “right4”
}
],
"commands": [
{ "text": "Add Card", "action": "addCard"},
{ "text": "Add Slot", "action": "add Slot"}
]
},
{
“key”: “slot25”,
“name”: “slot25”,
“size”: “100 100”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“group”: “slot2”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
}, {
“portColor”: “yellow”,
“portId”: “right1”
},
{
“portColor”: “yellow”,
“portId”: “right2”
},
{
“portColor”: “yellow”,
“portId”: “right3”
},
{
“portColor”: “yellow”,
“portId”: “right4”
}
],
"commands": [
{ "text": "Add Card", "action": "addCard"},
{ "text": "Add Slot", "action": "add Slot"}
]
},
{
“key”: “main”,
“name”: “MainShelf”,
“size”: “480 250”,
“shapetype”:“Rectangle”,
“stroke”:“black”,
“strokeWidth”:2,
“group”: “parent”,
“lyt2”:{ arrangement:270 },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementHorizontal },
“isGroup”: true
},
{
“key”: “slot1”,
“name”: “Slot1”,
“lyt2”:{ arrangement:0},
//“lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“size”: “240 250”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard”},
{ “text”: “Add Slot”, “action”: “add Slot”}
]
},
{
“key”: “slot2”,
“name”: “Slot2”,
“size”: “120 250”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard” },
{ “text”: “Add Port”, “action”: “addPort” }
]
},
{
“key”: “slot4”,
“name”: “Slot2”,
“size”: “120 250”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:0 },
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard” },
{ “text”: “Add Port”, “action”: “addPort” }
]
},
{
“key”: “card5”,
“size”: “90 140”,
“color”: “lightgrey”,
“group”: “slot4”,
“shapetype”:“RoundedRectangle”,
“lyt2”:{ arrangement:0 },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“name”:“Card2”,
“isGroup”:true,
“commands”: [
{ “text”: “Add Port”, “action”: “addPort” },
{ “text”: “Add Link”, “action”: “addLink” }
]
},
{
“key”: “innerslot4”,
“name”: “InnerSlot4”,
“size”: “80 50”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
//“isGroup”: true,
“group”: “card5”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
},
{
“portColor”: “yellow”,
“portId”: “right1”
}
]
},
{
“key”: “innerslot5”,
“name”: “InnerSlot”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
“size”: “80 50”,
//“isGroup”: true,
“group”: “card5”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
},
{
“portColor”: “yellow”,
“portId”: “right1”
}
]
}
],
“linkDataArray”: [
{“from”:“innerslot4”, “to”:“innerslot5”, “fromPort”:“right0”, “toPort”:“right1”}
]});
var $ = go.GraphObject.make; //for conciseness in defining node templates
myDiagram =
$(go.Diagram, "myDiagramDiv", //Diagram refers to its DIV HTML element by id
{ initialContentAlignment: go.Spot.Center, "undoManager.isEnabled": true });
var portSize = new go.Size(15, 15);
// the node template
// includes a panel on each side with an itemArray of panels containing ports
myDiagram.nodeTemplate =
$(go.Node, "Table",
{ layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized },
{
locationSpot: go.Spot.Center
},
// the body
$(go.Panel, "Auto",
{ row: 1, column: 1,
},
$(go.Shape, "RoundedRectangle",
{ fill: "rgba(128,128,128,0.33)", margin: new go.Margin(5, 5)},
new go.Binding("desiredSize", "size", go.Size.parse),
new go.Binding("stroke", "stroke"),
new go.Binding("strokeWidth", "strokeWidth"),
),
), // end Auto Panel body
// the Panel holding the right port elements, which are themselves Panels,
// created for each item in the itemArray, bound to data.rightArray
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "portArray"),
{ row: 1, column: 1,
itemTemplate:
$(go.Panel,
{ _side: "right",
fromSpot: go.Spot.BottomSide , toSpot: go.Spot.TopSide,
fromLinkable: true, toLinkable: true, cursor: "pointer"},
new go.Binding("portId", "portId"),
$(go.Picture, "images/port.png",
{ name: "BODY", width: 15, height: 15, margin: 2}
),
) // end itemTemplate
}
), // end Vertical Panel
); // end Node
// an orthogonal link template, reshapable and relinkable
myDiagram.linkTemplate =
$(go.Link, // defined below
{
routing: go.Link.AvoidsNodes,
corner: 4,
curve: go.Link.JumpOver,
reshapable: true,
resegmentable: true,
relinkableFrom: true,
relinkableTo: true
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, { stroke: "#2F4F4F", strokeWidth: 2 })
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
new go.Binding("layout", "lyt2", function(data) {
return $(go.LayeredDigraphLayout, // automatically lay out the lane's subgraph
{
// isInitial:false,
isOngoing:false,
setsPortSpots:false,
direction: data.arrangement,
columnSpacing: 1,
})
// if (data.arrangement === 'Horizontal') {
// console.log('Horizontal');
// return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingWidth: Infinity });
// } else {
// return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingColumn: 1 });
// }
}),
$(go.Panel, "Auto",
$(go.Shape,
new go.Binding("figure", "shapetype"),
{ fill: "rgba(128,128,128,0.33)"},
new go.Binding("stroke", "stroke"),
new go.Binding("strokeWidth", "strokeWidth"),
new go.Binding("desiredSize", "size", go.Size.parse),
),
$(go.Placeholder,
{padding: 10}) // with some extra padding around them
),
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "portArray"),
{ row: 1, column: 1,
itemTemplate:
$(go.Panel,
{ _side: "right",
// fromSpot: go.Spot.Center, toSpot: go.Spot.Center,
fromSpot: go.Spot.BottomSide , toSpot: go.Spot.TopSide,
fromLinkable: true, toLinkable: true, cursor: "pointer"},
new go.Binding("portId", "portId"),
$(go.Picture, "images/port.png",
{ name: "BODY", width: 15, height: 15, margin: 2}
),
) // end itemTemplate
}
), // end Vertical Panel
);