Statecharts in 2 minutes
Statecharts are having a moment, thanks to Lauren Tan (@poteto) who shipped a /statechart skill in pstack that has your agent draw statecharts from formal models, paired well with her /create-formal-verification skill (formal methods are also having a moment) for finding real bugs. Love to see it.
Besides talking about statecharts for 10+ years, I also wrote these (by hand!) if you have time to spare:
So what is a "statechart"?
Statecharts are state machines++
Every state machine is already a statechart, and every statechart can be flattened to a state machine. Statecharts just give you better ways to organize more complex state machines so that they're easier to read & manage, without it turning into a flying spaghetti monster. (FSM, get it?)
As much as I like state machines, they're flat, and flat doesn't scale with complexity. Statecharts solve the big scaling problems:
-
💥** Compound state**s solve the* transition explosio*n problem
-
💥** Parallel state**s solve the* state explosio*n problem
Take a coffee machine with idle → grinding → brewing → ready states. Now add a power button. In a normal state machine, every single state needs its own POWER_OFF transition. Easy to see how the transitions explode.
Instead, you can group them in a compound state and put a single POWER_OFF on the parent. Parent states handle transitions if their children don't. Same behavior, much fewer transitions.
Flat states
Compound states
Now take a media player that can be playing or paused, and it can be muted or unmuted. Those are independent "regions" of states. In a flat state machine, you need a state for every combination: playing+muted, playing+unmuted, paused+muted, paused+unmuted... and the problem gets worse with more regions. That's combinatorial state explosion, and the reason I rail against using booleans for state 👻
Enter parallel states (aka orthogonal states): they let independent regions live side-by-side. It's just a much simpler way of representing the same thing, with fewer states and transitions.
Flat state machine with awkward combo-states
Parallel states with fewer transitions and no awkward combo-states
Just like with the actor model and state machines, this is nothing new. Statecharts were invented by David Harel in 1987 in the paper "Statecharts: A Visual Formalism for Complex Systems" (PDF). He designed them for avionics systems (fighter jets etc.) but more importantly to make complex, event-driven behavior both understandable AND precisely specified. That's why I like them so much.
But wait, there's more: compound and parallel states are the main defining features, but statecharts also give you:
-
History states: remember where you were inside a compound state and go back
-
Guards: only take a transition if condition is true, VERY useful
-
Entry/exit actions: run effects when entering/leaving a state, prevents "action explosion"
-
Delayed transitions: after n seconds, automatically take a transition
-
Final states: mark when a process is done
-
Invoked actors: start a separate process with lifetime bound to the state (hello again, actor model)
I created & maintain XState, a fully open-source statechart library for TS that agents know really well. It follows SCXML, the W3C statechart spec.
You can make statechart diagrams now at state.new. These aren't your everyday static Mermaid diagrams: they're executable, so you can simulate them, export them to code, and more. Also, something much better is coming soon to stately.ai 👀
Happy statecharting!
