Repository navigation
v1.5.0 — MnWorkflowOrchestrator
New Component: MnWorkflowOrchestrator (#59)
Generic, fully parameterizable workflow visualization component for the Maranello design system. Renders any workflow topology in real-time — agent meshes, data pipelines, approval flows, CI/CD stages.
Highlights
- 4 layout algorithms: circular, horizontal pipeline, vertical flow, auto (force-directed)
- Real-time status transitions: idle → active → thinking → done → error with smooth SVG animations
- Animated particles on active edges
- Phase/progress bar showing current workflow step
- Per-node/edge customization: color, icon, sublabel, badge, directed arrows, labels
- Zero dependencies — pure SVG + CSS animations
- Accessible & i18n-ready
Usage
import { MnWorkflowOrchestrator } from '@/components/maranello'
<MnWorkflowOrchestrator
nodes={[
{ id: 'ingest', label: 'Ingest', status: 'done' },
{ id: 'validate', label: 'Validate', status: 'active' },
{ id: 'transform', label: 'Transform', status: 'idle' },
]}
edges={[
{ from: 'ingest', to: 'validate', active: true },
{ from: 'validate', to: 'transform' },
]}
layout="circular"
phase={{ current: 2, total: 3, label: 'Validation' }}
/>Full Changelog: v1.4.3...v1.5.0