Avoid Overlap of Connectors

Question

The default functionality when there are two connections in either direction between two nodes is the following:

We would prefer it to look like the following:

We are using the syncfusion diagam for a state diagram and this will be much clearer to our users. How can this be accomplished?

Thanks,

Ryan

Gowtham Gunashekar · Accepted Answer

Hi Ryan,    
 
Currently we don’t  support to avoid connector overlapping in our diagram control. We have logged “Automatic port creation” as a feature. We does not have any immediate plans to start this feature. We will implement this feature in any one of our upcoming releases.    
 
 You can track the feature status from the below link 
 
 Link:  https://www.syncfusion.com/feedback/23253/automatic-port-creation 
 
We are closing this incident now. You can also communicate with us regarding the open features any time using the “Contact” option. 
 
Regards, 
Gowtham

Gowtham Gunashekar · Answer

Hi Ryan, 
 
We suggest you to use port to achieve you requirement, we have added a sample link to demonstrate how to use port to render connector at separate position. 
 
Sample link: https://stackblitz.com/edit/angular-nbokej-zztw5m?file=app.component.ts 
 
Regards,    
Gowtham

Ryan Dunn · Answer

This doesn't quit solve our problem we are using the diagram as an editor so users need to be able to draw the connections and there can be an arbitrary number of connections between nodes.ThanksRyan

Vaseegaran Chinnathambi · Answer

Hi Ryan,We’re pleased to inform you that the “Automatic Port Creation” feature has now been implemented  and is now available in the latest version of our diagram control(v30.1.41). This enhancement helps address connector overlapping scenarios by enabling automatic port generation.Please refer to the UG documentation for more information about the usability feature.Documentation: Ports interaction in Angular Diagram component | Syncfusion®Regards,Vaseegaran