C4 Diagrams

The C4 model describes architecture at Context, Container, and Component levels. Mermaid supports C4Context, C4Container, and C4Component.

Context Level

C4Context
  title System Context diagram for Internet Banking System

  Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")

  System(banking, "Banking System", "Allows customers to view their bank accounts.")

  System_Ext(mailSystem, "E-mail system", "The internal Microsoft Exchange system.")

  Rel(customer, banking, "Uses")
  Rel(banking, mailSystem, "Sends e-mail", "SMTP")

Container Level

C4Container
  title Container diagram for Internet Banking System

  Person(customer, "Personal Banking Customer", "A customer of the bank")

  System_Boundary(b1, "Internet Banking") {
    Container(web, "Web Application", "React", "Delivers static content")
    Container(spa, "Single-Page App", "TypeScript", "Browser side logic")
    Container(api, "API Application", "Java", "Provides banking functionality")
    ContainerDb(db, "Database", "SQL", "Stores user data")
  }

  Rel(customer, web, "Visits", "HTTPS")
  Rel(customer, spa, "Uses", "HTTPS")
  Rel(spa, api, "Calls", "JSON/HTTPS")
  Rel(api, db, "Reads/Writes", "JDBC")