CS302: Software Engineering (2021.B.01)

Diagramming your application steps

Objectives 

• Learn how to application interactions in a sequence diagram 
• Learn what components are in a sequence diagram

UML Sequence Diagrams 

Lays out the different interactions of some major components in the application

Use Case Diagram components 

• Participants - components and actors in your application 
• Actors - a specific type of participant but is a user normally 
• Database - another specific type of participant 
• Divider - used to group sections of similar functionality together 
• Lifelines - when a participant is activated to depict state 
• Boxes - used to logical grouping of components

PlantUML Sequence Diagram Documentation 

Documentation: http://plantuml.com/sequence-diagram

Diagram Tutorial

Simple Sequence Diagram Example

Simple Sequence Diagram Code

@startuml
hide footbox

actor User
participant "Web Application"

User -> "Web Application" : Authentication Request
"Web Application" --> User : Authenticated

@enduml

Using Dividers

Sequence Diagram Dividers Example

Sequence Diagram Dividers Code

@startuml
hide footbox

actor User
participant "Web Application"

== Authentication ==
User -> "Web Application" : Authentication Request
"Web Application" --> User : Authenticated

== Edit Profile Page ==
User -> "Web Application" : Visit Profile Page
User -> "Web Application" : Change name on profile page
"Web Application" --> User : Replies with a successful edit

== User Log out ==
User -> "Web Application" : Logs out of the page
"Web Application" --> User : Successfully logged out

@enduml

Using Boxes

Sequence Diagram Box Example

Sequence Diagram Box Code

@startuml
hide footbox

actor User

box "Back End Services"
participant "Web Application"

User -> "Web Application" : Request Authentication
"Web Application" --> User : Authenticated

@enduml

Using Lifelines for State

Sequence Diagram Lifeline Example

Sequence Diagram Lifeline Code

@startuml
hide footbox

actor User
participant "Web Service"

User -> "Web Service" : Requests authentication
activate "Web Service"
"Web Service" --> User : Authenticated
User -> "Web Service" : Logs out
destroy "Web Service"

@enduml

A More Complete Example

UML Example: E-commerce Diagrams

UML Example: E-commerce Diagram PlantUML Code

@startuml
hide footbox

actor User
box "Backend Services"
participant "E-commerce Application"
database "E-commerce Database"

== User Login ==
User -> "E-commerce Application" : Sends username and password to log in
"E-commerce Application" -> "E-commerce Database" : Matches username and password
"E-commerce Database" --> "E-commerce Application" : Sends back a matched record

activate "E-commerce Application" #FFBBBB
"E-commerce Application" --> User : Sends back user session

== User Adds Product to Card ==
User -> "E-commerce Application" : Adds products to cart
activate "E-commerce Application" #DarkSalmon
"E-commerce Application" -> "E-commerce Database" : Build relationship between a cart with the products
"E-commerce Database" --> "E-commerce Application" : Responds that rows for the products are added to th
"E-commerce Application" --> User : Shows the user the cart page
== User Purchases Items ==
User -> "E-commerce Application" : Checks out to purchase the items in the cart
deactivate "E-commerce Application"

== User Logs Out ==
User -> "E-commerce Application" : Logs out of the application
"E-commerce Application" -> "E-commerce Database" : Expires the user session stored in the database
destroy "E-commerce Application"

@enduml

Summary

• Sequence diagrams help you visualize the workflow and high level implementation of how components work with each other