Add port to selected nodes: Top Bottom Left Right

Double-click in the diagram background in order to add a new node there. In this sample you can add ports to a selected nodes by clicking the above buttons or by using the context menu. Draw links between ports by dragging between ports. If you select a link you can relink or reshape it. Right-click or touch-hold on a port to bring up a context menu that allows you to remove it or change its color.

Save Load

{ "class": "go.GraphLinksModel", "copiesArrays": true, "copiesArrayObjects": true, "linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort", "nodeDataArray": [ {"key":"unit One", "loc":"101 204", "leftArray":[ {"portColor":"#425e5c", "portId":"left0"} ], "topArray":[ {"portColor":"#d488a2", "portId":"top0"} ], "bottomArray":[ {"portColor":"#316571", "portId":"bottom0"} ], "rightArray":[ {"portColor":"#923951", "portId":"right0"},{"portColor":"#ef3768", "portId":"right1"} ] }, {"key":"unit Two", "loc":"320 152", "leftArray":[ {"portColor":"#7d4bd6", "portId":"left0"},{"portColor":"#cc585c", "portId":"left1"},{"portColor":"#b1273a", "portId":"left2"} ], "topArray":[ {"portColor":"#14abef", "portId":"top0"} ], "bottomArray":[ {"portColor":"#dd45c7", "portId":"bottom0"},{"portColor":"#995aa6", "portId":"bottom1"},{"portColor":"#6b95cb", "portId":"bottom2"} ], "rightArray":[ ] }, {"key":"unit Three", "loc":"384 319", "leftArray":[ {"portColor":"#bd8f27", "portId":"left0"},{"portColor":"#c14617", "portId":"left1"},{"portColor":"#47fa60", "portId":"left2"} ], "topArray":[ {"portColor":"#d08154", "portId":"top0"} ], "bottomArray":[ {"portColor":"#6cafdb", "portId":"bottom0"} ], "rightArray":[ ] }, {"key":"unit Four", "loc":"138 351", "leftArray":[ {"portColor":"#491389", "portId":"left0"} ], "topArray":[ {"portColor":"#77ac1e", "portId":"top0"} ], "bottomArray":[ {"portColor":"#e9701b", "portId":"bottom0"} ], "rightArray":[ {"portColor":"#24d05e", "portId":"right0"},{"portColor":"#cfabaa", "portId":"right1"} ] } ], "linkDataArray": [ {"from":"unit Four", "to":"unit One", "fromPort":"top0", "toPort":"bottom0"}, {"from":"unit Four", "to":"unit Two", "fromPort":"top0", "toPort":"bottom0"}, {"from":"unit Three", "to":"unit Two", "fromPort":"top0", "toPort":"bottom1"}, {"from":"unit Four", "to":"unit Three", "fromPort":"right0", "toPort":"left0"}, {"from":"unit Four", "to":"unit Three", "fromPort":"right1", "toPort":"left2"}, {"from":"unit One", "to":"unit Two", "fromPort":"right0", "toPort":"left1"}, {"from":"unit One", "to":"unit Two", "fromPort":"right1", "toPort":"left2"} ]}