JointJs how to make links avoid each other. Not to clump up

Question

For several days I'm trying to find solution for my problem. I have a workflow visualizing module made with jointjs. But there are so many links that they clump up and it becomes incomprehensible. I want to make them avoid each other and tend to go parallel rather than over one another. 2nd: no router, jumpover connector) I'm thinking over an idea: When creating a link I'll get all occupied by links pixels and add them to the obstacle map .. somehow. I'm not sure if it's possible since it's a vector graphic. Any one with an idea?

With metro router:

No router, jumpover connector:

Answer 1

One potential solution here would be to layout the elements differently, such that the graph is nicely displayed. For this you can use the JointJS plugin for Dagre, which provides you a joint.layout.DirectedGraph.layout() function to layout the graph, with several options as well.

A full blog post explaining how this works in more detail can be found here.

Hope this can help.