Mermaid template
C4 Diagram
System context diagrams in the C4 model - people, systems and how they connect.
Source
Open in editorC4Context
title System context for an online shop
Person(customer, "Customer", "Buys products online")
Enterprise_Boundary(shop, "Shop") {
System(web, "Web store", "Browse, order and pay")
System(admin, "Back office", "Manage stock and orders")
}
System_Ext(payments, "Payment provider", "Takes card payments")
System_Ext(mail, "Email service", "Sends receipts")
Rel(customer, web, "Orders through")
Rel(web, payments, "Charges cards with")
Rel(web, mail, "Sends receipts with")
Rel(admin, web, "Updates stock in")
The C4 model describes software at four zoom levels. A context diagram is the top one: who uses the system and which other systems it depends on. Mermaid supports C4Context, C4Container, C4Component, C4Dynamic and C4Deployment.
Declare people and systems with Person(), System() and System_Ext(), group them with Boundary(), and link them with Rel(from, to, label).