← DocsMeridian UI Patterns
Recipe Flow Diagram UI
A step-by-step visual pattern for displaying sequential processes, build pipelines, or multi-stage workflows with clear state indication.
01
Source
Clone repository from remote origin
02
Build
Compile with optimizations enabled
03
Sign
Attach Ed25519 signature to payload
04
Package
Bundle into distributable artifact
05
Deploy
Push to CDN and invalidate cache
States
DoneActivePending
Usage
Map each stage to a step object with a state enum. The component renders numbered indicators with color-coded status rings. Ideal for CI/CD pipelines, onboarding wizards, and license activation flows.