Preventing Cycles

Building on the validation example, this uses the getOutgoers helper inside an is-valid-connection check to reject any connection that would create a cycle in the graph.


import type { Edge, Node } from '@xyflow/vue';
 
export const nodes: Node[] = [
  { id: '1', position: { x: 0, y: 9 }, data: { label: 'A' } },
  { id: '2', position: { x: 125, y: 125 }, data: { label: 'B' } },
  { id: '3', position: { x: 0, y: 250 }, data: { label: 'C' } },
  { id: '4', position: { x: -125, y: 125 }, data: { label: 'C' } },
];
 
export const edges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2' },
];