C4 Diagrams in Mermaid

C4 model overview

C4 describes software architecture at four levels of zoom:

Context -- system + external actors
Container -- deployable units (apps, databases, queues)
Component -- internal modules within a container
Code -- class/function level (rarely diagrammed)

C4 Context in Mermaid

C4Context
    title System Context

    Person(user, "Developer", "Uses the tool")
    System(app, "Agent Lore", "AI tutorial hub")
    System_Ext(github, "GitHub Pages", "Static hosting")

    Rel(user, app, "Browses tutorials")
    Rel(app, github, "Deployed to")

C4 Container diagram

C4Container
    title Container Diagram

    Person(user, "Developer")

    Container_Boundary(web, "Web App") {
        Container(html, "index.html", "HTML", "App shell")
        Container(js, "ES Modules", "JavaScript", "App logic")
        Container(css, "style.css", "CSS", "Styling")
    }

    ContainerDb(storage, "localStorage", "Browser", "Filter state")

    Rel(user, html, "Loads")
    Rel(html, js, "Imports")
    Rel(js, storage, "Reads/writes")

Tips

Start with Context (zoom out), then drill into Containers
Use System_Ext for third-party services
Keep each diagram focused on one level
GitHub renders C4 Mermaid natively since 2024