Dynamic Ports

Add port to selected nodes:

Double-click in the diagram background in order to add a new node there. In this sample you can add ports to a selected node 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.

The diagram also uses a custom link to allow for special routing to help parallel links avoid each other using overridden Link.computeEndSegmentLength, Link.hasCurviness, and Link.computeCurviness functions.

See the Ports Intro page for an explanation of GoJS ports.

Diagram Model saved in JSON format:

{ "class": "go.GraphLinksModel",
  "copiesArrays": true,
  "copiesArrayObjects": true,
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
{"key":1, "name":"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":2, "name":"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":3, "name":"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":4, "name":"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":4, "to":2, "fromPort":"top0", "toPort":"bottom0"},
{"from":4, "to":2, "fromPort":"top0", "toPort":"bottom0"},
{"from":3, "to":2, "fromPort":"top0", "toPort":"bottom1"},
{"from":4, "to":3, "fromPort":"right0", "toPort":"left0"},
{"from":4, "to":3, "fromPort":"right1", "toPort":"left2"},
{"from":1, "to":2, "fromPort":"right0", "toPort":"left1"},
{"from":1, "to":2, "fromPort":"right1", "toPort":"left2"}
 ]}