To allow ports to be selected, dragged, copied, and deleted, they are implemented as Nodes. That means the nodes have to be implemented as Groups. The user can delete selected ports. The user cannot drop a port onto the background, but only onto a node.

There is a custom Layout used by such Group nodes, InputOutputGroupLayout, to line up the input ports on the left side and the output ports on the right side.

Save Load The transformed model data (not the actual myDiagram.model): { "class": "go.GraphLinksModel", "linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort", "nodeDataArray": [ {"key":1, "name":"Server", "ins":[ {"name":"s1", "key":-3},{"name":"s2", "key":-4} ], "outs":[ {"name":"o1", "key":-5} ], "loc":"-80 -80"}, {"key":2, "name":"Other", "ins":[ {"name":"s1", "key":-6},{"name":"s2", "key":-7} ], "outs":[ {"name":"o1", "key":-8} ], "loc":"80 80"} ], "linkDataArray": [ {"from":1, "fromPort":"o1", "to":2, "toPort":"s2"} ] }