C4

There are four types of C4 models, each one for a different audience and containing a different level of detail. These are the context, container, components, and code diagrams that make up your C4 model. The order doesn't matter.
Usually level 1 & 2 makes a lot of sense, level 3 only in some situations and level 4 is hardly ever used.

1. (System) Context

Context diagrams are the most general description of what your system does, who will use it, and what other systems it will interact with. A context diagram will help you describe the scope of your project and help you pinpoint who the user is and what problem you’re going to solve.

2. Containers

The container diagram takes the first step into describing the software system and shows the APIs, applications, databases, and microservices that the system will use. Each of these applications or services is represented with a container and the interactions between them are shown at a high level.

3. Components

The component diagram details groups of code within a single container. These components represent abstractions of your codebase.

4. Code (e.g. Classes)

The last level requires lots of detail to show how the code of a single component is actually implemented. To do this, you would want to make a UML class diagram or entity relationship diagram that describes the component.

Diagrams

See: Notation

A box needs a meaningful title and type and a short description, summary or bullet point list.
Lines go only in one direction showing the most important dependencies or data flow. Make explicit annotations about the purpose.
Have a key/legend to explain shapes, line styles, colors, borders, acronyms, etc.

Examples

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

Person(personAlias, "Label", "Optional Description")
Container(containerAlias, "Label", "Technology", "Optional Description")
System(systemAlias, "Label", "Optional Description")

Rel(personAlias, containerAlias, "Label", "Optional Technology")
@enduml

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

Person(admin, "Administrator")
System_Boundary(c1, "Sample System") {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml

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

!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons
!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5
!include DEVICONS/angular.puml
!include DEVICONS/java.puml
!include DEVICONS/msql_server.puml
!include FONTAWESOME/users.puml

LAYOUT_WITH_LEGEND()

Person(user, "Customer", "People that need products", $sprite="users")
Container(spa, "SPA", "angular", "The main interface that the customer interacts with", $sprite="angular")
Container(api, "API", "java", "Handles all business logic", $sprite="java")
ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", $sprite="msql_server")

Rel(user, spa, "Uses", "https")
Rel(spa, api, "Uses", "https")
Rel_R(api, db, "Reads/Writes")
@enduml

@startuml
title Coding Contest Platform - Containers

top to bottom direction

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


Person_Ext(ContestParticipant, "Contest Participant", "", $tags="Person+Element")
Person(Administrator, "Administrator", "", $tags="Person+Element")

System_Boundary("CodingContestPlatform_boundary", "Coding Contest Platform") {
  Container(CodingContestPlatform.Registration, "Registration", "maintains all users and contests, provides SSO", $tags="spring+Container+Element")[[https://register.codingcontest.org/]]
  Container(CodingContestPlatform.CatCoder, "CatCoder", "provides the possibility to solve coding challenges", $tags="spring+Container+Element")[[https://catcoder.codingcontest.org/]]
}

Rel_D(Administrator, CodingContestPlatform.Registration, "creates public contests", $tags="Relationship")
Rel_D(Administrator, CodingContestPlatform.CatCoder, "maintains coding games", $tags="Relationship")
Rel_D(CodingContestPlatform.Registration, CodingContestPlatform.CatCoder, "fetches contests", "REST", $tags="Relationship")
Rel_D(ContestParticipant, CodingContestPlatform.Registration, "performs login", $tags="Relationship")
Rel_D(ContestParticipant, CodingContestPlatform.CatCoder, "solves coding challenges", $tags="Relationship")

SHOW_LEGEND()
@enduml

Related

• models