PlantUML Component Diagram: Layered Architecture

Layered Architecture with Component Diagrams

Layered architecture is the most common pattern for monolithic applications. PlantUML component diagrams can clearly show the layer boundaries and dependency rules.

Three-Layer Architecture

@startuml
title Three-Layer Architecture

package "Presentation Layer" {
  [React Frontend] as UI
  [REST Controllers] as API
  [GraphQL Resolvers] as GQL
}

package "Business Logic Layer" {
  [User Service] as US
  [Order Service] as OS
  [Payment Service] as PS
  [Notification Service] as NS
}

package "Data Access Layer" {
  [User Repository] as UR
  [Order Repository] as OR
  [Payment Gateway Client] as PGC
  [Email Client] as EC
}

package "Infrastructure" {
  database "PostgreSQL" as DB
  [Stripe API] as Stripe
  [SendGrid API] as SG
}

UI --> API
UI --> GQL
API --> US
API --> OS
GQL --> US
GQL --> OS
US --> UR
OS --> OR
PS --> PGC
NS --> EC
UR --> DB
OR --> DB
PGC --> Stripe
EC --> SG

@enduml

Dependency Rule

The critical rule in layered architecture is that dependencies only point downward. The presentation layer depends on business logic, which depends on data access. Never the reverse.

Clean Architecture Variant

package "Entities" {
  [Domain Models] as DM
}

package "Use Cases" {
  [Application Services] as AS
}

package "Interface Adapters" {
  [Controllers] as CTRL
  [Repositories] as REPO
  [Presenters] as PRES
}

package "Frameworks & Drivers" {
  [Express.js] as WEB
  [TypeORM] as ORM
  [React] as FE
}

AS --> DM
CTRL --> AS
REPO --> AS
PRES --> AS
WEB --> CTRL
ORM --> REPO
FE --> PRES

In Clean Architecture, the dependency arrows point inward toward the center (Entities). Interface Adapters bridge the gap between frameworks and use cases.

Color Coding Layers

skinparam package {
  BackgroundColor<<Presentation>> LightBlue
  BackgroundColor<<Business>> LightGreen
  BackgroundColor<<Data>> LightYellow
}

Using distinct colors for each layer makes it easy to spot dependency violations — any arrow pointing from a warm color to a cool color is going the wrong direction.