Skip to content
C4 Diagram

A C4 diagram describes the architecture of a software system at four levels of detail: Context, Containers, Components, and Code. The Context level — shown here — is the most accessible: it shows the system as a single box surrounded by the people and external systems it interacts with.

C4 diagrams are used in technical documentation, but the Context level is readable by anyone and is useful for communicating what a system does and who uses it, without getting into implementation details. An Enterprise_Boundary groups the people and systems that belong inside your platform, making it clear what is yours and what is external.

C4Context
    title Blog Platform — System Context

    Enterprise_Boundary(platform, "Blog Platform") {
        Person(author, "Author", "Writes and publishes posts")
        System(cms, "CMS", "Creates, edits, and publishes blog content")
    }

    Person(reader, "Reader", "Reads articles and subscribes to the newsletter")

    System_Ext(email, "Email Service", "Sends newsletters to subscribers")
    System_Ext(analytics, "Analytics", "Tracks page views and reader engagement")

    Rel(author, cms, "Manages content")
    Rel(reader, cms, "Reads posts")
    Rel(cms, email, "Sends newsletters")
    Rel(cms, analytics, "Reports activity")

The C4 Context diagram is often the best starting point for explaining a system to a non-technical audience — it answers 'who uses this and what does it connect to?' without requiring any technical background.

Syntax
MARKDOWN
```mermaid
C4Context
    title Blog Platform — System Context

    Enterprise_Boundary(platform, "Blog Platform") {
        Person(author, "Author", "Writes and publishes posts")
        System(cms, "CMS", "Creates, edits, and publishes blog content")
    }

    Person(reader, "Reader", "Reads articles and subscribes to the newsletter")

    System_Ext(email, "Email Service", "Sends newsletters to subscribers")
    System_Ext(analytics, "Analytics", "Tracks page views and reader engagement")

    Rel(author, cms, "Manages content")
    Rel(reader, cms, "Reads posts")
    Rel(cms, email, "Sends newsletters")
    Rel(cms, analytics, "Reports activity")
```

For more C4 diagram syntax see the C4 diagram documentation at mermaid.js.org

© 2026 Docizr. All rights reserved.