Component Diagrams
A Component Diagram shows the physical components of a system, their interfaces, and the dependencies between them. Components are modular, replaceable units of the system that encapsulate their contents and whose behavior is defined through provided and required interfaces.
Component Diagram Notation:
Component:
┌────────────────────────┐
│ «component» │
│ ComponentName │
├────────────────────────┤
│ │
└────────────────────────┘
Provided Interface (lollipop):
────────○
"This component provides this interface"
Required Interface (socket):
────────⊔
"This component needs this interface"
Port:
┌────────────────────────┐
│ [P]──────── │
│ Component │
│ [P]─────────│
└────────────────────────┘Example: Web Application Components
┌─────────────────────────────────────────────────────────┐
│ «component» │
│ Web Application │
│ │
│ ┌───────────────┐ ┌───────────────┐ │
│ │ «component» │ │ «component» │ │
│ │ Frontend │────▶│ API Gateway │ │
│ │ (React SPA) │ │ (Express.js) │ │
│ └───────────────┘ └───────┬───────┘ │
│ │ │
│ ┌───────────┼───────────┐ │
│ ▼ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐ ┌────────┐ │
│ │ «component» │ │ «component» │ │«comp» │ │
│ │ Order Service│ │ User Service │ │ Payment│ │
│ │ (Node.js) │ │ (Node.js) │ │Service │ │
│ └──────┬───────┘ └──────┬───────┘ └───┬────┘ │
│ │ │ │ │
│ └────────────────┼─────────────┘ │
│ ▼ │
│ ┌──────────────────────┐ │
│ │ «component» │ │
│ │ Database (PostgreSQL) │ │
│ └──────────────────────┘ │
└─────────────────────────────────────────────────────────┘
Interfaces:
Order Service provides: OrderAPI
Order Service requires: Database, MessageQueue
User Service provides: UserAPI
User Service requires: Database, EmailService
Payment Service provides: PaymentAPI
Payment Service requires: PaymentGateway, DatabaseDeployment Diagrams
A Deployment Diagram shows how software components are deployed on hardware (nodes). It models the physical architecture of the system — servers, devices, and how software maps to them.
Deployment Diagram Notation:
Node (3D box):
┌────────────────────────┐
│ «device» │
│ ServerName │
├────────────────────────┤
│ │
└────────────────────────┘
Artifact (rectangle with document icon):
┌────────────────────────┐
│ «artifact» │
│ app.js │
└────────────────────────┘
Communication Path:
NodeA ════════════════ NodeB
Shows how nodes are connectedExample: Cloud Deployment
┌─────────────────────────────────────────────────────────┐
│ «device» │
│ Client Device (Browser) │
│ ┌────────────────────────┐ │
│ │ «artifact» │ │
│ │ React SPA Bundle │ │
│ └────────────────────────┘ │
└───────────────────────┬─────────────────────────────────┘
│ HTTPS
▼
┌─────────────────────────────────────────────────────────┐
│ «device» │
│ Load Balancer (nginx) │
│ ┌────────────────────────┐ │
│ │ «artifact» │ │
│ │ nginx.conf │ │
│ └────────────────────────┘ │
└───────────────────────┬─────────────────────────────────┘
│ HTTP
┌─────────┴─────────┐
▼ ▼
┌──────────────────────┐ ┌──────────────────────┐
│ «device» │ │ «device» │
│ Web Server 1 │ │ Web Server 2 │
│ (AWS EC2) │ │ (AWS EC2) │
│ │ │ │
│ ┌────────────────┐ │ │ ┌────────────────┐ │
│ │ «artifact» │ │ │ │ «artifact» │ │
│ │ Node.js App │ │ │ │ Node.js App │ │
│ └────────────────┘ │ │ └────────────────┘ │
└──────────┬───────────┘ └──────────┬───────────┘
│ │
└────────────┬───────────┘
│
┌─────────┴─────────┐
▼ ▼
┌──────────────────────┐ ┌──────────────────────┐
│ «device» │ │ «device» │
│ App Server 1 │ │ App Server 2 │
│ (AWS EC2) │ │ (AWS EC2) │
│ ┌────────────────┐ │ │ ┌────────────────┐ │
│ │ «artifact» │ │ │ │ «artifact» │ │
│ │ API Server │ │ │ │ API Server │ │
│ └────────────────┘ │ │ └────────────────┘ │
└──────────┬───────────┘ └──────────┬───────────┘
│ │
└────────────┬───────────┘
│
┌─────────┴─────────┐
▼ ▼
┌──────────────────────┐ ┌──────────────────────┐
│ «device» │ │ «device» │
│ Database Server │ │ Cache Server │
│ (AWS RDS) │ │ (Redis) │
│ ┌────────────────┐ │ │ ┌────────────────┐ │
│ │ «artifact» │ │ │ │ «artifact» │ │
│ │ PostgreSQL │ │ │ │ Redis │ │
│ └────────────────┘ │ │ └────────────────┘ │
└──────────────────────┘ └──────────────────────┘When to Use Each Diagram
Component Diagrams — Use When:
✓ Showing the major building blocks of the system
✓ Documenting system architecture for new team members
✓ Planning which components to develop or replace
✓ Identifying interface contracts between teams
Deployment Diagrams — Use When:
✓ Planning infrastructure and hosting
✓ Documenting production environment
✓ Showing redundancy and failover architecture
✓ Planning scaling strategies
Both Diagrams Together:
• Component diagram = what software pieces exist
• Deployment diagram = where they run
• Together = complete picture of the physical system