C4 Diagram

Mermaid Studio provides comprehensive support for C4 model diagrams inside IntelliJ-based IDEs, making it easy to document your system architecture without leaving your editor. C4 diagrams visualize software architecture at different levels of abstraction — Context, Container, Component, and Dynamic — and Mermaid Studio supports every variant.

Syntax Highlighting

Syntax highlighting integrates directly with IntelliJ’s color scheme system, so diagram colors always match your editor theme.

Armada Dark

Islands Dark

Islands Light

IDE Support

Mermaid Studio provides comprehensive support for C4 diagrams:

• Syntax highlighting - Color-coded elements, boundaries, and relationships
• Code completion - Suggestions for C4 elements and relationship types
• Live templates - Abbreviations that scaffold elements, boundaries, deployment nodes, relationships, and styling overrides
• Documentation hover - See element descriptions on hover
• Refactoring - Rename elements and update all references
• Find usages - See where elements are referenced
• Inlay hints - Inline parameter hints for clarity
• Code Vision - Relationship counts at a glance
• Navigation bar - Quick access to elements
• Brace matching - Navigate boundary delimiters
• Code folding - Collapse boundaries and containers
• Formatting - Auto-format your diagram code
• Inspections - Detect undefined references
• Color provider - Preview and pick colors for styling
• Structure view - Hierarchical overview of elements and boundaries

Live templates

A set of 40 context-aware live templates scaffolds the people, systems, containers, components, boundaries, deployment nodes, relationships, and styling overrides that C4 diagrams use. Type a short abbreviation, accept it from the completion popup, and tab through the template variables.

Individual abbreviations can be toggled under Settings > Tools > Mermaid Studio > Live Templates in the C4 group. See Live Templates for the cross-cutting mechanics (triggering, contextual visibility, configuration).

People and systems

The e-suffixed abbreviations produce the _Ext external variants of each element.

Abbreviation	Expansion
per	Person (Person(alias, "label", "desc"))
pere	External person (Person_Ext(...))
sys	Software system (System(...))
sysdb	System database (SystemDb(...))
sysq	System queue (SystemQueue(...))
syse	External software system (System_Ext(...))
sysdbe	External system database (SystemDb_Ext(...))
sysqe	External system queue (SystemQueue_Ext(...))

Containers

Abbreviation	Expansion
con	Container (Container(alias, "label", "techn", "desc"))
condb	Container database (ContainerDb(...))
conq	Container queue (ContainerQueue(...))
cone	External container (Container_Ext(...))
condbe	External container database (ContainerDb_Ext(...))
conqe	External container queue (ContainerQueue_Ext(...))

Components

Abbreviation	Expansion
cmp	Component (Component(...))
cmpdb	Component database (ComponentDb(...))
cmpq	Component queue (ComponentQueue(...))
cmpe	External component (Component_Ext(...))
cmpdbe	External component database (ComponentDb_Ext(...))
cmpqe	External component queue (ComponentQueue_Ext(...))

Boundaries

Each boundary template wraps its body in a block you tab into to add nested elements.

Abbreviation	Expansion
bnd	Boundary block (Boundary(alias, "label") { ... })
eb	Enterprise boundary block (Enterprise_Boundary(...) { ... })
sb	System boundary block (System_Boundary(...) { ... })
cb	Container boundary block (Container_Boundary(...) { ... })

Deployment nodes

Abbreviation	Expansion
dnode	Deployment node block (Deployment_Node(alias, "label", "type") { ... })
node	Node block (Node(...) { ... })
nodel	Left-aligned node block (Node_L(...) { ... })
noder	Right-aligned node block (Node_R(...) { ... })

Relationships

The directional templates pin the arrow direction, and rli is the indexed form used in dynamic diagrams. The from and to fields draw on name completion, so they suggest the aliases already declared in the diagram.

Abbreviation	Expansion
rel	Relationship (Rel(from, to, "label"))
relt	Relationship with technology (Rel(from, to, "label", "techn"))
birel	Bidirectional relationship (BiRel(from, to, "label"))
relu	Relationship pointing up (Rel_Up(...))
reld	Relationship pointing down (Rel_Down(...))
rell	Relationship pointing left (Rel_Left(...))
relr	Relationship pointing right (Rel_Right(...))
relb	Back relationship (Rel_Back(...))
rli	Indexed relationship for dynamic diagrams (RelIndex(index, from, to, "label"))

Styling and layout

Abbreviation	Expansion
ues	Update element style (UpdateElementStyle(alias, $bgColor=..., $fontColor=...))
urs	Update relationship style (UpdateRelStyle(from, to, $textColor=..., $lineColor=...))
ulc	Update layout config (UpdateLayoutConfig($c4ShapeInRow=..., $c4BoundaryInRow=...))

Starter samples

The sample picker seeds a new diagram from a working example instead of a blank file. C4 now ships a starter for each level, so you can begin from the abstraction you’re documenting rather than rebuilding the scaffolding from C4Context by hand.

The picker lists the C4 starters alongside the rest of the catalog, with a live preview of the selected one.

Five C4 starters are available, one per level. Container, Component, Dynamic, and Deployment are new in this release; Context shipped previously.

Sample	Starts you with
C4 Context	A system in scope, its users, and external systems it interacts with.
C4 Container	Containers within a system: apps, services, data stores.
C4 Component	Components inside a container and their interactions.
C4 Dynamic	Runtime collaboration between elements, step by step.
C4 Deployment	How containers map onto infrastructure nodes.

Each starter has a Basic and a Styled variant; toggle between them in the picker’s toolbar before inserting.

Quick Syntax Reference

Diagram types:

• C4Context - System context (highest level)
• C4Container - Container diagram
• C4Component - Component diagram
• C4Dynamic - Dynamic/sequence view

Elements:

C4Container
    Person(user, "User", "Description")
    System(sys, "System", "Description")
    System_Ext(ext, "External", "Description")
    Container(cont, "Container", "Tech", "Description")
    ContainerDb(db, "Database", "PostgreSQL", "Stores data")

Boundaries:

C4Container
    System_Boundary(b1, "My System") {
        Container(api, "API", "Node.js")
        ContainerDb(db, "Database", "PostgreSQL")
    }

Relationships:

• Rel(from, to, "label") - Basic relationship
• Rel(from, to, "label", "technology") - With technology
• BiRel(a, b, "label") - Bidirectional

For the complete syntax reference, see the Mermaid.js C4 Diagram documentation.