Edge Label Renderer

To escape the SVG world inside an edge, use the <EdgeLabelRenderer /> — a portal that renders edge labels as plain divs on top of the edges. If a label needs mouse interactions, set pointer-events: all on it.


import type { Edge } from '@xyflow/vue';
 
export type CustomEdgeType = Edge<{ label: string }, 'custom'>;
export type StartEndEdgeType = Edge<{ startLabel: string; endLabel: string }, 'start-end'>;
export type EdgeLabelExampleEdge = CustomEdgeType | StartEndEdgeType;