Phi / Flow

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Node>Start</Flow.Node>
    <Flow.Parallel>
      <Flow.List>
        <Flow.Node>Branch A1</Flow.Node>
        <Flow.Node>Branch A2</Flow.Node>
      </Flow.List>
      <Flow.Node>Branch B</Flow.Node>
      <Flow.Node>Branch C</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>End</Flow.Node>
  </Flow>
</template>

Installation

Barrel

import { Flow } from "@dicehub/phi";

Granular

import { Flow } from "@dicehub/phi/components/flow";

Usage

The Flow components work together to create directed diagrams. Use Flow as the container,Flow.Node for individual steps, and Flow.Parallel to create branching paths.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Node>Step 1</Flow.Node>
    <Flow.Node>Step 2</Flow.Node>
    <Flow.Node>Step 3</Flow.Node>
  </Flow>
</template>

Examples

Sequential Flow

A simple linear flow with nodes connected in sequence.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Node>Step 1</Flow.Node>
    <Flow.Node>Step 2</Flow.Node>
    <Flow.Node>Step 3</Flow.Node>
  </Flow>
</template>

Parallel Branches

Use Flow.Parallel to create branching paths that run in parallel.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Node>Start</Flow.Node>
    <Flow.Parallel>
      <Flow.List>
        <Flow.Node>Branch A1</Flow.Node>
        <Flow.Node>Branch A2</Flow.Node>
      </Flow.List>
      <Flow.Node>Branch B</Flow.Node>
      <Flow.Node>Branch C</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>End</Flow.Node>
  </Flow>
</template>

Vertical Orientation

Set orientation="vertical" to lay nodes out top-to-bottom instead of the default left-to-right.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow orientation="vertical">
    <Flow.Node>Step 1</Flow.Node>
    <Flow.Node>Step 2</Flow.Node>
    <Flow.Node>Step 3</Flow.Node>
  </Flow>
</template>

Parallel branches work the same way in vertical flows. In this orientation, align controls horizontal alignment of nodes.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow orientation="vertical" align="center">
    <Flow.Node>Start</Flow.Node>
    <Flow.Parallel>
      <Flow.Node>Branch A</Flow.Node>
      <Flow.Node>Branch B</Flow.Node>
      <Flow.Node>Branch C</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>End</Flow.Node>
  </Flow>
</template>

Custom Node Styling

Use unstyled nodes to completely customize node appearance.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Node unstyled class="custom-dot" />
    <Flow.Node unstyled class="custom-node">my-worker</Flow.Node>
  </Flow>
</template>

<style>
.custom-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--phi-line);
}

.custom-node {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--phi-contrast);
  color: var(--phi-inverse);
  font-weight: 600;
}
</style>

Centered Alignment

Use the align prop to vertically center nodes with different heights.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow align="center">
    <Flow.Node
      unstyled
      style="width: 1rem; height: 1rem; border-radius: 999px; background: var(--phi-line);"
    />
    <Flow.Node>my-worker</Flow.Node>
    <Flow.Node style="padding-block: 1.5rem;">Taller node</Flow.Node>
  </Flow>
</template>

Complex Flow

Combine sequential and parallel nodes to build complex workflows.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Parallel>
      <Flow.Node>HTTP Trigger</Flow.Node>
      <Flow.Node>Cron Trigger</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>Process Request</Flow.Node>
    <Flow.Parallel>
      <Flow.Node>Log Analytics</Flow.Node>
      <Flow.Node>Update Cache</Flow.Node>
      <Flow.Node>Send Notification</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>Complete</Flow.Node>
  </Flow>
</template>

Custom Anchor Points

Use Flow.Anchor to specify custom attachment points for connector lines.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Node>Load balancer</Flow.Node>
    <Flow.Node unstyled class="anchor-card">
      <Flow.Anchor type="end" class="anchor-card__header">
        my-worker
      </Flow.Anchor>
      <Flow.Anchor type="start" class="anchor-card__binding">
        Bindings <span>2</span>
      </Flow.Anchor>
    </Flow.Node>
    <Flow.Parallel>
      <Flow.Node>DATABASE</Flow.Node>
      <Flow.Node>OTHER_SERVICE</Flow.Node>
    </Flow.Parallel>
  </Flow>
</template>

Panning Large Diagrams

When a diagram exceeds its container, Flow enables panning with drag or wheel input.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow class="large-flow">
    <Flow.Node>Start</Flow.Node>
    <Flow.Node>Authenticate</Flow.Node>
    <Flow.Node>Validate</Flow.Node>
    <Flow.Node>Transform</Flow.Node>
    <Flow.Node>Process</Flow.Node>
    <Flow.Node>Store</Flow.Node>
    <Flow.Node>Notify</Flow.Node>
    <Flow.Node>Log</Flow.Node>
    <Flow.Node>Complete</Flow.Node>
    <Flow.Node>End</Flow.Node>
  </Flow>
</template>

Disabled Nodes

Use disabled nodes to show inactive paths with reduced-opacity connectors.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Node>Request</Flow.Node>
    <Flow.Parallel>
      <Flow.Node>Primary Handler</Flow.Node>
      <Flow.Node disabled>Backup Handler (disabled)</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>Response</Flow.Node>
  </Flow>
</template>

Parallel Node Alignment

Use align="end" on Flow.Parallel to right-align nodes with different widths.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Node>Start</Flow.Node>
    <Flow.Parallel align="end">
      <Flow.Node>Short</Flow.Node>
      <Flow.Node>Medium Length</Flow.Node>
      <Flow.Node>Very Long Node Name</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>End</Flow.Node>
  </Flow>
</template>

Other Examples

Nested Node Lists in Parallel

Use Flow.List inside Flow.Parallel to create branches with multiple sequential steps.

<script setup>
import { Flow } from "@dicehub/phi/components/flow";
</script>

<template>
  <Flow>
    <Flow.Parallel>
      <Flow.List>
        <Flow.Node>Client Users</Flow.Node>
        <Flow.Node>Engineering Team Access</Flow.Node>
      </Flow.List>
      <Flow.List>
        <Flow.Parallel>
          <Flow.Node>All Authenticated Users</Flow.Node>
          <Flow.Node>Client Users</Flow.Node>
          <Flow.Node>Site Users</Flow.Node>
        </Flow.Parallel>
        <Flow.Node>Contractor Access</Flow.Node>
      </Flow.List>
    </Flow.Parallel>
    <Flow.Node>Destinations</Flow.Node>
  </Flow>
</template>

Components

Flow

Root container for flow diagrams. Provides panning and scrolling for large diagrams.

Prop	Type	Description
`align`	`"start" \| "center"`	Cross-axis alignment of nodes in the active orientation.
`orientation`	`"horizontal" \| "vertical"`	Layout orientation for nodes and connectors.
`canvas`	`boolean`	Renders the pannable canvas wrapper, scrollbars, and pan gestures.
`padding`	`{ x?: number; y?: number }`	Padding around diagram content inside the canvas.
`onOverflowChange`	`(overflow: { x: boolean; y: boolean }) => void`	Callback fired when content overflow changes.
`default slot`	`slot`	Flow.Node, Flow.Parallel, or Flow.List children.

Flow.Node

A single node in the flow diagram with automatic connector points.

Prop	Type	Description
`id`	`string`	Optional node identifier exposed through data attributes.
`disabled`	`boolean`	When true, connectors linked to this node render with reduced opacity.
`unstyled`	`boolean`	Removes default node styling for custom markup.
`default slot`	`slot`	Content displayed inside the node.

Flow.Anchor

Marks a custom attachment point for connectors within a Flow.Node.

Prop	Type	Description
`type`	`"start" \| "end"`	Whether the anchor is outgoing, incoming, or both when omitted.
`default slot`	`slot`	Custom anchor content.

Flow.Parallel

Container for parallel branches with junction connectors.

Prop	Type	Description
`align`	`"start" \| "end"`	Cross-axis alignment of branches within the parallel group.
`default slot`	`slot`	Flow.Node or Flow.List components displayed in parallel.

Flow.List

A sequence container used inside Flow.Parallel for multi-step branches.

Prop	Type	Description
`default slot`	`slot`	Flow.Node and Flow.Parallel components displayed in sequence.