User - Sequence Diagram

   
   
 requirement  UML  
 
Article Series

A simple user management showcase, step by step with help of ChatGPT.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Starting from Requirement.

Questions?

  • How about Sequence Diagram?

  • Would you mind writing this sequence diagram below into PlantUML format?

  • Would you mind writing down the above Sequence Diagrams for user management in a site admin in PlantUML format for use with draw.io?

One question at a time.

Sequence Diagram: Master

Questions?
How about Sequence Diagram?
Response
Here’s an example of a sequence diagram for the user management system: 
+----------------------------------------------------+
|                 User Management System             |
+----------------------------------------------------+
|              <<sequence diagram>>                  |
+----------------------------------------------------+
|                                                    |
|     Admin                                          |
|        |                                           |
|        v                                           |
|   [ Manage Users ]                                 |
|        |                                           |
|        v                                           |
|  <<create>>UserController                          |
|        |                                           |
|        v                                           |
|  [ add_user(user_info) ]                           |
|        |                                           |
|        v                                           |
| <<create>>UserService                              |
|        |                                           |
|        v                                           |
| [ validate_user_info(user_info) ]                  |
|        |                                           |
|        v                                           |
|   [ Add User to Database ]                         |
|        |                                           |
|        v                                           |
|         Database                                   |
|                                                    |
+----------------------------------------------------+

Explanation:

  • The sequence diagram shows the sequence of interactions between the actors and the system components.
  • In this case, the Admin actor is interacting with the system to add a new user to the database.
  • The sequence starts with the Admin invoking the “Manage Users” use case.
  • The use case creates an instance of the UserController class, which is responsible for handling user-related operations.
  • The UserController then calls the “add_user” method of the UserService class, which is responsible for validating user information and adding the user to the database.
  • The UserService class validates the user information and then calls the “Add User to Database” operation.
  • Finally, the database adds the user to the user table.

Note: This is just an example, and the specific details of the sequence diagram may vary based on the specific requirements and architecture of your system.

I really have no idea why the textual diagram look like above result. I guess I need the image representation.

PlantUML

So I ask again.

Questions?

Would you mind writing this down into PlantUML format?

  ...
  ...
Response
Sure, here’s the PlantUML code for the sequence diagram: 
@startuml
title User Management System

actor Admin
Admin -> [Manage Users]: selects
[Manage Users] -> UserController: create
UserController -> [add_user(user_info)]: call
[add_user(user_info)] -> UserService: create
UserService -> [validate_user_info(user_info)]: call
[validate_user_info(user_info)] -> [Add User to Database]: call
[Add User to Database] --> Database

@enduml
Sure, here’s the PlantUML code for the sequence diagram:

The generated diagram from draw.io can be shown as below

User Management: PlantUML: Sequence Diagram

You can obtain the source SVG image here:

Confused

This image doesn’t look like any sequence diagram I ever draw. Is it beacuse I never have formal IT education? My lack of experience? I guess I have to dig a little deeper.

Sequence Diagram: Detailed

So I ask again.

I accidentaly ask a question that breakdown the master sequence diagram above into detail below. For each response, the generated diagram from draw.io is shown.

Questions?
Would you mind writing down the above Sequence Diagrams for user management in a site admin in PlantUML format for use with draw.io?
Response
Sure, here is the PlantUML code for the Sequence Diagrams for User Management:

User Registration Sequence Diagram

@startuml
title User Registration

actor User
participant "User Registration Form" as Form
participant "User Registration Controller" as Controller
participant "User Database" as DB

User -> Form : Open registration form
Form -> User : Display registration form
User -> Form : Submit registration form
Form -> Controller : Process registration form
Controller -> DB : Create user record
DB -> Controller : User created
Controller -> User : Redirect to login page
@enduml

User Management: PlantUML: Sequence Diagram: Registration

User Login Sequence Diagram

@startuml
title User Login

actor User
participant "Login Form" as Form
participant "Login Controller" as Controller
participant "User Database" as DB

User -> Form : Open login form
Form -> User : Display login form
User -> Form : Submit login form
Form -> Controller : Process login form
Controller -> DB : Retrieve user record
DB -> Controller : User record retrieved
Controller -> Form : Redirect to home page
@enduml

User Management: PlantUML: Sequence Diagram: Login

User Logout Sequence Diagram

@startuml
title User Logout

actor User
participant "Logout Controller" as Controller

User -> Controller : Click logout button
Controller -> Controller : Clear session data
Controller -> User : Redirect to login page
@enduml

User Management: PlantUML: Sequence Diagram: Logout

Update User Profile Sequence Diagram

@startuml
title Update User Profile

actor User
participant "Profile Edit Form" as Form
participant "Profile Controller" as Controller
participant "User Database" as DB

User -> Controller : Open profile edit form
Controller -> Form : Populate form with user data
Form -> User : Display profile edit form
User -> Form : Submit profile edit form
Form -> Controller : Process profile edit form
Controller -> DB : Update user record
DB -> Controller : User record updated
Controller -> Form : Redirect to profile page
@enduml

User Management: PlantUML: Sequence Diagram: Proflle

Reset Password Sequence Diagram

@startuml
title Reset Password

actor User
participant "Reset Password Form" as Form
participant "Reset Password Controller" as Controller
participant "User Database" as DB

User -> Form : Open reset password form
Form -> User : Display reset password form
User -> Form : Submit reset password form
Form -> Controller : Process reset password form
Controller -> DB : Retrieve user record
DB -> Controller : User record retrieved
Controller -> Form : Display password reset instructions
@enduml

User Management: PlantUML: Sequence Diagram: Password

User Activity Monitoring Sequence Diagram

@startuml
title User Activity Monitoring

actor User
participant "Activity Log Controller" as Controller
participant "User Database" as DB

User -> Controller : Perform activity on site
Controller -> DB : Log user activity
@enduml

User Management: PlantUML: Sequence Diagram: Monitoring

You can obtain the PlantUML schematic sources here:

Self explanatory.

Now I understand clearly. The sequence diagram looks familiar.

What is Next 🤔?

You should also consider these two in requirement:

  • Testing
  • Deploying

Consider continue reading [ User - Testing Artefact ].

Thank you for reading.