Flow Diagram

Auto-laid-out flowchart: steps, decisions, edge labels. Pro · Charts and analytics › Diagrams

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add flow-diagram

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { FlowDiagram } from 'valyro-ui-pro';

Prop	Type	Default
`nodes` *	`FlowDiagramNode[]`		Steps and decisions.
`edges` *	`FlowDiagramEdge[]`		Connectors between them; the layout follows their direction.
`direction`	`'right' \| 'down'`	`'right'`	Flow left to right (default) or top to bottom.
`ariaLabel` *	`string`		Accessible name; the diagram is also described as a list of connectors.
`labels`	`Partial<FlowDiagramLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Sequence Diagram — Sequence diagram: participants, lifelines, calls and responses
Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages
Donut Chart — Donut charts
Treemap — Hierarchies as areas, with drill-down
Funnel Chart — Conversion funnels
Sankey Chart — Flow diagrams between stages