Tutorial: A four-state traffic light

May 5, 2026 · View on GitHub

A short walkthrough that builds a four-state traffic light from scratch: the three colors plus an Off state. By the end you will have used all three of jssm's arrow types (->, =>, ~>), named actions, and the array-notation shortcut for collapsing repeated edges.

At any time, you can take the code and put it into the graph explorer to mess with it as you see fit.

 

 

0: Lights always have an off state

Our light will start in the Off state, with the ability to switch to the Red state.

Since that's a normal, not-notable thing, we'll just make it a regular -> legal transition.

Off -> Red;

We will give that transition an action, and call it TurnOn.

Off 'TurnOn' -> Red;

So far, our machine is simple:

 

 

1: Traffic lights have a three-color cycle

The main path of a traffic light is cycling from Green to Yellow, then to Red, then back again. Because this is the main path, we'll mark these steps => main transitions.

Off 'TurnOn' -> Red => Green => Yellow => Red;

We will give those all the same action name, Proceed, indicating "next color" without needing to know what we're currently on.

Off 'TurnOn' -> Red 'Proceed' => Green 'Proceed' => Yellow 'Proceed' => Red;

Machine's still pretty simple:

 

 

2: Traffic lights can be shut down

We'd also like to be able to turn this light back off. Because that's expected to be a rarity, we'll require that it be a ~> forced transition.

We could write

Off 'TurnOn' -> Red 'Proceed' => Green 'Proceed' => Yellow 'Proceed' => Red;
Red ~> Off;
Yellow ~> Off;
Green ~> Off;

But that takes a lot of space even with this short list, so, instead we'll use the array notation

Off 'TurnOn' -> Red 'Proceed' => Green 'Proceed' => Yellow 'Proceed' => Red;
[Red Yellow Green] ~> Off;

And we'd like those all to have the action TurnOff, so

Off 'TurnOn' -> Red 'Proceed' => Green 'Proceed' => Yellow 'Proceed' => Red;
[Red Yellow Green] 'TurnOff' ~> Off;

Machine's still not too bad:

 

 

What's next

That's the bulk of the language. There are other features (hooks, validators, styling, history, data) but you now know how to write a state machine.