Mermaid C4 Diagram Maker
Write C4 diagrams in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.
Updated · Code editor with live preview
C4 diagram example
Rendering preview…
C4Context
title System context for TryMermaid
Person(user, "Diagram author", "Writes Mermaid or drags shapes")
System(trymermaid, "TryMermaid", "Visual editor and code editor kept in sync")
System_Ext(agent, "AI agent", "Creates diagrams through the MCP connector")
System_Ext(payments, "Lemon Squeezy", "Handles subscriptions")
Rel(user, trymermaid, "Builds and exports diagrams")
Rel(agent, trymermaid, "Creates and edits diagrams", "MCP over HTTPS")
Rel(trymermaid, payments, "Checkout and webhooks", "HTTPS")What is a C4 diagram?
A C4 diagram describes software architecture at a chosen level of detail, from the system in its context down through containers and components. The point of C4 is that each level answers one question for one audience instead of putting everything on one drawing. In Mermaid you write the context level starting with the C4Context keyword.
When to use a C4 diagram
- System context diagrams for architecture decision records
- Onboarding docs that explain what talks to what
- Showing the boundary between your systems and third parties
- Architecture reviews
How to make a C4 diagram in Mermaid
- Step 1
Open the editor
Open TryMermaid with the example on this page, or start a new diagram with C4Context on the first line.
- Step 2
Add people and systems
Add the people and systems involved with Person, System and System_Ext, giving each an id, a name and a short description.
- Step 3
Draw the relationships
Connect them with Rel lines, adding a protocol as a fourth argument where it matters.
- Step 4
Export or share
Check the live preview, then export as PNG or SVG or copy a share link.
C4 diagram syntax cheat sheet
| Element | Syntax | What it does |
|---|---|---|
| Start | C4Context | Begins a system context diagram |
| Title | title System context | Heading above the diagram |
| Person | Person(user, "Author", "Writes diagrams") | Someone who uses the system |
| System | System(app, "TryMermaid", "The editor") | A system your team owns |
| External system | System_Ext(pay, "Lemon Squeezy", "Billing") | A system someone else owns |
| Relationship | Rel(user, app, "Uses", "HTTPS") | A link, optionally with a protocol |
| Boundary | Enterprise_Boundary(b, "Acme") { … } | Groups systems inside a border |
C4 diagram FAQ
Which C4 levels does Mermaid support?
Mermaid supports C4Context for the system context level, C4Container for containers, C4Component for components and C4Dynamic and C4Deployment for runtime and infrastructure views. Start the diagram with the keyword for the level you want.
What is the difference between System and System_Ext?
System is something your team builds and runs. System_Ext is a system someone else owns, such as a payment provider, and Mermaid draws it in a muted colour so the boundary of your responsibility is obvious.
How do I label the protocol on a relationship?
Add a third argument to Rel, as in Rel(agent, trymermaid, "Creates diagrams", "MCP over HTTPS"). It is drawn as a smaller label under the relationship.