The traditional fully 2-dimensional structure of UML state diagrams is too much rope to hang yourself with. There is no standard drawing order or pattern; some designers start from the top, some from the middle, and others just “go with the flow”. Transitions can originate at any state edge and go in any direction, so they are easy to miss in any nontrivial diagram because you don’t know exactly where to look.
Old Way of Depicting Hierarchy
In many ways, UML state diagrams resemble the old way of drawing tree structures (e.g., a family tree) with the root in the middle and branches fanning out in all directions.
This old way is like trying to mimic the “natural” topology of states and transitions, like the following physical map of the London metro (the “London tube”):
Modern Way of Depicting Hierarchy
But today nobody draws hierarchical structures that way anymore. If you look at your file-system explorer you will see the hierarchical structure of directories and files arranged linearly, top-to-bottom.
This is similar to the modern maps of transportation systems, which was first created for the London tube by Harry Beck in the 1930s.
Linear Statechart Notation
The “linear statechart notation” that I would like to propose here is based on the same idea. The goal of the “linear statechart notation” is to make the diagrams more structured and legible by reducing the use of horizontal dimension.
As an example of the “linear notation” consider the state diagram shown in the screen shot from the free QM tool. (This statechart shows the lifecycle of a space ship in a simple “Fly ‘n’ Shoot” game.)
First please take a look at the hierarchical model explorer pane on the left-side of the screen. You see the Ship object, its attributes and methods followed by the Statechart with the hierarchically arranged elements below. Now, please take a look at the state diagram in the middle. You will see the one-to-one correspondence between the diagram and the explorer view. Please note that the state diagram is essentially 1-dimensional.
"Linear" Diagram Matches the Code
Finally, please take a look at the right-hand side, which is a screenshot of the generated code in the Eclipse-based tool (Atollic TrueSTUDIO in this case). The generated code corresponds to the state “flying”, which is highlighted in the diagram.
Interestingly, the code itself is an extension of the “linear notation” that zooms into the “flying” state. Again, just go from the top to bottom in the code, inside the “flying” state in the diagram, and in the “flying” element in the model explorer. You see exactly the same elements represented in the same order, from the entry action, through the events TIME_TICK, PLAYER_TRIGGER, DESTROYED_MINE, HIT_WALL, and HIT_MINE. I think this consistency and tracibility is great.
I’d like to hear your comments about the proposed notation. I also hope that this post explains a bit how the free QM tool works and generates code.