Pipelines & workflows
MSM patternWorkflow Canvas
A controlled React Flow canvas with branded nodes, branch labels, viewport controls, and a readable Steps view.
When to use it
Use React Flow through Workflow Canvas for a controlled automation graph. Pass native nodes, edges, and change callbacks. The caller owns graph validity, persistence, and execution. Use onNodeOpen for an inspector; Steps exposes every node and labeled connection without panning. Read-only mode prevents node movement and new connections. The component imports React Flow styles.
Build an enquiry follow-up
Enquiry automation
A warm welcome
Keep every new family moving toward their first lesson.
Draft · Synthetic preview
1 awaiting setup
5 steps · 4 connections
Drag to arrange. Connect steps using their ports. Use Steps for a readable outline.
Loading, failure, and empty
Loading workflow
Workflow unavailable
The steps could not be loaded.
Usage
Use the Code tab to copy a complete example. MSM pages import shared components from @msm/ui; changes to those components appear here and in the application.