Flow

Implemented Layout

Directed diagrams with branches, SVG connectors, custom anchors and responsive local scrolling.

Kumo reference: kumo-ui.com/components/flow/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Sequential flow

Receive request

Validate

Respond

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" nodes=audit_flow_nodes edges=audit_flow_edges only %}

Parallel branches

Receive request

Cache

Origin

Respond

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" columns=audit_flow_columns edges=audit_flow_parallel_edges only %}

Vertical flow

Receive request

Validate

Respond

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" nodes=audit_flow_nodes edges=audit_flow_edges direction="vertical" only %}

Vertical parallel flow

Receive request

Cache

Origin

Respond

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" columns=audit_flow_columns edges=audit_flow_parallel_edges direction="vertical" only %}

Custom node content

Request

Inspect incoming traffic.

Security checks

Apply configured policies.

Delivery

Return the response.

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" nodes=audit_flow_custom edges=audit_flow_edges only %}

Centered branches

Receive request

Cache

Origin

Respond

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" columns=audit_flow_columns edges=audit_flow_parallel_edges align="center" only %}

Complex flow

Start

Parse request

Authentication

Cache lookup

Usage limits

Merge results

Send response

Record metrics

End

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Multi-stage request processing" columns=audit_flow_complex edges=audit_flow_complex_edges only %}

Custom anchors

Receive request

Validate

Respond

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" nodes=audit_flow_nodes edges=audit_flow_anchors only %}

Scrollable large diagram

Step 0

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" nodes=audit_flow_many edges=audit_flow_many_edges only %}

Disabled node

Receive request

Temporarily disabled

Respond

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" nodes=audit_flow_disabled edges=audit_flow_edges only %}

End aligned branches

Receive request

Cache

Origin

Respond

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Request processing" columns=audit_flow_columns edges=audit_flow_parallel_edges align="end" only %}

Nested branch lists

Start

Branch A1

Branch A2

Branch B

Branch C

End

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with label="Nested branch sequences" columns=audit_flow_nested edges=audit_flow_nested_edges only %}

Dot and tall nodes

Security checks

A taller node with details.

Show template

{% load wdj %}
{% include "wdj/components/flow.html" with nodes=audit_flow_shapes edges=audit_flow_edges label="Custom node shapes" only %}

API Reference

Prop	Type	Default	Description
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
nodes	list[dict]	unset	Flow nodes: key, label, optional description/icon/disabled/href.
columns	list[dict]	unset	Flow: list of {nodes: [...]}; Table: key/label/width/align/sortable/mono/nowrap/hidden_label, optional sticky='left' or 'right'.
edges	list[dict]	unset	Flow connections: source/target keys, optional source_anchor/target_anchor (left/right/top/bottom).
direction	string	unset	Direction; pass the documented value shown in the examples.
align	string	start	Align; pass the documented value shown in the examples.
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract