Design System Interaction with Sequence Diagram

Key Note

Why this matter?

A sequence diagram simply depicts interaction between objects in a sequential order i.e. the order in which these interactions take place.

We can also use the terms event diagrams or event scenarios to refer to a sequence diagram. Sequence diagrams describe how and in what order the objects in a system function(v).

These diagrams are widely used by businessmen and software developers to document and understand requirements for new and existing systems.

A sequence diagram (with Draw.io)

image-1623333072296.png

A sequence diagram code (with PlantUML)

@startuml
Alice -> Bob: Authentication Request

alt successful case

    Bob -> Alice: Authentication Accepted

else some kind of failure

    Bob -> Alice: Authentication Failure
    group My own label
    Alice -> Log : Log attack start
        loop 1000 times
            Alice -> Bob: DNS Attack
        end
    Alice -> Log : Log attack end
    end

else Another type of failure

   Bob -> Alice: Please repeat

end
@enduml

image-1623333521055.png

A sequence diagram rendered image (with PlantUML)

image-1623333231636.png

with skin

@startuml
!includeurl https://raw.githubusercontent.com/TheIconic/PlantUML-skins/master/src/sequence/sequence.iuml

Alice -> Bob: Authentication Request
.
.
.

@enduml

Check your understanding

What is?

  • Actor

  • Lifeline

  • Frame

  • Message

    • Synchronous messages

    • Asynchronous messages

    • Create message

    • Delete message

    • Self message

    • Reply message

    • Found message

    • Lost message

  • Guards

  • Control

  • Entity

  • Boundary

How to ?

  • Illustrate if-else scenarios?

  • Illustrate an exceptions?

  • Illustrate an condition must passed before an API call (e.g email validation)?

  • Change the color everything (style) for fun

    • with draw.io?

    • with plantUML?

Reference

drawio-app.com/create-uml-sequence-diagrams-in-draw-io/

geeksforgeeks.org/unified-modeling-language-uml-sequence-diagrams/

developer.ibm.com/technologies/web-development/articles/the-sequence-diagram

plantuml.com/sequence-diagram