Published on 2026-02-22

C4 Model Diagrams in Markdown

How to create C4 architecture diagrams using C4-PlantUML and Structurizr.

The C4 model is a popular structural approach to software architecture design, visualizing the context, containers, components, and code of a software system.

In MarkdownToPrettyPDF, you can natively support C4 diagrams using the c4plantuml or structurizr code blocks. These are parsed via Kroki to render professional architecture diagrams.

C4-PlantUML Syntax

You can build C4 models directly in PlantUML. Ensure your block is labeled as c4plantuml.

syntax

@startuml
!include C4_Context.puml

Person(customer, "Customer", "A customer of the bank.")
System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

Rel(customer, banking_system, "Uses")
@enduml

Components and Containers

When drilling down into the system, you can build Container and Component diagrams using standard C4-PlantUML macros.

syntax

@startuml
!include C4_Container.puml

Person(customer, "Customer", "A customer of the bank.")
System_Boundary(c1, "Internet Banking System") {
    Container(web_app, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.")
    Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
    Container(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}

Rel(customer, web_app, "Visits", "HTTPS")
Rel(customer, spa, "Views account balances, and makes payments using", "HTTPS")
Rel(web_app, spa, "Delivers", "HTTPS")
Rel(spa, db, "Reads from and writes to", "JDBC")
@enduml

Structurizr Syntax

Alternatively, if you prefer the powerful Structurizr DSL, you can mark your block with structurizr.

syntax

workspace {
    model {
        user = person "User"
        softwareSystem = softwareSystem "Software System" {
            webapp = container "Web Application"
            database = container "Database"
        }
        
        user -> webapp "Uses"
        webapp -> database "Reads from and writes to"
    }
    views {
        systemContext softwareSystem {
            include *
            autoLayout
        }
        theme default
    }
}

Both tools are superb for ensuring your software architecture remains accurately documented, highly structured, and close to your repository’s code.