How to create a react flow where you have 2 nodes with multiple edges?

Question

I am trying to create a react flow where you have 2 nodes with multipule edges. I have the following set up but it renders only 1 edge. How do I render all 3 edges?

import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';

function MyFlow() {
  const initialNodes = [
    { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
    { id: '2', position: { x: 200, y: 100 }, data: { label: 'Node 2' } },
  ];

  const initialEdges = [
    { id: 'e1-2a', source: '1', target: '2', label: 'Edge A' },
    { id: 'e1-2b', source: '1', target: '2', label: 'Edge B' },
    { id: 'e1-2c', source: '1', target: '2', label: 'Edge C' },
  ];

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} fitView />
    </div>
  );
}

export default MyFlow;

Daisi · Accepted Answer · 2025-09-11 14:09:19Z

0

It seems all three edges are being drawn, but they overlap because they share the same path. Try giving each one an offset (or separate handles);

const initialEdges = [
  { id: 'e1-2a', source: '1', target: '2', type: 'smoothstep', label: 'Edge A', pathOptions: { offset: -30 } },
  { id: 'e1-2b', source: '1', target: '2', type: 'smoothstep', label: 'Edge B', pathOptions: { offset: 0 } },
  { id: 'e1-2c', source: '1', target: '2', type: 'smoothstep', label: 'Edge C', pathOptions: { offset: 30 } },
];

answered Sep 11 at 14:09

Daisi

2,5881 gold badge16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Horrerblade Sep 11 at 18:32

The edge labels seems to still render on top of one another. Is there a way to offset that?

Collectives™ on Stack Overflow

How to create a react flow where you have 2 nodes with multiple edges?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related