They're very powerful and they're one of the foundational kinds of ideas that really helped put us where we're at today in terms of computers and in terms of technology. It is definitely worth your time to research them. There's going to be some similarities and state machine diagrams were created with the high-level state machine idea in mind. I did want to just make that distinction and also give the recommendation to learn what state machines are from a pure computer science perspective.

What is our goal when we're building a state machine?

The name implies a lot and what we're essentially trying to do is visualize what our application (or what a feature of our application) will look like and how it can transition from one state to another state. This could be as low level as being able to represent what a button looks like or what actions can be performed on a button based on how the user's role is set up. It can be that low level or it can be a very high-level kind of concept where it's similar to an activity diagram. Where you can see where a user can go into one page and they can change into another. The one thing that I want to point out when I was originally learning UML, I had a very hard time distinguishing state machines from activity diagrams. They both deal with behavior, however, there is a very subtle difference. That is that an activity diagram works a little bit more like a flow chart, you can have a user that goes to one page and they go to another page, they can be asked these questions and different behavior ensues. State machine cares more about the different actions that can change a user's state.

A great example would be if a user goes to a registration page and they fill it out, then the next state may be having a different type of role for the user or their user state change. They used to be a visitor and now they're a current user, it may seem similar and there definitely are similarities but that is a subtle difference between the two.

Now in this guide, we're going to talk about each one of the elements that make up state machines. So we're going to talk about

• entry points
• choices
• constraints
• states
• transitions.

The entry point is pretty much what you probably think it is, it is that large filled in black dot and that is the start. If you're building a web or a mobile application it's when the user gets to the page or sees the screen. If you're building an API or something like that, it's when the request comes in and they pass the information in. That's the start of the system and that black dot is how it's represented.

Choices are where questions are being asked. Right here we have a choice on a visitor. If a visitor comes to the site and they check to see if the form was submitted or not. If the form was submitted, they are converted and they're no longer a visitor. Now they're a converted user. If the form is not submitted, their state does not change. You see how the line goes to the choice and then it gets redirected? If the constraint is no, then their state has not changed. They are still a visitor, choices are represented by that 45-degree angle Square

Moving down the line, we have constraints, which we already talked about and we are going to use the same example. The constraint on this current slide is the "Yes" and the "No." That is a way of being able to ask, in this case of the form was submitted or not. In other diagrams that we've worked through, the constraint was also called a "guard." So this is a submitted form, they either submitted it or they didn't. However, there are times and scenarios where you're going to have additional items, so it's not just going to be as easy as did they submit the form or not. It may be something where they logged in and the system checked to see what kind of user they are, if they're an admin then they're going to be shown this page if they're not an admin they're going to be showed shown a different dashboard.

Once again, you can see there are some similarities between the state machine diagram and an activity diagram. It's very important to keep on reminding yourself of what the main goal is, the main goal is to visualize the state of whatever object we're trying to follow

Moving down the line, and keeping our same example, we have states. The state is obviously one of the most important parts of the entire diagram, right here they are represented by the rounded edge rectangle. We have two states here, we have a user that is a visitor and a user that has been converted. That leads us to the transition.

The transition is how you get from one state to another, that's represented by a line with an arrow showing the direction of that transition. You can also have other items, like choices, that are placed in-between those. That's a very common practice, there's not really any point in having one state lead automatically to another (except in some rare scenarios). There's typically something that you're checking for, maybe some value they have to enter or something specific about their account. If we're talking about users here that allows them to transition from one state into the next one.

Those are the key elements that make up a state machine diagram. In the next guide, we're going to look at how we can wrap the whole thing up and build one.