I'm trying to visualize a graph in Cytoscape.js where two nodes are connected by two distinct edges. When I use straight edges, they overlap completely, making it hard to distinguish them. I want to keep the edges straight but have them offset by a specific distance (for example, 10 pixels apart) so that both connections remain visible. Is there a built-in method or a recommended workaround to achieve this effect without switching to curved edges?

So far I tried this with different segment weights and distances, and it looks good, but under some angle where segment point intersects the node border - the edge disappears and I see this error has invalid endpoints and so it is impossible to draw. Adjust your edge style (e.g. control points) accordingly or use an alternative edge type. This is expected behavior when the source node and the target node overlap.

  
    selector: 'edge',
    style: {
      'line-color': 'data(color)',
      'target-arrow-shape': 'triangle',
      'target-arrow-color': 'data(color)',
      'width': 1,
      'curve-style': 'round-segments',
      'segment-distances': '10 ',
      'segment-weights': '0 ',
      'opacity': 0.8
     }

I also tried changing source-endpoint to be center of the node, but then when the edge is moved it appears over the node connected to the center, and it doesn't look good.