UML Component Diagrams

---

Dark Mode

Show Highlights

Audio Clips

UML Component Diagrams

Learning Objectives

By the end of this chapter, you will be able to:

1. Identify the core elements of a component diagram: components, interfaces, ports, and connectors.
2. Differentiate between provided interfaces (lollipop) and required interfaces (socket).
3. Model a system’s high-level architecture using component diagrams with appropriate connectors.
4. Evaluate when to use component diagrams versus class diagrams or deployment diagrams.

---

1. Introduction: Zooming Out from Code

So far, we have worked at the level of individual classes (class diagrams) and object interactions (sequence diagrams). But real software systems are made up of larger building blocks—services, libraries, modules, and subsystems—that are assembled together. How do you show that your system has a web frontend that talks to an API gateway, which in turn connects to authentication and data services?

This is the role of UML Component Diagrams. They operate at a higher level of abstraction than class diagrams, showing the major deployable units of a system and how they connect through well-defined interfaces.

Diagram Type	Level of Abstraction	Shows
Class Diagram	Low (code-level)	Classes, attributes, methods, inheritance
Component Diagram	High (architecture-level)	Deployable modules, provided/required interfaces, assembly
Deployment Diagram	Physical (infrastructure)	Hardware nodes, artifacts, network topology

Concept Check (Prior Knowledge Activation): Think about a web application you have used or built. What are the major “pieces” of the system? (e.g., frontend, backend, database, authentication service). These pieces are what component diagrams model.

---

2. Core Elements

2.1 Components

A component is a modular, deployable, and replaceable part of a system that encapsulates its contents and exposes its functionality through well-defined interfaces. Think of it as a “black box” that does something useful.

In UML, a component is drawn as a rectangle with a small component icon (two small rectangles) in the upper-right corner. In our notation:

Examples of components in real systems:

• A web frontend (React app, Angular app)
• A REST API service
• An authentication microservice
• A database server
• A message queue (Kafka, RabbitMQ)
• A third-party payment gateway

2.2 Interfaces: Provided and Required

Components interact through interfaces. UML distinguishes two types:

Provided Interface (Lollipop) : An interface that the component implements and offers to other components. Drawn as a small circle (ball) connected to the component by a line. “I provide this service.”

Required Interface (Socket) : An interface that the component needs from another component to function. Drawn as a half-circle (socket/arc) connected to the component. “I need this service.”

Reading this diagram: OrderService provides the IOrderAPI interface (other components can call it) and requires the IPayment and IInventory interfaces (it depends on payment and inventory services to function).

2.3 Ports

A port is a named interaction point on a component’s boundary. Ports organize a component’s interfaces into logical groups. They are drawn as small squares on the component’s border.

• An incoming port (receives requests), usually placed on the left edge.
• An outgoing port (sends requests), usually placed on the right edge.

Reading this diagram: PaymentService has an incoming port processPayment (where other components send payment requests) and an outgoing port bankAPI (where it communicates with the external bank).

2.4 Connectors

Connectors are the lines between components (or between ports) that show communication pathways:

• Assembly Connector A solid arrow linking one component to another (or a required interface to a provided interface). This is the most common connector.
• Dependency A dashed arrow indicating a weaker “uses” or “depends on” relationship.
• Plain Link An undirected association between components.

Concept Check (Retrieval Practice): Without looking back, name the two types of interfaces in component diagrams and their visual symbols. What is the difference between a provided and required interface?

Reveal Answer

Provided interface (lollipop/ball): the component offers this service. Required interface (socket/half-circle): the component needs this service from another component.

---

3. Building a Component Diagram Step by Step

Let’s build a component diagram for an online bookstore, one piece at a time. This worked-example approach lets you see how each element is added.

Step 1: Identify the Components

An online bookstore might have: a web application, a catalog service, an order service, a payment service, and a database.

Step 2: Add Ports and Connect Components

Now we add the communication pathways. The web app sends HTTP requests to the catalog and order services. The order service calls the payment service. Both services query the database.

Reading the Complete Diagram

1. WebApp has two outgoing ports: one for catalog requests and one for order requests.
2. CatalogService receives HTTP requests and queries the Database.
3. OrderService receives HTTP requests, calls PaymentService to charge the customer, and queries the Database.
4. PaymentService receives charge requests from OrderService.
5. Database receives SQL queries from both the CatalogService and OrderService.
6. The labels on connectors (REST, gRPC, SQL) indicate the communication protocol.

---

4. Provided and Required Interfaces (Ball-and-Socket)

The ball-and-socket notation makes dependencies between components explicit. When one component’s required interface (socket) connects to another component’s provided interface (ball), this forms an assembly connector—the two pieces “snap together” like a ball fitting into a socket.

Reading this diagram: ShoppingCart requires the IPayment interface, and PaymentGateway provides it. The connector shows the dependency is satisfied—the shopping cart can use the payment gateway. If you wanted to swap in a different payment provider, you would only need to provide a component that satisfies the same IPayment interface.

This is the essence of loose coupling: components depend on interfaces, not on specific implementations.

---

5. Component Diagrams vs. Other Diagram Types

Students sometimes confuse when to use which diagram. Here is a comparison:

Question You Are Answering	Use This Diagram
What classes exist and how are they related?	Class Diagram
What are the major deployable parts and how do they connect?	Component Diagram
Where do components run (which servers/containers)?	Deployment Diagram
How do objects interact over time for a specific scenario?	Sequence Diagram
What states does an object go through during its lifecycle?	State Machine Diagram

Rule of thumb: If you can deploy it, containerize it, or replace it independently, it belongs in a component diagram. If it is an internal implementation detail (a class, a method), it belongs in a class diagram.

---

6. Dependencies Between Components

Like class diagrams, component diagrams can show dependency relationships using dashed arrows. A dependency means one component uses another but does not have a strong structural coupling.

Here, OrderService depends on Logger and MetricsCollector for cross-cutting concerns, but these are not core architectural connections—they are auxiliary dependencies.

---

7. Active Recall Challenge

Grab a blank piece of paper. Without looking at this chapter, try to draw a component diagram for the following system:

1. A MobileApp sends requests to an APIServer.
2. The APIServer connects to a UserService and a NotificationService.
3. The UserService queries a UserDatabase.
4. The NotificationService depends on an external EmailProvider.

After drawing, review your diagram:

• Did you use the component notation (rectangles with the component icon)?
• Did you show ports or interfaces where appropriate?
• Did you label your connectors with communication protocols?
• Did you use a dashed arrow for the dependency on the external EmailProvider?

---

8. Interactive Practice

Test your knowledge with these retrieval practice exercises.

Knowledge Quiz

UML Component Diagram Practice

Test your ability to read and interpret UML Component Diagrams.

What level of abstraction do component diagrams operate at, compared to class diagrams?

Correct Answer:

Explanation

Component diagrams operate at a higher level of abstraction than class diagrams. They show deployable units (services, libraries, subsystems) and how they connect through well-defined interfaces, while class diagrams show the internal code-level structure (attributes, methods, inheritance).

In a component diagram, what does a provided interface (lollipop/ball symbol) indicate?

Correct Answer:

Explanation

A provided interface (lollipop/ball) means the component implements and offers this service. Other components can connect to it. The opposite — a required interface (socket) — means the component needs this service from someone else.

What is the purpose of ports (small squares on component boundaries)?

Correct Answer:

Explanation

Ports are named interaction points on a component’s boundary. They organize interfaces into logical groups. An incoming port (portin) receives requests on the left edge; an outgoing port (portout) sends requests on the right edge.

When would you choose a component diagram over a class diagram?

Correct Answer:

Explanation

Component diagrams are for architecture-level modeling — showing the major deployable parts (services, libraries, databases) and their connections through interfaces. Class diagrams are for code-level details (attributes, methods, inheritance). State machines model object lifecycles.

What does a dashed arrow between two components represent?

Correct Answer:

Explanation

A dashed arrow () represents a dependency — a weaker relationship where one component uses another (e.g., for logging, metrics). This is the same notation as class diagram dependencies. Solid arrows () represent assembly connectors for primary communication pathways.

Which of the following are valid elements in a UML Component Diagram? (Select all that apply.)

Correct Answers:

Explanation

Component diagrams contain components, provided interfaces (ball), required interfaces (socket), ports (squares), and assembly connectors (arrows). Lifelines belong in sequence diagrams, not component diagrams.

What does the ball-and-socket notation (assembly connector) represent?

Correct Answer:

Explanation

The ball-and-socket (assembly connector) links a component’s required interface (socket) to another component’s provided interface (ball). This shows the dependency is satisfied and enables loose coupling — components depend on interfaces, not specific implementations.

A system has a ShoppingCart component that needs payment processing, and a StripeGateway component that provides it. If you want to later swap StripeGateway for PayPalGateway, what UML concept enables this?

Correct Answer:

Explanation

The provided/required interface pattern enables substitutability. If ShoppingCart requires IPayment and StripeGateway provides it, any other component that provides IPayment (like PayPalGateway) can be substituted without changing ShoppingCart. This is the key architectural benefit of component diagrams.

Workout Complete!

Your Score: 0/8

Retrieval Flashcards

UML Component Diagram Flashcards

Quick review of UML Component Diagram notation and architecture-level modeling.

What does a component represent in a UML component diagram?

A modular, deployable, and replaceable part of a system that encapsulates its contents and exposes functionality through interfaces.

Components are drawn as rectangles with a small component icon. Examples include microservices, libraries, databases, frontend applications, and message queues. They operate at a higher level of abstraction than classes.

What is the difference between a provided interface (lollipop) and a required interface (socket)?

Provided = the component offers this service (ball). Required = the component needs this service (socket).

A provided interface (lollipop/ball) says “I implement this and you can call me.” A required interface (socket/half-circle) says “I need someone to provide this for me to work.” When a required interface connects to a matching provided interface, this forms an assembly connector.

What is a port in a component diagram?

A named interaction point on a component’s boundary, shown as a small square.

Ports organize a component’s interfaces into logical groups. portin (incoming, on the left edge) receives requests. portout (outgoing, on the right edge) sends requests. Ports make it clear which side of the component handles which communication.

What is an assembly connector (ball-and-socket)?

A connector that links one component’s required interface to another component’s provided interface.

The ball-and-socket notation shows that the dependency is satisfied: the requiring component can use the providing component. This enables loose coupling — components depend on interfaces, not implementations, so you can swap providers without changing the consumer.

When should you use a component diagram instead of a class diagram?

When modeling the high-level deployable parts of a system and their connections, rather than individual code-level classes.

Rule of thumb: if you can deploy it, containerize it, or replace it independently, it belongs in a component diagram. Internal implementation details (classes, methods, inheritance) belong in class diagrams.

How is a dependency shown between components?

A dashed arrow from the dependent component to the component it depends on.

This is the same notation as class diagram dependencies (). Use it for weaker, auxiliary relationships (e.g., logging, metrics) rather than core architectural connections. Assembly connectors () are used for primary communication pathways.

Workout Complete!

Your Score: 0/6

Come back later to improve your recall!

Pedagogical Tip: Try to answer each question from memory before revealing the answer. Effortful retrieval is exactly what builds durable mental models. Come back to these tomorrow to benefit from spacing and interleaving.