APITROVE BLOG

Unlocking Software Architecture Visualization: A Comprehensive Guide to C4-PlantUML

C4-PlantUML is an excellent tool for simplifying visualizations of software architecture and design. This article explores the core components of C4-PlantUML.

Whether you're an architect seeking clarity or a developer aiming to understand complex systems, C4-PlantUML is your solution for effective software design documentation. Join us in unraveling the simplicity and power of C4-PlantUML to enhance your approach to software architecture.

So, Let's get Started.


We shall use PlantUML online visualizer to compile our architecture and design diagrams.

1. A Basic Example

Let's define our requirements of a sample software system(email validation system):

  1. A user sends api request to email validation system to validate a single emal
  2. A user uploads file on UI and gets validated emails file

Let's write its UML code which will use C4 model.

@startuml

!include  https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

System(email_validation_front_end,"Email Validation front_end","Allows user to upload emails list for verification")
System(email_validation_backend,"Email Validation API","Gives REST APIs access to email validation features")

Person(email_validation_customer,"Email Validation Users","Uses Email validation services")

BiRel(email_validation_front_end,email_validation_backend,"Calls APIs and receives verified emails in JSON")
BiRel(email_validation_customer,email_validation_front_end,"Uploads file containing emails and receives results in downloadble file")
BiRel(email_validation_customer,email_validation_backend,"calls single and bulk verification APIs and get results in JSON")

@enduml

The output results is as follows:

This was a basic example of system architecture using C4-PlanUML tool. You can see from it how useful C4-PlantUML is for software architecture and design.

NOTE: Your can refer to C4-PlantUML github repo for introductions and sample examples.

C4 and PlantUML Components

Now, we shall delve into list of C4 and PlantUML components(simplfied) that you can use for software architecture design.

1. System Context and System landscape components

Use following line to include these components:

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person:

Person(alias, label, description)

System:

System(alias, label, description)

2: Relationship Components

Simple Relation

Rel(from, to, label, technology, description)