UML state diagrams with draw.io

https://about.draw.io/uml-state-diagrams-with-draw-io/

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.

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.

 UML state diagrams with draw.io

uml

相关推荐