C4 Model: Component Diagrams

简介 / Introduction

The C4 model is a hierarchical approach to visualizing software system architecture — Context, Container, Component, and Code. This article focuses on Component diagrams, showing how to represent the same system in both PlantUML and Mermaid.

PlantUML 版

PlantUML supports C4 through the !include <C4> standard library. The Component diagram shows which components make up a Container and how they communicate.

!include <C4/C4_Container>
!include <C4/C4_Component>

LAYOUT_WITH_LEGEND()

Person(user, "User", "Uses the frontend app")
Container(con, "Web App", "Java/Spring", "Delivers business functionality")
ContainerDb(db, "Database", "PostgreSQL", "Stores data")
Component(auth, "AuthService", "Java", "Handles authentication")
Component(biz, "BizService", "Java", "Handles business logic")
Component(repo, "Repository", "Java", "Encapsulates data access")

Rel(user, con, "Uses HTTPS")
Rel(con, auth, "Calls")
Rel(con, biz, "Calls")
Rel(biz, repo, "Reads/Writes")
Rel(repo, db, "JDBC")

SHOW_LEGEND()

Mermaid 版

Mermaid has built-in c4 syntax since v10. The Component diagram uses C4Context (container level) and C4Component. The two are semantically equivalent.

c4context
    title C4 Component Diagram — Web Application
    person(user, "User", "Uses the frontend app")
    container(con, "Web App", "Java/Spring", "Delivers business functionality")
    containerDb(db, "Database", "PostgreSQL", "Stores data")

    component(auth, "AuthService", "Java", "Handles authentication")
    component(biz, "BizService", "Java", "Handles business logic")
    component(repo, "Repository", "Java", "Encapsulates data access")

    Rel(user, con, "Uses HTTPS")
    Rel(con, auth, "Calls")
    Rel(con, biz, "Calls")
    Rel(biz, repo, "Reads/Writes")
    Rel(repo, db, "JDBC")

对比 / Side-by-side

Feature	PlantUML	Mermaid
C4 stdlib	`!include <C4/C4_Container>`	Built-in (no import needed)
Component declaration	`Component(id, name, tech, desc)`	`component(id, "name", "tech", "desc")`
Container declaration	`Container(id, name, tech, desc)`	`container(id, "name", "tech", "desc")`
Legend	`LAYOUT_WITH_LEGEND()` + `SHOW_LEGEND()`	Auto-rendered
Relationship syntax	`Rel_U/D/L/R` (directional)	`Rel(sender, receiver, "label")`

小结 / Wrap-up

PlantUML C4 uses !include to pull in the full C4 standard library — rich features but requires the stdlib installed on the backend. Mermaid C4 is built-in, zero-config, good for quick sketches. Both produce semantically identical diagrams; choose based on your existing toolchain.