State diagrams have been used in programming to describe the various possible states that a system can be in for decades. They also quickly show which states lead to each other, and what triggers a change of state.
Of course, you can use these diagrams for anything system or process that has various states – library books, a publishing process, even punishment and reward states for your kids. They are very similar to flow diagrams, but UML has a notation specifically for state diagrams, which they also call state machines or statecharts.
State diagrams in UML notation
The biggest difference between state diagrams and activity or interaction overview diagrams is that state diagrams do not (necessarily) show the sequence. They just show what states are possible and their entry and exit points, not when those states are entered.
State diagrams can be very complex – you can nest state diagrams, put guards (true/false) before a state, add actions triggered by a state change, and even defer events to be processed at a later time. These diagrams can get very text-heavy, and the conditions are usually written for one specific programming language. This may make the diagrams complex to look at, but it can also make programming (and testing) faster as there is less room for misunderstanding.
Components of UML state diagram
UML state diagrams use a notation that you may have already seen in our UML activity diagrams.
- Start state: A solid circle.
- End state: A solid circle with a ring around it.
- State: A rectangle with rounded corners, with the name of the action.
- Transition: Connector arrows with a label to indicate the trigger for that transition, if there is one.
- State with internal activities: A state with a horizontal line, and the actions listed in the bottom half.
- Composite state: A state with a horizontal line, and a nested state diagram (or link to another draw.io page) in the bottom half.
- Guards or conditions: A diamond.
- Fork: A thicker line with one transition incoming and two or more outgoing.
- Join: A thicker line with more than one transition incoming and only one outgoing.
Tip: UML 2 state diagrams use the clear black/white shapes, and UML 1 has yellow shapes with a red outline. I personally find UML 2 easier to read.