Design flat state machines with a visual map, ordered events, typed guards and effects. Simulate event sequences, inspect transition coverage and export a runnable JavaScript module, diagram or transition CSV.
Visual state mapEvent simulator & coverageRunnable JavaScript export
○ → ◉STATES · EVENTS · RULES
From an idea to a usable result
Start with order fulfillment or upload retry logic, or create a new machine and add an initial state.
Create states and ordered transitions. Choose event names, destinations, typed guards and effects. State entry/exit effects are available in Properties.
Send events in Simulate or run a line-separated sequence. Inspect live values, step backward and review transition coverage.
Resolve broken references and rule errors, save your editable model and export a JavaScript module, SVG/PNG diagram, transition CSV or simulation trace.
What to expect
Flat, synchronous machines with one active state: up to 100 states, 400 transitions and 30 typed variables. No hierarchical/parallel states, async services, event payloads, external actions or timers. The first matching transition wins. Simulations allow 1,000 events and retain the last 100 reversible steps. Projects: 8 MiB. Transition CSV imports require from,event,to headers.
Processing happens in your browser. Save a project before closing the page. Optional drafts stay in this browser. Public pages include advertising and optional analytics under our privacy policy.
Using State Machine Designer
Design flat state machines with a visual map, ordered events, typed guards and effects. Simulate event sequences, inspect transition coverage and export a runnable JavaScript module, diagram or transition CSV.
Start with order fulfillment or upload retry logic, or create a new machine and add an initial state.
Create states and ordered transitions. Choose event names, destinations, typed guards and effects. State entry/exit effects are available in Properties.
Send events in Simulate or run a line-separated sequence. Inspect live values, step backward and review transition coverage.
Resolve broken references and rule errors, save your editable model and export a JavaScript module, SVG/PNG diagram, transition CSV or simulation trace.
Example
Start with order fulfillment or upload retry logic, or create a new machine and add an initial state.
Questions & answers
What happens when more than one transition matches?
Transitions are checked in their listed order. The first matching event and guard wins. Move a transition earlier or later to change priority.
When do effects run?
After a transition is selected, source exit effects run first, then transition effects, then destination entry effects. A failed numeric effect leaves the prior state unchanged.
Can I use the JavaScript export in an application?
Yes. Import createMachine from the downloaded module, create an instance, send named events and read snapshots. The generated interpreter is synchronous and has no external side effects. Review and test the model for your application.
Does transition coverage prove the machine is correct?
No. It counts transitions taken in the current simulation. Different variable combinations and event sequences can still reveal issues.
