UML Sequence diagram: User login page (example)

This video will demonstrate how to make the sequence diagram for a login page.

First, we need to head over to the Gleek.io app https://app.gleek.io
Select “sequence diagram” from the dropdown.

Then we need to create our user. Just type the word “User” in the code field. Now the user needs to start interacting with the other objects in the system by visiting the “Login page”.
To show this interaction, type a hyphen, then the word “visit”, and then another hyphen. Then hit the plus key, this will trigger the activation bar for the login page and show that this object is active.

Now the user enters their username and password and hits the login button. These interactions are all messages to the login page.

The action now shifts to the “Database”. The login page sends a message with the user login data to be checked. Add a minus symbol to the arrow to remove the activation bar from the “Login page”.

The database will create and receive a self-message as it validates the user login data. Because the message is going to and from the same object, Gleek will draw a nice looping arrow.

Once the database has checked the username and password, the sequence diagram has two possible paths to take. This is where we have to separate part of the diagram with an “alt”, or alternative, operator.

Just type forward slash and alt. You can then describe this option, the alternate reality in which the “login data is correct”.
So the login data is correct, the database sends a message that the user login has been accepted. This is a reply message, so it can be shown with a dashed line. The login page will also need its activation bar triggered, don’t forget that plus symbol.
The login page will then send a self-message to instruct itself to send a reply message to the user that login was successful.
And the last step in this alternative path is that the message is sent to the user. Remember to end the activation bar with the minus symbol.

Now we have to deal with the bad alternate universe, where the login data was incorrect! For this, we’ll use an “else” operator. Type a forward slash and else.
The content and syntax for a failed login are similar to the successful login, but the resulting message sent to the user client is different. The final reply message sent to the user, in this case, is to clear the password field so that the user can try again.

It’s a sad result for our imaginary user, but hopefully, it’s helped you understand a bit more about sequence diagrams. If you liked this explanation, hit the like button.

Happy diagramming!