More on UML Sequence Diagrams
System Behaviour can be described using sequence diagrams. These can help visualizing the workflow and how components work with each other. be sure to understand the main components of sequence diagram (participants , lifelines, boxes, dividers and interactions)
and how to design it. As you read this section, keep in mind that sequence diagram diagram cares about HOW, not WHAT.
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 dierent 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