cytoscape.js with dagre layout, how to avoid edge overlap?

Question

I moving my project from dagre-d3 to cytoscape.

Cytoscape.js is really more flexible and will allow more powerful control but for now, I just can't have the edge rendering as I want.

Here is the dagre-d3 version:

Here is the actual cytoscape:

As you can see, it's almost the same except :

• cluster are not in the same order (not a big deal).
• edge can overlap the whole graph.

The last one is my main issue, I just can't find a way to tell cytoscape to make edge as parallel as possible like dagre-d3.

I'll try to use segments edges (that seems the right edge type) but I can find a way to configure it. Also try taxi one but label are unreadable.

Here is a full example : https://jsfiddle.net/uqtahcfs/

{
    "elements": {
        "nodes": ...,
        "edges": ...,
    },
    "style": ...,
    layout: {
        name: "dagre",
        rankDir:  "LR",
        animate: false,
        fit: true,
        padding: 50,
        spacingFactor: 1.2,
    },
    pixelRatio: 1,
    minZoom: 0.2,
    maxZoom: 2
}

Any way to have segment that look like parallel ?