C4 Diagram
Last updated:
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
Section titled “Syntax Highlighting”Syntax highlighting integrates directly with IntelliJ’s color scheme system, so diagram colors always match your editor theme.
IDE Support
Section titled “IDE Support”The summary below shows the IDE support Mermaid Studio ships for C4 diagrams, grouped by capability.
Folding lets you collapse and expand structural blocks of the diagram source (subgraphs, frontmatter, multi-line strings) directly in the editor gutter. It keeps long diagrams navigable without forcing you to scroll past detail you don’t need right now.
Use the gutter triangles, Code → Folding, or the standard JetBrains shortcuts (
When the cursor sits next to a bracket, brace, or paren, Mermaid Studio highlights its matching pair across the whole diagram and lets you jump between them. This is especially valuable in nested syntax (subgraph blocks, JSON-style style strings, multi-shape labels) where it’s easy to lose track of which closer goes with which opener.
The line-comment action (
When you type a quote character to start a string, Mermaid Studio inserts the matching closing quote and places the cursor between them. Backspacing through an empty pair removes both characters at once. This keeps quoted labels balanced and reduces fiddly cursor work.
The formatter rewrites your diagram source to a canonical layout (consistent indentation, alignment of multi-line links, normalized whitespace around operators) without changing semantics.
It also clears up the whitespace mistakes that Mermaid’s parser is picky about, normalizing spacing between tokens so the parser accepts the diagram on the first read instead of throwing a confusing syntax error.
Run it with Code → Reformat Code (
Pressing
Live templates expand a short abbreviation into a larger snippet, with tab stops for the parts you fill in.
Type the abbreviation, press
A dedicated Grammar-Kit parser backs the highlighting, so tokens are colored by what they mean in the diagram (a type reference versus a label versus a style), not just what they look like. The same parser validates the syntax as you type, flagging malformed statements in place instead of letting one mistake cascade through the file.
This is the foundation richer features build on; the same grammar drives completions, refactoring, and inspections.
Per-diagram annotators apply rule-based highlighting above the lexer and parser, running on every keystroke and painting their results directly in the editor. Mermaid Studio uses them across the full range the platform supports: highlighting that token types alone cannot decide (coloring a reference by what it resolves to), semantic errors and warnings (an edge pointing at an undefined node, an invalid direction value), and inline cues such as marking duplicate labels. Unlike inspections (configurable checks listed in Settings), annotators are always on, whether a rule ends in a color or a warning.
As you type, Mermaid Studio offers context-aware suggestions filtered to what’s valid at the cursor: node shapes, arrow types, keywords, icon names, identifiers, frontmatter keys, theme variables, and more. Completions cut down on typos and make the diagram syntax self-documenting.
Completion and validation for the YAML frontmatter block above the diagram body, driven by the diagram type’s slice of the Mermaid config schema. Config keys, enum values, and color properties complete as you type, and unknown or mistyped keys are flagged in place.
Hex, named, and rgb()/hsl() colors in style declarations get a small color swatch rendered in the gutter.
Click the swatch to open the IntelliJ color picker and pick a new value, and the source updates in place.
Inlay hints are small inline annotations rendered between tokens, such as parameter names on call sites or counts on summary nodes. They’re configurable per language under Settings → Editor → Inlay Hints.
Inspections are static analyzers that run continuously and surface problems as you edit: duplicate IDs, undefined references, malformed syntax, deprecated patterns, missing required fields. Each inspection has a configurable severity (error, warning, info), can be suppressed inline, and most ship with a quick fix that resolves the issue with one keystroke.
This is where most of the editorial intelligence lives: a diagram type with rich inspections is much harder to break in subtle ways.
Rename refactoring (
Find Usages (
Code Vision renders small inline indicators above declarations, typically reference counts (“5 references”, “3 inbound edges”), so you can see at a glance how connected an element is without running Find Usages. Click an indicator to jump to the references list.
Hovering an element with
The Structure tool window (
Live templates
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “Quick Syntax Reference”Diagram types:
C4Context- System context (highest level)C4Container- Container diagramC4Component- Component diagramC4Dynamic- 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 relationshipRel(from, to, "label", "technology")- With technologyBiRel(a, b, "label")- Bidirectional
For the complete syntax reference, see the Mermaid.js C4 Diagram documentation.