This example demonstrates how to configure elkjs to use specific handles (called ‘ports’ in elkjs). This is helpful to reduce edge crossings and have more control over the layout. The important things to configure are unique ids for the handles / ports, the actual ports for elkjs with a correct side property and 'org.eclipse.elk.portConstraints' : 'FIXED_ORDER' for all nodes.
import { useEffect } from 'react';import ELK from 'elkjs/lib/elk.bundled.js';import { type Edge, useNodesInitialized, useReactFlow } from '@xyflow/react';import { type ElkNode } from './nodes';// elk layouting options can be found here:// https://www.eclipse.org/elk/reference/algorithms/org-eclipse-elk-layered.htmlconst layoutOptions = { 'elk.algorithm': 'layered', 'elk.direction': 'RIGHT', 'elk.layered.spacing.edgeNodeBetweenLayers': '40'
,
'elk.spacing.nodeNode': '40',
'elk.layered.nodePlacement.strategy': 'SIMPLE',
};
const elk = new ELK();
// uses elkjs to give each node a layouted position