C4 model: Context diagrams

简介 / Introduction

The C4 model is a layered approach to visualising software architecture — Context → Container → Component → Code. The Context diagram is the highest level, showing system boundaries, interactions between systems, and external actors. This article compares PlantUML and Mermaid side-by-side for rendering the same C4 Context diagram.

PlantUML 版

PlantUML uses the standard library C4 to draw C4 diagrams. Ensure the backend has plantuml-stdlib installed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

!include <C4>

title C4 Context Diagram — Internet Banking System

Person(customer, "Personal Customer", "Uses the online banking frontend")
Person(employee, "Bank Employee", "Uses the internal management system")
System(banking_system, "Internet Banking System", "Provides account management, transfers, etc.")
System(core_bank, "Core Banking System", "Processes transaction accounting")
System(email_system, "Email System", "Sends notification emails")

Rel(customer, banking_system, "Accesses")
Rel(employee, banking_system, "Operates")
Rel(banking_system, core_bank, "Calls")
Rel(banking_system, email_system, "Sends emails")

The result is a system-context diagram: two actors (customer, employee) on the outside, three systems (Internet Banking System, Core Banking System, Email System) in the centre, with arrows indicating data flow direction.

Mermaid 版

Mermaid has built-in C4Context diagram support since v10, providing similar capability to PlantUML’s C4 library.

1
2
3
4
5
6
7
8
9
10
11
12
13

C4Context
    title C4 Context Diagram — Internet Banking System

    Person(customer, "Personal Customer", "Uses the online banking frontend")
    Person(employee, "Bank Employee", "Uses the internal management system")
    System(banking_system, "Internet Banking System", "Provides account management, transfers, etc.")
    System(core_bank, "Core Banking System", "Processes transaction accounting")
    System(email_system, "Email System", "Sends notification emails")

    Rel(customer, banking_system, "Accesses")
    Rel(employee, banking_system, "Operates")
    Rel(banking_system, core_bank, "Calls")
    Rel(banking_system, email_system, "Sends emails")

对比 / Side-by-side

The two syntaxes are nearly identical. The main difference is that PlantUML requires importing the standard library, while Mermaid has C4 support built in. PlantUML’s Enterprise extensions offer richer boundary visualisations for complex organisational structures.

小结 / Wrap-up

C4 Context diagrams are the best starting point for showing the big picture of a system — no implementation details required, yet clear enough for non-technical stakeholders. PlantUML delivers the full feature set via its stdlib, while Mermaid covers most common use cases with its built-in syntax. Choose based on your team’s existing toolchain and need for enterprise-level features.