A live service-flow diagram with typed nodes and edges, automatic layouts, reverse flow, proportional strokes, and a controlled editor.
Live flowReverse flowMissing dataEmptyEditor
<FlowGraphWidget config={flow} liveData={values} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { FlowGraphWidget } from '@chanrg/4ui';<FlowGraphWidget config={flow} liveData={values} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
config | FlowGraphConfig | starter graph | Normalized graph structure; nodes and edges bind to data through seriesId. |
liveData | Record<string, unknown> | {} | Caller-owned values keyed by seriesId. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- The graph exposes a concise node and flow summary; motion disappears under reduced-motion.