Skip to content

v1.5.0 — MnWorkflowOrchestrator

Choose a tag to compare

@Roberdan Roberdan released this 10 Apr 17:24
· 65 commits to main since this release
fc0154b

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