Introduction to UML

Neil Ernst

nernst@uvic.ca

University of Victoria

2025-10-06

What is UML?

Unified Modeling Language (UML) is a standardized visual modeling language for software systems.

• Industry standard for visualizing system design
• Helps communicate software architecture and design decisions
• Supports multiple diagram types for different perspectives

Why Use UML?

Benefits:

• Visual communication
• Common vocabulary
• Design documentation
• System understanding
• Planning and design

Common Uses:

• Requirements analysis
• System architecture
• Code generation
• Team collaboration
• Documentation

UML Diagram Types

Structural Diagrams (static view):

• Class diagrams
• Object diagrams
• Component diagrams
• Deployment diagrams

Behavioral Diagrams (dynamic view):

• Use case diagrams
• Sequence diagrams
• Activity diagrams
• State diagrams

Class Diagrams

Class diagrams show the static structure of a system:

• Classes and their attributes/methods
• Relationships between classes
• Inheritance hierarchies
• Dependencies and associations

Aside: Tooling

We will show examples using Mermaid which will be rendered in Gitlab/GitHub Markdown.

Other diagramming tools include

• PlantUML (another text format)
• JetUML (McGill, simple visual editor)
• Powerpoint etc.
• Various enterprise-y tools
• whiteboards!

Class Diagram Example

classDiagram
    class Animal {
        -String name
        -int age
        +eat()
        +sleep()
        +makeSound()
    }

    class Dog {
        -String breed
        +bark()
        +fetch()
    }

    class Cat {
        -bool indoor
        +meow()
        +scratch()
    }

    Animal <|-- Dog
    Animal <|-- Cat

classDiagram
    class Animal {
        -String name
        -int age
        +eat()
        +sleep()
        +makeSound()
    }

    class Dog {
        -String breed
        +bark()
        +fetch()
    }

    class Cat {
        -bool indoor
        +meow()
        +scratch()
    }

    Animal <|-- Dog
    Animal <|-- Cat

Class Relationships

Relationship	Symbol	Meaning	Java equiv.
Inheritance	<|--	“is-a” relationship	X extends Y
Association	-->	General relationship	X.method calls Y.method
Aggregation	o--	“has-a” (weak)	Department has a list of Employees
Composition	*--	“owns-a” (strong)	Car has Wheels
Dependency	..>	Uses temporarily	Find the Timezone

Visualized

classDiagram
    class Animal
    class Cat
    class PetStore
    class List
    Animal <|-- Cat
    Cat --> PetStore
    PetStore o-- Animal
    Animal ..> List
    note for Animal "This note is attached to Animal"

classDiagram
    class Animal
    class Cat
    class PetStore
    class List
    Animal <|-- Cat
    Cat --> PetStore
    PetStore o-- Animal
    Animal ..> List
    note for Animal "This note is attached to Animal"

Sequence Diagrams

Sequence diagrams show interactions over time:

• Order of messages between objects
• Timing of interactions
• Object lifelines
• Method calls and returns
• Easy to overuse! Only needed for a few complex workflows.

Sequence Diagram Example

sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Enter URL
    Browser->>Server: HTTP Request
    Server->>Database: Query data
    Database-->>Server: Return results
    Server-->>Browser: HTTP Response
    Browser-->>User: Display page

sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Enter URL
    Browser->>Server: HTTP Request
    Server->>Database: Query data
    Database-->>Server: Return results
    Server-->>Browser: HTTP Response
    Browser-->>User: Display page

Online Shopping Flow

sequenceDiagram
    actor Customer
    participant Cart
    participant PaymentService
    participant Inventory
    participant Email

    Customer->>Cart: Add item
    Customer->>Cart: Checkout
    Cart->>Inventory: Check availability
    Inventory-->>Cart: Confirmed
    Cart->>PaymentService: Process payment
    PaymentService-->>Cart: Payment success
    Cart->>Inventory: Update stock
    Cart->>Email: Send confirmation
    Email-->>Customer: Order receipt

sequenceDiagram
    actor Customer
    participant Cart
    participant PaymentService
    participant Inventory
    participant Email

    Customer->>Cart: Add item
    Customer->>Cart: Checkout
    Cart->>Inventory: Check availability
    Inventory-->>Cart: Confirmed
    Cart->>PaymentService: Process payment
    PaymentService-->>Cart: Payment success
    Cart->>Inventory: Update stock
    Cart->>Email: Send confirmation
    Email-->>Customer: Order receipt

Sequence Diagram Elements

• Lifelines: Vertical dashed lines representing objects
• Activation boxes: Rectangles showing when object is active
• Messages: Arrows between lifelines
  • Solid arrow: Synchronous call
  • Dashed arrow: Return/response
  • Open arrow: Asynchronous call
• Actors: External entities (users, systems)

Activity Diagrams

Activity diagrams show workflows and business processes:

• Flow of control and data
• Parallel and concurrent activities
• Decision points and branches
• Swimlanes for responsibilities
• Start and end states

Activity Diagram Example

flowchart TD
    Start([Start]) --> Input[/Enter order details/]
    Input --> Check{Items in stock?}
    Check -->|Yes| Process[Process payment]
    Check -->|No| Notify[Notify customer]
    Notify --> End1([End])
    Process --> Ship[Ship order]
    Ship --> Send[Send confirmation]
    Send --> End2([End])

flowchart TD
    Start([Start]) --> Input[/Enter order details/]
    Input --> Check{Items in stock?}
    Check -->|Yes| Process[Process payment]
    Check -->|No| Notify[Notify customer]
    Notify --> End1([End])
    Process --> Ship[Ship order]
    Ship --> Send[Send confirmation]
    Send --> End2([End])

Activity Diagram with Swimlanes

flowchart TD
    subgraph Customer
        A([Start]) --> B[Browse products]
        B --> C[Add to cart]
        C --> D[Checkout]
    end

    subgraph System
        D --> E{Validate order}
        E -->|Valid| F[Process payment]
        E -->|Invalid| G[Show error]
        G --> D
        F --> H[Generate invoice]
    end

    subgraph Warehouse
        H --> I[Pick items]
        I --> J[Pack order]
        J --> K[Ship]
    end

    subgraph Customer2[Customer]
        K --> L[Receive order]
        L --> M([End])
    end

flowchart TD
    subgraph Customer
        A([Start]) --> B[Browse products]
        B --> C[Add to cart]
        C --> D[Checkout]
    end

    subgraph System
        D --> E{Validate order}
        E -->|Valid| F[Process payment]
        E -->|Invalid| G[Show error]
        G --> D
        F --> H[Generate invoice]
    end

    subgraph Warehouse
        H --> I[Pick items]
        I --> J[Pack order]
        J --> K[Ship]
    end

    subgraph Customer2[Customer]
        K --> L[Receive order]
        L --> M([End])
    end

Activity Diagram Elements

• Start node: Filled circle (initial state)
• End node: Filled circle with border (final state)
• Activity: Rectangle with rounded corners
• Decision: Diamond shape (branching)
• Fork/Join: Thick horizontal/vertical bar (parallelism)
• Swimlanes: Partitions showing responsibility

When to Use Each Diagram

Class Diagrams:

• Designing system architecture
• Showing data models
• Planning code structure
• Documenting class hierarchies

Sequence Diagrams:

• Describing workflows
• API interactions
• User scenarios
• Debugging timing issues

Activity Diagrams:

• Business process modeling
• Workflow visualization
• Algorithm logic flow
• Use case scenarios
• Parallel processing flows

Summary

• UML provides standardized visual language for software modeling
• Class diagrams show static structure and relationships
• Sequence diagrams show dynamic interactions over time
• Activity diagrams show workflows and business processes
• All three are essential tools for software design and communication
• Mermaid makes it easy to create UML diagrams in documentation

Resources

• UML Official Site
• Mermaid Documentation
• UML Distilled by Martin Fowler

Appendix - More complex examples

Complex Activity Example

flowchart TD
    Start([Start]) --> Login[User login]
    Login --> Auth{Authenticated?}
    Auth -->|No| Error[Show error message]
    Error --> Start
    Auth -->|Yes| Dashboard[Show dashboard]
    Dashboard --> Action{User action?}
    Action -->|Create| Create[Create new item]
    Action -->|Edit| Edit[Edit existing item]
    Action -->|Delete| Confirm{Confirm delete?}
    Confirm -->|Yes| Delete[Delete item]
    Confirm -->|No| Dashboard
    Create --> Save[Save to database]
    Edit --> Save
    Delete --> Save
    Save --> Refresh[Refresh view]
    Refresh --> Dashboard
    Action -->|Logout| Logout[End session]
    Logout --> End([End])

flowchart TD
    Start([Start]) --> Login[User login]
    Login --> Auth{Authenticated?}
    Auth -->|No| Error[Show error message]
    Error --> Start
    Auth -->|Yes| Dashboard[Show dashboard]
    Dashboard --> Action{User action?}
    Action -->|Create| Create[Create new item]
    Action -->|Edit| Edit[Edit existing item]
    Action -->|Delete| Confirm{Confirm delete?}
    Confirm -->|Yes| Delete[Delete item]
    Confirm -->|No| Dashboard
    Create --> Save[Save to database]
    Edit --> Save
    Delete --> Save
    Save --> Refresh[Refresh view]
    Refresh --> Dashboard
    Action -->|Logout| Logout[End session]
    Logout --> End([End])

Authentication Example

sequenceDiagram
    actor User
    participant UI
    participant AuthService
    participant Database

    User->>UI: Enter credentials
    UI->>AuthService: login(username, password)
    AuthService->>Database: validateUser()

    alt Valid credentials
        Database-->>AuthService: User found
        AuthService->>AuthService: generateToken()
        AuthService-->>UI: Return token
        UI-->>User: Login successful
    else Invalid credentials
        Database-->>AuthService: User not found
        AuthService-->>UI: Error message
        UI-->>User: Login failed
    end

sequenceDiagram
    actor User
    participant UI
    participant AuthService
    participant Database

    User->>UI: Enter credentials
    UI->>AuthService: login(username, password)
    AuthService->>Database: validateUser()

    alt Valid credentials
        Database-->>AuthService: User found
        AuthService->>AuthService: generateToken()
        AuthService-->>UI: Return token
        UI-->>User: Login successful
    else Invalid credentials
        Database-->>AuthService: User not found
        AuthService-->>UI: Error message
        UI-->>User: Login failed
    end

Class Diagram Relationships

classDiagram
    class Customer {
        -String name
        -String email
        +placeOrder()
    }

    class Order {
        -Date orderDate
        -String status
        +calculateTotal()
    }

    class Product {
        -String name
        -float price
        +getDetails()
    }

    Customer "1" --> "*" Order : places
    Order "*" --> "*" Product : contains

classDiagram
    class Customer {
        -String name
        -String email
        +placeOrder()
    }

    class Order {
        -Date orderDate
        -String status
        +calculateTotal()
    }

    class Product {
        -String name
        -float price
        +getDetails()
    }

    Customer "1" --> "*" Order : places
    Order "*" --> "*" Product : contains