Yes it is possible to create a connection to specific ports for two HTML node. We have created a sample for Rectangle and Circle SVG shapes using ‘Native’ node feature and add ports to node. In the sample we add six ports to the nodes, you can add more no of ports to the node. Connect these nodes port through connectors. Please find below code snippet for how to connect the nodes port using connector and how to use native node.
public nodes: NodeModel = [
type: 'Native', content: '<svg width="400" height="110">' +
'<rect width="300" height="100" style="fill:rgb(0,0,255);" />' +
public connectors: ConnectorModel = [
We have created a sample in stackblitz. Please find the sample in below link
We have attached a video that demonstrates how does connection made on ports of node while changing at run time. Please find the video in below link
We are having a predefined shape for circle and rectangle you can use that. For more information about node shapes please refer to below UG documentation link