Charts — Process Flow Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/charts/process-flow-chart

ProcessFlowChart

charts

import { ProcessFlowChart } from "semiotic/physics"

Wraps: StreamPhysicsFrame

ProcessFlowChart is the multi-body workflow HOC: ordered stages become region effects (route force, capacity, pressure, portals, absorb sinks). Stages withcapacity install live FIFO queue controllers (liveCapacity, default true) that process work units per second and release bodies — not just drag theater. Optional feature groups complete only when every member is absorbed, and the settled projection is a stage-count bar strip. Use it for review queues, triage, merge pipelines, and other capacitated processes. For a single compound plan degraded by timed gates, preferGauntletChart.

Review regimeFeature groupsSettle first paint

Flagship narrative:Merge Pressure — AI multiplies PR emission and the bottleneck migrates to review, with all-members feature completion.

Prop	Type	Required	Default	Description
`data`	array	—	`[]`	Work-item rows. Each row becomes one physics body.
`stages`	array	Yes	—	Ordered stages: { id, label?, force?, damping?, capacity?, pressure?, portal?, absorb?, share? }.
`stageAccessor`	string \| function	—	`"stage"`	Current stage id for each work item.
`idAccessor`	string \| function	—	`id field`	Stable work-item id.
`groupBy`	string \| function	—	—	Optional feature/group key. Groups complete when all members reach an absorb stage.
`groupLabelAccessor`	string \| function	—	—	Display label for group anchors.
`workAccessor`	string \| function	—	—	Work-units field stamped for capacity metadata.
`radiusAccessor`	string \| function	—	—	Optional per-body radius in pixels.
`ballRadius`	number	—	`6`	Fallback body radius.
`colorBy`	string \| function	—	—	Categorical field used to color bodies.
`groupCompletion`	"allAbsorbed" \| "none"	—	`allAbsorbed when groupBy is set`	How feature groups report completion.
`groupAnchorAlong`	number	—	`0.55`	0–1 position along the lane for group anchors.
`showProjection`	boolean	—	`true`	Draw settled stage-count bars.
`showChrome`	boolean	—	`true`	Draw stage labels, capacity notes, and group anchors.
`chromeOptions`	object	—	—	processChrome options: outlineStages (stroke-only bays), showFlowSpine, showStageCounts, showCapacityBadges, showGroupSockets.
`liveCapacity`	boolean	—	`true`	Install live FIFO capacity-queue controllers for stages with capacity (drains work at unitsPerSecond).
`onCapacityChange`	function	—	—	Receives CapacityQueueSnapshot[] (queueDepth, processedCount, remainingWork) each tick while capacity queues run.
`bodyLimit`	number	—	—	Soft live-body budget; evicts oldest when exceeded (stream / sediment pattern).
`bodyMark`	string	—	`circle`	Default mark: circle \| halo \| faceted \| pill \| diamond \| square. Per-row via datum.__physicsMark.
`selection`	object	—	—	Shared selection for dim/highlight without relayout.
`settle`	boolean	—	`false`	Start bodies at stage targets for a calmer first paint.
`seed`	number	—	`1`	Deterministic placement seed.
`size`	array	—	`[900, 420]`	[width, height] in pixels.
`paused`	boolean	—	`false`	Pause the simulation.
`tooltip`	boolean \| function \| object	—	`true`	Enable the default body tooltip, pass a custom renderer/config, or set false to disable.
`frameProps`	object	—	—	Advanced StreamPhysicsFrame props.