Flux

Junction ​

FluxFlowJunction is the knot in a flow: the point where several lines meet, or where one line splits into many. Place it in its own Node and wire it up like any other node, so three connectors reaching it and one leaving it read as a single merge instead of three lines crossing.

It is a connection point, not a step, so it carries no label. A Step numbers a stage of the flow; a junction only says the wiring comes together here.

Order placed
Order returned
Update the ledger

Props

color?: FluxColor
The tint of the ring. Without one it is drawn in the same gray as a plain connector.

Examples ​

Merging sources

Three sources land on one junction, and a single connector carries them into the step that consumes them. Dropping the marker on the connectors that meet keeps the junction itself the only shape at that point.

Slack1,204 threads
GmailSupport inbox
Zendesk8,612 tickets
Index the corpus

<template>
    <FluxFlow :padding="21">
        <FluxFlowNode id="slack" :x="0" :y="0">
            <FluxFlowCard title="Slack" subtitle="1,204 threads"/>
        </FluxFlowNode>

        <FluxFlowNode id="gmail" :x="0" :y="150">
            <FluxFlowCard title="Gmail" subtitle="Support inbox"/>
        </FluxFlowNode>

        <FluxFlowNode id="zendesk" :x="0" :y="300">
            <FluxFlowCard title="Zendesk" subtitle="8,612 tickets"/>
        </FluxFlowNode>

        <FluxFlowNode id="merge" :x="411" :y="181">
            <FluxFlowJunction color="primary"/>
        </FluxFlowNode>

        <FluxFlowNode id="index" :x="546" :y="159">
            <FluxFlowActionCard title="Index the corpus" icon="database"/>
        </FluxFlowNode>

        <FluxFlowConnection from="slack" to="merge" from-side="right" marker-end="none"/>
        <FluxFlowConnection from="gmail" to="merge" from-side="right" marker-end="none"/>
        <FluxFlowConnection from="zendesk" to="merge" from-side="right" marker-end="none"/>
        <FluxFlowConnection from="merge" to="index" marker-start="none" color="primary"/>
    </FluxFlow>
</template>

<script
    setup
    lang="ts">
    import { FluxFlow, FluxFlowActionCard, FluxFlowCard, FluxFlowConnection, FluxFlowJunction, FluxFlowNode } from '@flux-ui/flow';
</script>

Used components ​