Kappa / Flow

Draft
- - Review
  - Approve
- Automated checks
- Preview build
Release

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

<template>
  <Flow.Root aria-label="Deployment workflow">
    <Flow.Node>Draft</Flow.Node>
    <Flow.Parallel>
      <Flow.List>
        <Flow.Node>Review</Flow.Node>
        <Flow.Node>Approve</Flow.Node>
      </Flow.List>
      <Flow.Node>Automated checks</Flow.Node>
      <Flow.Node>Preview build</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>Release</Flow.Node>
  </Flow.Root>
</template>

Installation

Flow is part of the main Kappa package. It uses Vue and browser measurement APIs. It adds no component-specific dependency.

Barrel

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

Granular

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

Put nodes in source order. Flow measures each node after mount and draws one directed connector between adjacent steps. Give the root an accessible label when the diagram has meaning beyond the surrounding text.

Collect
Validate
Publish

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

<template>
  <Flow.Root aria-label="Publishing workflow">
    <Flow.Node>Collect</Flow.Node>
    <Flow.Node>Validate</Flow.Node>
    <Flow.Node>Publish</Flow.Node>
  </Flow.Root>
</template>

Composition

Typical part hierarchy

Flow.Root
├── Flow.Node
├── Flow.Parallel
│   ├── Flow.List
│   │   ├── Flow.Node
│   │   └── Flow.Node
│   └── Flow.Node
├── Flow.Anchor (inside a custom Flow.Node)
└── Flow.Node

Ark UI does not supply an equivalent primitive. Kappa therefore owns the layout, measurement, connector, and canvas behavior.

Use Flow.Parallel for independent branches. PutFlow.List inside it when one branch contains several sequential nodes. Add an ordinary node between adjacent parallel groups when the paths must converge before they split again.

<Flow.Root>
  <Flow.Node />
  <Flow.Parallel>
    <Flow.List>
      <Flow.Node />
      <Flow.Node />
    </Flow.List>
    <Flow.Node />
  </Flow.Parallel>
  <Flow.Node />
</Flow.Root>

Examples

Parallel branches

Group independent branches with Flow.Parallel. Use Flow.List for a multi-step branch.

Start
- - Branch A1
  - Branch A2
- Branch B
- Branch C
End

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

<template>
  <Flow.Root aria-label="Parallel workflow">
    <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.Root>
</template>

Spline connectors

Use spline connectors for smooth paths through parallel branches.

Upload
- Scan
- Extract
- Preview
Ready

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

<template>
  <Flow.Root connector="spline" aria-label="Content processing workflow">
    <Flow.Node>Upload</Flow.Node>
    <Flow.Parallel>
      <Flow.Node>Scan</Flow.Node>
      <Flow.Node>Extract</Flow.Node>
      <Flow.Node>Preview</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>Ready</Flow.Node>
  </Flow.Root>
</template>

Vertical orientation

Set orientation to vertical and center the nodes for a straight top-to-bottom sequence.

Collect
Validate
Publish

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

<template>
  <Flow.Root orientation="vertical" align="center" aria-label="Vertical workflow">
    <Flow.Node>Collect</Flow.Node>
    <Flow.Node>Validate</Flow.Node>
    <Flow.Node>Publish</Flow.Node>
  </Flow.Root>
</template>

Vertical parallel branches

Parallel groups use columns in a vertical flow. Center alignment keeps the sequence balanced.

Start
- Branch A
- Branch B
- Branch C
End

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

<template>
  <Flow.Root 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.Root>
</template>

Custom node styling

Set unstyled on a node when its shape and surface must come from consumer CSS.

Transform worker

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

<template>
  <Flow.Root aria-label="Custom node workflow">
    <Flow.Node unstyled class="custom-dot" aria-label="Input" />
    <Flow.Node unstyled class="custom-node">Transform worker</Flow.Node>
  </Flow.Root>
</template>

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

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

Centered alignment

Center nodes with different cross-axis dimensions in the same sequence.

Transform worker
Long-running
verification

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

<template>
  <Flow.Root align="center" aria-label="Centered workflow">
    <Flow.Node
      unstyled
      aria-label="Input"
      style="width: 1rem; height: 1rem; border-radius: 999px; background: var(--kappa-line);"
    />
    <Flow.Node>Transform worker</Flow.Node>
    <Flow.Node style="padding-block: 1.25rem; text-align: center;">
      Long-running<br />verification
    </Flow.Node>
  </Flow.Root>
</template>

Combined sequence and branches

Combine sequential and parallel groups to describe a larger process.

- HTTP trigger
- Schedule trigger
Process request
- Write analytics
- Update cache
- Send notification
Complete

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

<template>
  <Flow.Root aria-label="Request workflow">
    <Flow.Parallel>
      <Flow.Node>HTTP trigger</Flow.Node>
      <Flow.Node>Schedule trigger</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>Process request</Flow.Node>
    <Flow.Parallel>
      <Flow.Node>Write analytics</Flow.Node>
      <Flow.Node>Update cache</Flow.Node>
      <Flow.Node>Send notification</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>Complete</Flow.Node>
  </Flow.Root>
</template>

Custom anchor points

Place incoming and outgoing connectors at meaningful positions inside a custom node.

Load balancer
Transform worker
Bindings 2
- Database
- Object store

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

<template>
  <Flow.Root aria-label="Service binding workflow">
    <Flow.Node>Load balancer</Flow.Node>
    <Flow.Node unstyled class="service-card">
      <Flow.Anchor type="end" class="service-card__header">
        Transform worker
      </Flow.Anchor>
      <Flow.Anchor type="start" class="service-card__binding">
        Bindings <span>2</span>
      </Flow.Anchor>
    </Flow.Node>
    <Flow.Parallel>
      <Flow.Node>Database</Flow.Node>
      <Flow.Node>Object store</Flow.Node>
    </Flow.Parallel>
  </Flow.Root>
</template>

<style>
.service-card {
  min-width: 10rem;
  overflow: hidden;
  border: 1px solid var(--kappa-line);
  border-radius: var(--kappa-radius-lg);
  background: var(--kappa-tint);
}

.service-card__header {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  padding-inline: 0.625rem;
}

.service-card__binding {
  display: flex;
  justify-content: space-between;
  margin: 0 0.375rem 0.375rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--kappa-line);
  border-radius: var(--kappa-radius-md);
  background: var(--kappa-control);
}
</style>

Panning large diagrams

Drag the empty canvas or use the wheel when diagram content exceeds the viewport.

Start
Authenticate
Validate
Transform
Process
Store
Notify
Log
Complete
End

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

<template>
  <Flow.Root class="large-flow" aria-label="Large workflow">
    <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.Root>
</template>

<style>
.large-flow {
  min-height: 13rem;
  border: 1px solid var(--kappa-line);
  border-radius: var(--kappa-radius-lg);
}
</style>

Disabled nodes

Disabled nodes and their connected paths show an inactive state.

Request
- Primary handler
- Backup handler
Response

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

<template>
  <Flow.Root aria-label="Workflow with inactive branch">
    <Flow.Node>Request</Flow.Node>
    <Flow.Parallel>
      <Flow.Node>Primary handler</Flow.Node>
      <Flow.Node disabled>Backup handler</Flow.Node>
    </Flow.Parallel>
    <Flow.Node>Response</Flow.Node>
  </Flow.Root>
</template>

Parallel node alignment

Use end alignment to align parallel branches with different widths or heights.

Start
- Short
- Medium length
- Very long node name
End

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

<template>
  <Flow.Root aria-label="End-aligned parallel workflow">
    <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.Root>
</template>

Nested node lists

Nest List and Parallel parts to model branches that contain their own sequence or split.

- - Client users
  - Engineering access
- - - Authenticated users
    - Client users
    - Site users
  - Contractor access
Destinations

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

<template>
  <Flow.Root aria-label="Nested branch workflow">
    <Flow.Parallel>
      <Flow.List>
        <Flow.Node>Client users</Flow.Node>
        <Flow.Node>Engineering access</Flow.Node>
      </Flow.List>
      <Flow.List>
        <Flow.Parallel>
          <Flow.Node>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.Root>
</template>

Accessibility

The root and compound parts preserve native ul and li reading order.
The connector SVG is decorative and hidden from assistive technology.
Keep source order meaningful. Visual branches do not change the screen-reader order.
Use aria-label or aria-labelledby when surrounding text does not name the diagram.
An overflowing canvas receives keyboard focus. Arrow keys pan by 40 px; Shift plus an arrow pans by 96 px. Home and End move to opposite bounds.
Disabled nodes expose aria-disabled="true". Do not use color alone to explain why a path is inactive.
Forced-colors mode keeps nodes and connectors visible. Reduced-motion mode removes the scrollbar fade.

API Reference

Flow.Root

Measures the diagram, positions nodes, draws connectors, and controls canvas overflow.

Prop	Type	Default	Description
`align`	`"start" \| "center"`	`"start"`	Cross-axis alignment of sequential nodes.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction in which sequential nodes advance.
`connector`	`"orthogonal" \| "spline"`	`"orthogonal"`	Geometry used to draw connections between nodes.
`canvas`	`boolean`	`true`	Enables drag and wheel panning when content overflows.
`padding`	`{ x?: number; y?: number }`	`{ x: 16, y: 64 }`	Space around the measured diagram, in pixels.
`onOverflowChange`	`(overflow: FlowOverflow) => void`	`undefined`	Runs when horizontal or vertical overflow changes.
`default slot`	`slot`	`—`	Flow.Node, Flow.Parallel, or Flow.List children.

Flow.Node

Prop	Type	Default	Description
`id`	`string`	`generated`	Stable DOM and connector identifier. Generated when omitted.
`disabled`	`boolean`	`false`	Marks the node and its connected paths as inactive.
`unstyled`	`boolean`	`false`	Removes Kappa's node surface styles.
`default slot`	`slot`	`—`	Node content.

Flow.Parallel

Prop	Type	Default	Description
`align`	`"start" \| "end"`	`"start"`	Cross-axis alignment of branches with different dimensions.
`default slot`	`slot`	`—`	Flow.Node or Flow.List branches.

Flow.Anchor

Prop	Type	Default	Description
`type`	`"start" \| "end"`	`both`	Selects an outgoing (start) or incoming (end) attachment point. Omit for both.
`default slot`	`slot`	`—`	Custom node region used as the attachment point.

Parts

Part	Element	Description
`Flow.Root`	`div`	Measures, lays out, connects, and pans the diagram.
`Flow.Node`	`li`	One measured workflow node.
`Flow.Parallel`	`li > ul`	A group of branches laid out in parallel.
`Flow.List`	`li > ul`	A sequential branch nested in a parallel group.
`Flow.Anchor`	`div`	A custom outgoing or incoming connector attachment point.

Exports

Export	Description
`Flow`	Compound root with Root, Node, Parallel, List, and Anchor parts.
`FlowRoot / FlowNode / FlowParallel / FlowList / FlowAnchor`	Named component exports.
`FlowRootProps / FlowNodeProps / FlowParallelProps / FlowListProps / FlowAnchorProps`	Public prop contracts.
`FlowAlign / FlowOrientation / FlowConnectorType / FlowParallelAlign / FlowAnchorType`	Supported layout values.
`FlowPadding / FlowOverflow`	Canvas padding and overflow value contracts.
`FLOW_DEFAULT_*`	Default layout constants.