Delete Middle Node

This example shows how to keep a chain connected when you delete a node from the middle. If three nodes are linked a → b → c and you delete b, you end up with a → c.

It leans on a few helpers: the @nodes-delete event tells us which nodes were removed, getConnectedEdges returns the edges touching a node, and getIncomers / getOutgoers return the nodes connected to it as source or target. For each deleted node we drop its edges, then reconnect every incomer to every outgoer.


import type { Edge, Node } from '@xyflow/vue';
 
export const initialNodes: Node[] = [
  { id: '1', type: 'input', data: { label: 'Start here...' }, position: { x: -150, y: 0 } },
  { id: '2', type: 'input', data: { label: '...or here!' }, position: { x: 150, y: 0 } },
  { id: '3', data: { label: 'Delete me.' }, position: { x: 0, y: 100 } },
  { id: '4', data: { label: 'Then me!' }, position: { x: 0, y: 200 } },
  { id: '5', type: 'output', data: { label: 'End here!' }, position: { x: 0, y: 300 } },
];
 
export const initialEdges: Edge[] = [
  { id: '1->3', source: '1', target: '3' },
  { id: '2->3', source: '2', target: '3' },
  { id: '3->4', source: '3', target: '4' },
  { id: '4->5', source: '4', target: '5' },
];