← Lab
State machine — code drives the graph
Type the transition rules as code (FROM -> TO : event). The graph redraws instantly, then fire events and watch the current state walk it. The picture is a pure function of the text.
what you’re looking at
A state machine is a set of allowed states and the events that move between them — an order goes DRAFT → SUBMITTED → APPROVED → PAID, and nothing skips ahead. Here you write those rules and the diagram draws itself.
why it matters
Almost every real system is one: orders, payments, deploys, user onboarding. Modeling it as explicit states makes illegal jumps impossible and bugs obvious. Interviewers love it because it shows you think in invariants, not if-statements.
try this yourself
- 1Add a line like
PAID -> DISPUTED : dispute— the graph grows a new node instantly. - 2Click the event buttons to walk the machine; the active state glows and the edge fires.
- 3Delete a transition and watch a state become unreachable.
transition rules (code) — edits redraw the graph + save to your browser
states
6
transitions
6
current
—
events here
0
fire:no events from — (terminal state)
the machine (auto-laid-out — drag · zoom)
what just happened (say it out loud)
Run an operation to see it step by step.
사상: A state machine makes the set of legal states and moves explicit, so illegal transitions can't happen. The code you type here IS the machine — the graph is just a rendering of it, which is exactly how you'd defend the design in an interview.
▶ deep-dive videos — “finite state machine design software transitions explained”