State Diagram

Core Diagram Type

Full IDE intelligence (completions, inspections, formatting, refactoring) is available with a Core or Studio license. Compare editions →

Mermaid Studio provides full language support for State diagrams inside IntelliJ-based IDEs. State diagrams visualize the states an entity can be in and the transitions between those states, and are invaluable for modeling workflows, user interfaces, protocol behavior, and any system with distinct operational modes.

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 state diagrams:

• Syntax highlighting with distinct color keys for arrows, concurrent dividers, transition labels, hex colors, CSS properties, literal CSS values, and direction values. Each attribute is tunable under Settings > Editor > Color Scheme > Mermaid State Diagram.
• Code completion for state syntax and keywords
• Live templates for state declarations, transitions, and notes (13 abbreviations)
• Click statement parsing for both upstream forms (click ID "url" "tooltip" and click ID href "url"), including on [*] edge states
• Rename refactoring to update state names across the diagram, including comma-separated class A,B,C styleName targets
• Find usages to locate state references
• Formatter with composite-body indentation and statement-level whitespace normalization. The base indent level is configurable under Settings > Editor > Code Style > Mermaid > State Diagram.
• Composite-state error isolation — a parse error inside one composite state stays contained inside that body, so sibling states and transitions keep working while you fix the broken block.
• Code folding to collapse composite states
• Brace matching for nested state definitions
• Inspections for detecting unreachable states and invalid transitions
• Code Vision showing transition counts
• Color provider for styling state colors

Live templates

A set of 13 context-aware live templates scaffolds state declarations, transitions, and notes. 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 State Diagram group. See Live Templates for the cross-cutting mechanics (triggering, contextual visibility, configuration).

State declarations

Abbreviation	Expansion
sa	Aliased state with description (state "..." as Name)
sc	Composite state with body
sch	Choice pseudo-state (state Name <<choice>>)
sf	Fork pseudo-state (state Name <<fork>>)
sj	Join pseudo-state (state Name <<join>>)

Transitions

Abbreviation	Expansion
tr	Transition (From --> To)
trl	Transition with label (From --> To : event)
trs	Transition from start ([*] --> To)
tre	Transition to end (From --> [*])

Notes

Abbreviation	Expansion
nl	Note left of state (inline form)
nr	Note right of state (inline form)
nlm	Note left of state (multi-line form)
nrm	Note right of state (multi-line form)

Quick Syntax Reference

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> Working
        Working --> Waiting : pause
        Waiting --> Working : resume
    }

    Active --> Inactive : disable
    Inactive --> Active : enable
    Inactive --> [*]

    note right of Active : Main operational state

Key elements:

• [*] - Initial and final states
• state1 --> state2 - Transition between states
• state1 --> state2 : event - Transition with event label
• state Name { } - Composite (nested) state
• note - Add notes to states

For complete syntax details, see the Mermaid State Diagram documentation.