We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customizing Ports in Html Node !


We are evaluating sync fusion diagram for our product. We are developing using html5/angular/typescript/asp.net core/web api.

The diagram have complex shapes defined by html. The html node shape can be rectangle or circle based on an image. The size also different for different html node. Also no of ports vary for each type of node. For example, the rectangle shape node have 20 ports and circle shape node have 6 ports. Also two html nodes can be connected by a specific port. May I know whether it is possible in latest sync fusion diagram?


1 Reply

AR Aravind Ravi Syncfusion Team February 20, 2019 11:28 AM UTC

Hi Kannan, 
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[] = [ 
      id: 'node1', 
      offsetX: 100, 
      offsetY: 100, 
      width: 100, 
      height: 100, 
      shape: { 
        type: 'Native', content: '<svg width="400" height="110">' + 
          '<rect width="300" height="100" style="fill:rgb(0,0,255);" />' + 
public connectors: ConnectorModel[] = [ 
      id: 'connector1', 
      sourceID: 'node1', 
      targetID: 'node2', 
      sourcePortID: 'port2', 
      targetPortID: 'port1', 
      type: 'Orthogonal' 
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 
Video: Connection 
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 
Aravind Ravi 

Live Chat Icon For mobile
Up arrow icon