Sequence Diagram
Last updated:
Mermaid Studio provides full language support for Sequence diagrams inside IntelliJ IDEA and other JetBrains IDEs. Sequence diagrams show how processes interact with each other over time, and are essential for documenting API flows, system integrations, and protocol specifications.
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 sequence 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 the Mermaid.js 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.js 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.
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 (
Hovering an element with
Bundled and user-authored color themes with light and dark variants that apply to this diagram type from the Appearance menu or the Switch Diagram Theme action. Applying a theme writes the resolved theme variables into the diagram’s frontmatter, so the file renders the same outside the IDE.
Double-click an element to edit its label in place. The change is written back to the source when you commit it.
Inline-editable here: noteText.
Drag an element to a new position, rewriting the source order or layout hints to match.
Drag an edge endpoint onto a different element to rewire the connection in the source.
Remove the selected elements and their source, including batch deletion of a multi-selection.
Highlighting extends into the embedded JSON of properties and links blocks, and completion filters out top-level-only keywords inside control-flow blocks where Mermaid.js wouldn’t accept them.
Parse errors are isolated per block body, so a mistake inside one alt or loop never cascades through the rest of the file.
Visual editing
Section titled “Visual editing”Turn on Edit Mode (pencil icon) in the editor toolbar and you can build and rearrange a sequence diagram directly in the preview.
Every edit is written back to the source as ordinary Mermaid.js syntax, and
In the clip below, a message’s text is edited in place, then two messages are wrapped in a loop with
Adding elements
Section titled “Adding elements”The diagram actions toolbar in the corner of the preview adds a participant or sets up numbering:
- Add Participant opens a picker of the participant types, from a plain participant to an actor, database, or queue, and declares the new participant with its display name ready to type.
- Autonumber turns message numbering on or off and sets its start and step.
Everything else starts from a lifeline.
Hover a lifeline and a + appears in each gap between messages.
Drag a + across to another lifeline to add a message there, or drag it down along its own lifeline to add an activation.
Right-click a lifeline for the full set of additions at that point, as shown here for the API lifeline:
A new message, note, or participant opens its text for editing straight away, so you can type the label without reaching for the mouse.
Editing elements
Section titled “Editing elements”Double-click an element, or select it and press as and never changes the participant’s ID, so use the Rename refactoring to change the ID itself.
Pickers change what an element is, such as a participant’s type or a message’s arrow. With several elements of the same kind selected, a picker applies to all of them.
A rect or box gets its color from swatches derived from the diagram’s theme, so the color you pick suits both the theme and the lifelines drawn over it.
The CSS color field takes any other color:
Moving elements
Section titled “Moving elements”Drag a participant’s header sideways to reorder the participants, or drag it across a box’s edge to move it into or out of the box.
Drag a message, note, or fragment up or down to move it, including into and out of a fragment’s sections.
A selected message shows a grip at each end; drag one onto another lifeline to change the sender or recipient.
A selected over note has grips to stretch it across more lifelines, and a selected activation bar has handles to change where it starts and ends.
The same moves work from the keyboard, so you can step an element one place at a time with the shortcuts in the action reference.
Grouping
Section titled “Grouping”- Messages, notes, and fragments — Wrap in Fragment opens a picker of fragment kinds, from
loopandalttorect. Type a kind’s first letter to pick it, then type the condition. - Participants in adjacent columns — Group into Box wraps them in a new
boxand opens its title for editing.
alt, par, or critical fragment, Add Section appends an else, and, or option section.
Action reference
Section titled “Action reference”Every action is in the element’s right-click menu.
Press
You can rebind any of the shortcuts below in Settings > Keymap (search for “Mermaid”).
Participant
Section titled “Participant”| Action | Shortcut or gesture |
|---|---|
| Edit Display Name | Double-click or |
| Change Type… | Menu |
| Move Left / Move Right | |
| Group into Box | |
| Remove from Box | |
| Delete |
Deleting a participant also removes its messages, activations, and create and destroy lines.
Message
Section titled “Message”| Action | Shortcut or gesture |
|---|---|
| Edit Text | Double-click or |
| Change Arrow… | Menu |
| Move Up / Move Down | |
| Move Recipient Left / Right | |
| Move Sender Left / Right | |
| Reverse Direction | Menu (no default shortcut) |
| Wrap in Fragment… | |
| Delete |
| Action | Shortcut or gesture |
|---|---|
| Edit Text | Double-click or |
| Change Placement… | Menu |
| Move Up / Move Down | |
| Stretch across lifelines | Drag the grips of an over note |
| Wrap in Fragment… | |
| Delete |
Fragment
Section titled “Fragment”These actions apply to every fragment kind except rect, which has its own entry below.
Select a fragment by its label tab or its frame.
| Action | Shortcut or gesture |
|---|---|
| Edit Condition | Double-click or |
| Change Type… | Menu |
| Add Section | Menu (alt, par, and critical) |
| Move Up / Move Down | |
| Wrap in Fragment… | |
| Unwrap |
Section
Section titled “Section”A section is an else, and, or option part of a fragment after its first.
| Action | Shortcut or gesture |
|---|---|
| Edit Label | Double-click or |
| Remove Section |
Removing a section merges its statements into the section above.
A rect takes the fragment actions above, except that it has no condition: double-click or
| Action | Shortcut or gesture |
|---|---|
| Edit Title | Double-click or |
| Edit Color… | Menu |
| Unwrap |
Activation bar
Section titled “Activation bar”| Action | Shortcut or gesture |
|---|---|
| Change start or end | Drag the bar’s top or bottom handle |
| Delete |
Dropping a handle on a message writes a + or - marker on it; dropping it between messages writes an activate or deactivate line.
Lifeline
Section titled “Lifeline”| Action | Shortcut or gesture |
|---|---|
| Add a message | Drag a + across to another lifeline, or Add Message To in the menu |
| Add an activation | Drag a + down the lifeline, or Activate Here in the menu |
| Add Note | Menu |
| Create Participant | Menu |
| Destroy Here | Menu |
Live templates
Section titled “Live templates”A set of 31 context-aware live templates scaffolds the block keywords, participant and actor declarations, notes, messages, and autonumber statements that sequence diagrams use day-to-day. 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 Sequence Diagram group. See Live Templates for the cross-cutting mechanics (triggering, contextual visibility, configuration).
Block wrappers
Section titled “Block wrappers”| Abbreviation | Expansion |
|---|---|
bloop | loop ... end |
balt | alt ... else ... end |
bopt | opt ... end |
bpar | par ... and ... end |
bcrit | critical ... option ... end |
bbrk | break ... end |
bbox | Participant grouping box (box ... end) |
brect | Background rectangle (rect rgb(...) ... end) |
| Abbreviation | Expansion |
|---|---|
nl | Note left of participant |
nr | Note right of participant |
no | Note over participant |
Participants and actors
Section titled “Participants and actors”The prta and atra templates produce as-aliased declarations; cprta and catra produce the create variants.
The prj and atj templates use the typed-metadata @{type: ...} form (Mermaid.js 11.13.0+); cprj and catj produce the create variants of those.
| Abbreviation | Expansion |
|---|---|
prta | participant X as "Label" |
atra | actor X as "Label" |
cprta | create participant X as "Label" |
catra | create actor X as "Label" |
prj | participant X@{type: ...} (11.13.0+) |
atj | actor X@{type: ...} (11.13.0+) |
cprj | create participant X@{type: ...} |
catj | create actor X@{type: ...} |
Messages
Section titled “Messages”msg is the generic form: it expands the arrow as a picker variable, so you choose the operator on insert.
The other ten templates each hard-code one operator for when you already know the shape you want.
| Abbreviation | Expansion |
|---|---|
msg | Message with arrow picker (A -> B: text) |
ms | Solid line, no arrowhead (A -> B: text) |
msf | Solid line with arrowhead (A ->> B: text) |
md | Dotted line, no arrowhead (A --> B: text) |
mdf | Dotted line with arrowhead (A -->> B: text) |
mc | Solid line with cross (A -x B: text) |
mdc | Dotted line with cross (A --x B: text) |
ma | Async solid arrow (A -) B: text) |
mda | Async dotted arrow (A --) B: text) |
mb | Bidirectional solid (A <<->> B: text) |
mdb | Bidirectional dotted (A <<-->> B: text) |
Autonumbering
Section titled “Autonumbering”| Abbreviation | Expansion |
|---|---|
autns | autonumber 10 10 (start + step) |
Quick Syntax Reference
Section titled “Quick Syntax Reference”Participants
Section titled “Participants”sequenceDiagram participant A as Alice participant B as Bob A->>B: HelloMessage Types
Section titled “Message Types”| Syntax | Meaning |
|---|---|
-> | Solid line |
--> | Dashed line |
->> | Solid with arrowhead |
-->> | Dashed with arrowhead |
-x | Solid with cross |
--x | Dashed with cross |
<->> | Bidirectional |
-) | Half-arrow (Mermaid.js 11.13.0+) |
--) | Dashed half-arrow (Mermaid.js 11.13.0+) |
Activation
Section titled “Activation”sequenceDiagram Client->>+Server: Request Server-->>-Client: ResponsesequenceDiagram Alice->>Bob: Hello Note right of Bob: Bob thinks Bob-->>Alice: Hi!For full syntax details, see the Mermaid.js sequence diagram documentation.