Understanding Selected UML Diagrams

Component Diagrams

October 24, 2024

UML Component Diagrams October 24, 2024 1 / 29

Outline
1 Introduction and Recap
2 Architecture Design and Visualization
Component and Deployment Diagrams
3 Service Interaction and Communication
Sequence and Collaboration Diagrams
4 Behavioral Modeling
Activity and State Diagrams
5 UML Component Diagrams and its Elements
6 Building a Component Diagram
7 Advanced Concepts
8 Best Practices
9 Applications in Modern Software Systems
Modeling Web Services
Modeling Web Applications
Modeling APIs
10 Conclusion
UML Component Diagrams October 24, 2024 2 / 29
UML: Quick Recap
UML stands for Unified Modeling Language.
It is a standardized modeling language enabling developers to specify,
visualize, construct, and document artifacts of software systems.
UML provides a set of graphic notation techniques to create visual
models of software-intensive systems.
UML is divided into two main categories of diagrams:
Structural Diagrams: Show the static structure of the system (e.g.,
Class Diagram, Component Diagram).
Behavioral Diagrams: Show the dynamic behavior of the system
(e.g., Use Case Diagram, Sequence Diagram).
UML diagrams studied earlier include,
Class diagram, Sequence diagram, Usecase diagram, State diagram,
and Activity diagram.
UML diagrams are highly useful in modeling web services and
cloud-based web applications because they provide a clear,
standardized way to visualize and design complex systems.
UML Component Diagrams October 24, 2024 3 / 29
Selected UML diagrams

Architecture Design and Visualization

UML diagrams help in visualizing the architecture of web services and
cloud applications, making it easier to understand how different
components interact. Specifically:
Component Diagrams
Deployment Diagrams
Service Interaction and Communication
Sequence Diagrams
Collaboration Diagrams
Behavioral Modeling
Activity Diagrams
State Diagrams

UML Component Diagrams October 24, 2024 4 / 29

Selected UML diagrams . . . cont’d

Component Diagrams
These diagrams show the structure of the web service or cloud-based
system, depicting components like databases, application servers, and
microservices.
This helps in organizing the architecture in terms of modularity and
service orientation.
Deployment Diagrams
For cloud applications, deployment diagrams represent the distribution
of software across servers or cloud instances, illustrating the nodes
(e.g., cloud servers, databases) and the communication between them.

UML Component Diagrams October 24, 2024 5 / 29

Selected UML diagrams . . . cont’d

Sequence Diagrams
Sequence diagrams are crucial for modeling the interaction between
various services in a web application.
For example, they show how a request flows from the client to the web
service, passes through APIs, and reaches backend services in a cloud
environment.
Collaboration Diagrams
These diagrams show the relationships between objects and how they
work together to perform a task, which can model the interaction
between microservices or cloud-based components.

UML Component Diagrams October 24, 2024 6 / 29

Selected UML diagrams . . . cont’d

Activity Diagrams
Cloud applications often involve workflows, such as user authentication,
data processing, or service orchestration.
Activity diagrams help model these workflows by representing the flow
of activities and decisions made in the application.
State Diagrams
State diagrams are useful to model the behavior of specific components
or services in a cloud environment.
For example, a state diagram can represent the lifecycle of a user
session in a web application.

UML Component Diagrams October 24, 2024 7 / 29

Focus on Component Diagrams

Component Diagrams are part of the Structural Diagrams.

They depict how a system is split into components and show the
dependencies among these components.
Useful for illustrating the high-level architecture of a system.

Purpose of Component Diagrams

To visualize organization & dependencies among a set of components.
To illustrate the high-level structure of the system.
To assist in system decomposition.

UML Component Diagrams October 24, 2024 8 / 29

What is a Component?

A Component represents a modular part of a system that

encapsulates its contents and whose manifestation is replaceable
within its environment.
Components can be software components, hardware components, or a
combination.
Components
Represented by a rectangle with two smaller rectangles (stereotype
<<component>>).
Can contain interfaces and dependencies.

Component A
<< component >>

UML Component Diagrams October 24, 2024 9 / 29

Interfaces
Define a set of operations that a component provides or requires.
Provided Interface: Services offered by the component.
Required Interface: Services needed by the component.

UML Component Diagrams October 24, 2024 10 / 29

Interfaces Realization

Components can realize interfaces, indicating they provide specific

functionalities.
Illustrated with a lollipop symbol.

Component E Interface S

Shows input or materials that a component either receives or provides.

Interfaces can be represented with textual notes or symbols, such as the
lollipop, socket, and ball-and-socket shapes.

UML Component Diagrams October 24, 2024 11 / 29

Interfaces Realization . . . cont’d

Provided interfaces:
A straight line from the component box with an attached circle.
These symbols represent the interfaces where a component produces
information used by the required interface of another component.
Required interfaces:
A straight line from the component box with an attached half circle
(also represented as a dashed arrow with an open arrow).
These symbols represent the interfaces where a component requires
information in order to perform its proper function.

UML Component Diagrams October 24, 2024 12 / 29

Components & Interfaces . . . Alternative notations

UML Component Diagrams October 24, 2024 13 / 29

Dependencies

Indicate that one component depends on another.

Shown as dashed arrows from the dependent component to the
independent one.

Component C Component D

UML Component Diagrams October 24, 2024 14 / 29

Example Scenario

Let’s consider a simple e-commerce system.

Key components:
1 User Interface
2 Business Logic
3 Database
4 Payment Gateway

UML Component Diagrams October 24, 2024 15 / 29

Component Diagram for E-commerce System
Components interact via interfaces.
Dependencies indicate usage relationships.

Payment Gateway<< component >>

Processes

Uses
User Interface<< component >> Business Logic<< component >>

Reads/Writes

Database<< component >>

UML Component Diagrams October 24, 2024 16 / 29

Subcomponents

Components can be decomposed into smaller subcomponents.

Promotes modularity and reusability.

Main Component<< component >>

s Use
Use s

Subcomponent A<< component >> Subcomponent B<< component >>

UML Component Diagrams October 24, 2024 17 / 29

Best Practices for Component Diagrams
Modularity: Break down the system into well-defined, cohesive
components.
Encapsulation: Hide internal details of components; expose only
necessary interfaces.
Clear Dependencies: Minimize dependencies to reduce coupling.
Reuse: Design components for reusability across different systems.
Consistency in Naming: Maintain consistent naming conventions
and diagrammatic representations.
Clarity in Diagrams: Keep diagrams uncluttered. Use labels and
legends where necessary to explain components and their interactions.
Use of Stereotypes: Utilize UML stereotypes (e.g.,
<< component >>, << service >>) to provide additional semantic
meaning to components.
Documentation: Complement diagrams with detailed documentation
explaining each component’s role & responsibilities within the system.
UML Component Diagrams October 24, 2024 18 / 29
UML Component Diagrams for Web Services

Web Services are services offered over the web using standard
protocols (e.g., HTTP, SOAP, REST).
UML Component Diagrams help in visualizing architecture of web
services by:
Identifying service components and their interactions.
Defining service interfaces and dependencies.
Illustrating service orchestration and choreography.
Facilitates understanding of service-oriented architectures (SOA) and
microservices.

UML Component Diagrams October 24, 2024 19 / 29

Example: Web Service Architecture

Consider a simple web service architecture with the following

components:
API Gateway: Entry point for clients.
Authentication Service: Handles user authentication.
Business Services: Perform core business logic.
Database Service: Manages data storage.
Dependencies and interfaces define how these services interact.

UML Component Diagrams October 24, 2024 20 / 29

Example: Web Service Architecture . . . cont’d

API Gateway<< component >>

Authenticates

Authentication Service<< component >>

Authorizes

Data Access (L to R)
Business Service<< component >> Database Service<< component >>
Data (R to L)

UML Component Diagrams October 24, 2024 21 / 29

UML Component Diagrams for Web Applications

Web Applications are applications that run on web servers and are
accessed via web browsers.
UML Component Diagrams assist in:
Structuring the front-end and back-end components.
Defining communication between client-side and server-side
components.
Managing dependencies among various modules (e.g., authentication,
data processing).
Enhances clarity in MVC (Model-View-Controller) or other
architectural patterns.

UML Component Diagrams October 24, 2024 22 / 29

Example: Web Application Architecture

Consider a typical web application with the following components:

1 Client (Browser): Interface for user interaction.
2 Web Server: Hosts the application.
3 Application Server: Executes business logic.
4 Database: Stores application data.
5 Authentication Module: Manages user authentication.
The component diagram illustrates how these components interact.

HTTP Requests API Calls

Client<< component >> Web Server<< component >> Application Server<< component >>

Auth Requests Auth Responses Data Queries

Authentication Module<< component >> Database<< component >>

UML Component Diagrams October 24, 2024 23 / 29

UML Component Diagrams for APIs

APIs (Application Programming Interfaces) define how different

software components interact.
UML Component Diagrams help in:
Designing API structures and their interactions with other components.
Visualizing the relationships between API endpoints and backend
services.
Managing dependencies and ensuring clear contract definitions.
Facilitates API-first development and integration with third-party
services.

UML Component Diagrams October 24, 2024 24 / 29

Example: API Architecture

Consider an API architecture with the following components:

1 API Gateway: Handles incoming API requests.
2 Authentication Service: Validates API tokens.
3 Resource Controllers: Manage specific API resources (e.g., Users,
Orders).
4 Business Logic Services: Execute core operations.
5 External Services: Third-party integrations (e.g., payment processors).
The component diagram (next slide) illustrates the flow and
dependencies among these components.

UML Component Diagrams October 24, 2024 25 / 29

Example: API Architecture . . . cont’d
API Gateway<< component >>

Validate Token Auth Status

Authentication Service<< component >>

Authorize Authorize

User Controller<< component >> Order Controller<< component >>

Process Request Response External API Call Response

Business Logic Service<< component >> External Service<< component >>

UML Component Diagrams October 24, 2024 26 / 29

Summary

UML Component Diagrams provide a high-level view of system

architecture.
They help in understanding the organization and dependencies of
components.
Essential for system design, documentation, and maintenance.
Particularly valuable in modeling modern software systems like web
services, web applications, and APIs.

UML Component Diagrams October 24, 2024 27 / 29

Further Reading

UML Specification: https://www.omg.org/spec/UML

Books:
”Applying UML and Patterns” by Craig Larman
”UML Distilled” by Martin Fowler
Online Tutorials:
https://www.uml-diagrams.org/component-diagram.html

UML Component Diagrams October 24, 2024 28 / 29

Thank You!

UML Component Diagrams October 24, 2024 29 / 29