HomeDiagramsC4 diagramC4: Container With Boundary And BiRel

C4: Container With Boundary And BiRel

A C4 Container diagram: a system boundary holding containers, a database and a queue, with a bidirectional relationship and an external system.

c4-container-with-boundary-and-birel.mmd
C4Container
  Person(user, "User")
  System_Boundary(sys, "Shop") {
    Container(web, "Web App", "React", "Storefront")
    Container(api, "API", "Node.js", "Business logic")
    ContainerDb(db, "Database", "PostgreSQL", "Orders")
    ContainerQueue(q, "Events", "Kafka")
  }
  System_Ext(pay, "Payments")
  Rel(user, web, "Browses")
  Rel(web, api, "Calls", "JSON/HTTPS")
  Rel(api, db, "Reads/writes", "SQL")
  BiRel(api, q, "Publishes", "AMQP")
  Rel(api, pay, "Charges cards")
Output
C4 diagram, Zombie Mermaid Shop [SYSTEM] User [Person] Web App [Container: React] Storefront API [Container: Node.js] Business logic Database [Container: PostgreSQL] Orders Events [Container: Kafka] Payments [Software System] Browses Calls [JSON/HTTPS] Reads/writes [SQL] Publishes [AMQP] Charges cards

More C4 diagram examples

C4 diagram, Zombie Mermaid System Context for Internet Banking Bank [ENTERPRISE] Personal Banking Customer [Person] A customer of the bank Internet Banking System [Software System] Lets customers view accounts Ledger [Software System] Stores transactions E-mail System [Software System] Sends e-mails Uses [HTTPS] Reads from and writes to Sends e-mails to Sends e-mail using
C4: System Context
C4 diagram, Zombie Mermaid API Application [CONTAINER] Web Layer [system] Controller [Component: Express] Routes requests Service [Component: TypeScript] Business rules Database [Container: Postgres] Uses Reads and writes [SQL]
C4: Nested Boundaries Component