Installation

Barrel

import { Flow, FlowAnchor, FlowList, FlowNode, FlowParallel, FlowRoot } from 'kumo-svelte';

Granular

import { Flow, FlowAnchor, FlowList, FlowNode, FlowParallel, FlowRoot } from 'kumo-svelte/components/flow';

Usage

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

<script lang="ts">import { Flow } from "kumo-svelte";</script>    <Flow>      <Flow.Node>Step 1</Flow.Node>      <Flow.Node>Step 2</Flow.Node>      <Flow.Node>Step 3</Flow.Node>    </Flow>

Examples

Sequential Flow

A simple linear flow with nodes connected in sequence.

Parallel Branches

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

Custom Node Styling

Use the bare prop to remove the default card styling, then pass your own content and classes inside the node.

Centered Alignment

Use the align prop to vertically center nodes. This is useful when nodes have different heights.

Complex Flow

Combine sequential and parallel nodes to build complex workflows.

Custom Anchor Points

By default, connectors attach to the center of each node. Use Flow.Anchor around custom content to specify attachment points. The type prop controls whether the anchor serves as a "start" point (where connectors leave) or "end" point (where connectors arrive).

Panning Large Diagrams

When a diagram exceeds its container, Flow automatically enables panning. Drag to pan the viewport, or use the scroll wheel. Scrollbars appear on hover to indicate available scroll area.

Disabled Nodes

Use the disabled prop on a node to visually indicate it's inactive. Connectors linking to disabled nodes are rendered with reduced opacity.

Parallel Node Alignment

Use the align prop on Flow.Parallel to control how nodes with different widths are aligned. Use "start" (default) to align left, or "end" to align right.

Known Issue: Sidebar / Layout Shift

Toggling the sidebar shifts the Flow container's viewport position. Because connector coordinates are computed from stale getBoundingClientRect values stored in state (captured before the layout shift), the connector lines jump out of alignment until the next remeasure is triggered. Scroll the page while the sidebar is open to hit the same bug via the scroll path.

Other Examples

Nested Node Lists in Parallel

Use Flow.List inside Flow.Parallel to create parallel branches where each branch contains a sequence of connected nodes.

Components

Flow

The root container for flow diagrams. Provides panning and scrolling for large diagrams.

Flow.Node

A single node in the flow diagram. Renders as a styled card with automatic connector points. Use bare and class to customize the element chrome.

Flow.Anchor

A component that marks a custom attachment point for connectors within a Flow.Node. Use this to control exactly where connector lines attach instead of the default node center by wrapping the anchor point content.

Flow.Parallel

A container for parallel branches. Child Flow.Node components are displayed in parallel with junction connectors.

Flow.List

A container for a sequence of Flow.Node components with automatic connectors between them. Use inside Flow.Parallel to create branches with multiple sequential steps.