Draw Io State Machine Diagram
This post was originally published on June 12, 2019, and updated virtually recently on September xiv, 2020.
Land diagrams are one of those things that seem intimidating at first, but once you start using them, you'll wonder how you ever did without. Only before we go into the diagramming function, first we need to understand what a country auto is.
A land motorcar is a device that stores the condition of an object at any given time. It can simulate sequential logic, as well as model problems in various fields, including AI, maths, linguistics, and game development. A state machine can likewise change the object's status or cause other actions based on its input.
If y'all desire to understand all the possible states and show how an object gets to and from each state, you'll want to visualize it. Hence, the state diagram.
What is a land diagram?
A state diagram is a graphic representation of a state machine. It shows a behavioral model consisting of states, transitions, and actions, as well equally the events that affect these. Information technology's likewise 1 of the xiv Unified Modeling Languages (UML) used for specifying, visualizing, amalgam, and documenting software systems.
Country auto diagram template available in Cacoo
What'south the departure between a state diagram and a flowchart? Well, despite having a clearly divers first and finish point, country diagrams aren't useful for showing a progression of events because they depict transitions. Then they're better for showing shifts in behavior.
A flowchart shows the processes that alter the state of an object. A state diagram shows the bodily changes in land, not the processes or commands that created those change.
How tin a state diagram help yous?
It's useful for showing the progress of upshot-driven objects in a reactive organisation, such every bit an ATM. First, the automobile is either on or out of gild. When the card's inserted, the user enters their pin. If it'south correct, they're taken to some other set of options. If incorrect, the process is concluded.
State diagrams are as well useful for describing how an object moves through diverse states within its lifetime. For instance, the move of an academic through their career: they begin as a freshman, and then move to sophomore, junior, and then senior.
How to draw a country diagram
Each diagram usually begins with a dark circle that represents the initial country and ends with a bordered circle that represents the final state. States are denoted with rectangles with rounded corners. Each rectangle is labeled with the proper name of the state. And transitions are marked with arrows that link one state to another, showing how the states modify. Yous'll observe a run through of the near popular symbols below.
Composite country (also known as a 'nested state')
This refers to a country that encompasses various sub-states, which are nested into information technology. Sub-states are used to simplify circuitous flat state diagrams past showing that some states are only possible within a particular context. In the air toaster oven example below, the 'heating' status of the machine represents the composite/nested state.
Toaster oven country machine with entry and go out actions
Option pseudostate
This is represented past a diamond shape on the diagram. It indicates a dynamic condition that has several potential results.
An extended state machine of "cheap keyboard" with extended state variable key_count and various guard conditions
Trigger
This is a message that moves an object from state to state. In the keyboard case below, pressing CapsLock is the triggering event. If the keyboard is in the "default" state, pressing CapsLock volition crusade the keyboard to enter the "caps_locked" state. However, if the keyboard is in the "caps_locked" state, pressing CapsLock will crusade the keyboard to enter the "default" state.
UML state diagram representing the computer keyboard country machine
Event or Transition
This is when a moment triggers a shift. These are represented by labeled transition arrows. In the example in a higher place, pressing CapsLock is the event that triggers the 'default' and 'caps_locked' states.
→
Initial Land
This represents the first state in the process. It appears as a dark circle with an pointer leading from it.
⚫→
Final State (or terminator land)
This represents the object'southward terminal country. It appears equally an pointer pointing to a filled circle nested inside another circumvolve.
←
Exit indicate
A circle with an Ten through it represents the betoken at which an object escapes the land machine. The exit bespeak is used when the process is interrupted or left incomplete due to an error or issue.
Baby-sit
This is a boolean condition that must be true for a country transition to occur. If the condition is fake, the transition does non occur. It's written above the transition arrow.
Country
States represent the electric current condition of an object and appear as a rounded rectangle. In the example below, 'Closed', 'Open', and 'Deleted' are all states.
Land transition diagrams
This refers to when the object transitions from one state to another, the events that must have taken place before the transition can occur, and the activities during the life of the object.
Substate
This refers to a land independent within a composite state'due south region. In the toaster oven instance to a higher place, 'toasting' and 'blistering' are sub-states in the larger 'heating' composite state.
Country diagram examples
Source: uml-diagrams.org
Source: lucidchart.com
Final thoughts
State diagrams are an essential tool for visualizing arrangement behavior. Setting this information out in a diagram ways you tin can see an object's beliefs throughout its entire lifespan, as well as the dissimilar events that cause various transitions, at a glance.
Selection out your dedicated diagramming software — ideally 1 that has a robust library of UML templates and shapes — and brainstorm making your first state diagram today. If you're working with a squad, make sure y'all invest in software that lets you piece of work collaboratively with your team in real-time, so you can edit diagrams together, easily share with others, and get feedback right on your canvass.
Collaborate on ideas to align your team's vision in Cacoo
Source: https://cacoo.com/blog/a-simple-guide-to-drawing-your-first-state-diagram-with-examples/
0 Response to "Draw Io State Machine Diagram"
Post a Comment