Labels

Edges support three label positions. Labels are rendered as HTML elements, so they support full styling.

Label positions

Property Position Description
label Center of the path Main label, placed at the midpoint
labelStart Near the source end Label offset from the source node
labelEnd Near the target end Label offset from the target node 
public array $edges = [
    [
        'id' => 'e1',
        'source' => 'a',
        'target' => 'b',
        'label' => 'main',
        'labelStart' => '1',
        'labelEnd' => '*',
    ],
];
INTERACTIVE 
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Source' } },
        { id: 'b', position: { x: 330, y: 120 }, data: { label: 'Target' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b', label: 'center', labelStart: 'start', labelEnd: 'end' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>

HTML labels

Label text is written with textContent, so any markup shows as literal tags. Set labelHtml on the edge to render its labels as HTML instead — for a line break, an icon, or a piece of emphasis:

public array $edges = [
    [
        'id' => 'e1',
        'source' => 'a',
        'target' => 'b',
        'label' => 'over the limit<br><em>and no manager on shift</em>',
        'labelHtml' => true,
    ],
];

labelHtml applies to all of the edge's labels (label, labelStart, labelEnd). The markup is inserted as-is, so render only content you control — never unescaped user input.

Label visibility

Control when labels appear with labelVisibility:

Value Behavior
'always' Always visible (default)
'hover' Visible on hover or when the edge is selected
'selected' Visible only when the edge is selected 
public array $edges = [
    [
        'id' => 'e1',
        'source' => 'a',
        'target' => 'b',
        'label' => 'Hover to see',
        'labelVisibility' => 'hover',
    ],
    [
        'id' => 'e2',
        'source' => 'b',
        'target' => 'c',
        'label' => 'Select to see',
        'labelVisibility' => 'selected',
    ],
    [
        'id' => 'e3',
        'source' => 'c',
        'target' => 'd',
        'label' => 'Always visible',
        'labelVisibility' => 'always',
    ],
];

Example

<x-flow :nodes="$nodes" :edges="$edges">
    <x-slot:node>
        <x-flow-handle type="target" />
        <span x-text="node.data.label"></span>
        <x-flow-handle type="source" />
    </x-slot:node>
</x-flow>

See also