How to use it

Load the demo flow and pan or zoom the canvas to orient yourself.
Select a node to inspect IDs, descriptions, and branch metadata in the properties panel.
Use the toolbar to add sequential steps, branches, or expand supported branch nodes.
Toggle runtime highlight to see how execution might travel through the current structure.

When teams reach for it

Sketch onboarding or approval flows before wiring them into production orchestration.
Explain branching logic to teammates without scrolling through nested config files.
Prototype how runtime highlighting could help operators debug stuck flows.

What kind of flows does it model?: It focuses on structured, tree-shaped flows similar to SFC drafts: sequential steps, condition nodes, and explicit branches—not a general-purpose whiteboard.
Can I import my own production flow?: Not in this playground release. The page ships with a demo tree so you can explore editing mechanics without connecting to a backend.
What does runtime highlight show?: A illustrative pass over the demo graph so you can discuss execution order and branch joins—it's a visual aid, not a live production trace.
Can I export JSON or code?: No export yet. The tool is for visualization and hands-on editing practice inside the browser session.
Does it work on mobile?: The layout is responsive, but dense editing is most comfortable on a desktop-sized screen with a pointer.

Other playground tools

Jump to another experiment when you're done rearranging nodes.