Layouting a directed graph: edges crossing nodes

1.5k views Asked by At

I'm currently trying to display a process flow with Cytoscape.js and cytoscape-dagre. While this combination does a pretty good job for simple processes (or graphs), I can't solve the problem of edges crossing nodes.

The following is rendered by the dot engine of GraphViz. Have a look at the path between "QS-Daten anlegen" and "Buchhaltungsdaten anlegen": Nodes positioned in a straight line, edges avoiding to cross nodes. Have a look at the path between "QS-Daten anlegen" and "Buchhaltungsdaten anlegen": Nodes positioned in a straight line, edges avoiding to cross nodes

The same graph rendered by cytoscape.js and cytoscape-dagre. Nodes are position similar, but not in such a straight line. Edges don't consider node positions. Nodes are position similar, but not in such a straight line. Edges don't consider node positions.

I tried to improve the result by adjusting the lyout options like nodeSep, edgeSep etc. But the main problem remains: single lines between nodes don't consider other nodes being positioned on the straight path of that edge.

I'm not sure if that is a matter of the layout algorithm, i. e. cytoscape-dagre or if cytoscape.js simply doesn't allow layout plugins to bend edges.

And of course, I don't know how to let cytoscape render that graph like the dot engine of GraphViz does.

Thanks in advance Newlukai

0

There are 0 answers