Swimlane Diagram

Core Diagram Type

Swimlane uses the Flowchart language, so its full IDE intelligence (completions, inspections, formatting, refactoring, and edit mode) is available with a Core or Studio license, the same as Flowchart. Compare editions →

Requires Mermaid 11.16.0+

Swimlane is a Mermaid 11.16.0 feature. The plugin recognizes the language at any runtime, but rendering only works against Mermaid 11.16.0 or newer. Pick the runtime under Settings > Tools > Mermaid Studio > Mermaid Runtime if you’ve pinned an older version.

Beta diagram type

Swimlane is a beta diagram type in Mermaid.js, so its syntax may still evolve in upstream releases.

Mermaid Studio provides language support for Swimlane diagrams inside IntelliJ IDEA and other JetBrains IDEs. A swimlane diagram is a flowchart whose nodes are grouped into lanes, so each step sits in the lane of the actor, team, or system responsible for it. Lanes make hand-offs between roles legible at a glance, which suits process maps and cross-functional workflows.

Swimlane requires Mermaid 11.16.0 or later, which Mermaid Studio bundles and uses as the default rendering version in this release.

Syntax Highlighting

Syntax highlighting integrates directly with IntelliJ’s color scheme system, so diagram colors always match your editor theme. The screenshots below show the same swimlane source rendered across the Armada Dark, Islands Dark, and Islands Light themes.

Armada Dark

Islands Dark

Islands Light

Built on the Flowchart Language

A swimlane is a flowchart with lanes, so Mermaid Studio reuses its flowchart language tooling rather than reimplementing it. The swimlane-beta language inherits the flowchart parser and lexer, which means every piece of flowchart IDE intelligence applies to swimlane source:

• Syntax highlighting for keywords, node ids, edges, lanes, and HTML tags in labels
• Code completion for node shapes, arrow types, keywords, and icons
• Refactoring to rename node ids, lane (subgraph) ids, and CSS class names across the diagram
• Find usages to locate every reference to a node, lane, or CSS class
• Code folding to collapse lanes in large diagrams
• Formatting with the flowchart code style, configurable under Settings > Editor > Code Style > Mermaid
• Inspections for undefined nodes, duplicate ids, and the other flowchart validation rules
• Brace matching for paired brackets

For the full reference on these capabilities, see the Flowchart diagram page.

Drag-to-Reorder Lanes in the Live Preview

Each lane in a swimlane diagram is a subgraph block in the source, and the order of those blocks is the order of the lanes. The live preview turns that mapping into a direct manipulation: in edit mode you can drag a lane to a new position and the plugin rewrites the subgraph order in the .mmd file to match. This reuses the same visual-editing pipeline as flowchart node moves, so the source stays formatted and the change is undoable like any other edit.

The gesture follows the on-screen lane layout, which depends on the diagram direction. In LR and RL diagrams the lanes are horizontal bands stacked top to bottom, so you drag a lane up or down past a neighboring lane’s edge. In TB and BT diagrams the lanes are vertical columns set side by side, so you drag a lane left or right instead. Either way an insertion line marks where the lane will land before you drop it, and the resulting subgraph order is the same regardless of direction.

The clip below shows a lane being dragged to a new position and the source updating in step.

Lane reordering is part of preview edit mode. For how edit mode works, how to enter it, and the other gestures it supports, see Visual Editing in the Live Preview.

Quick Syntax Reference

A swimlane diagram opens with the swimlane-beta keyword and a direction, then declares each lane as a subgraph and wires the nodes together with flowchart edges. The example below routes a support request across three lanes:

swimlane-beta LR
  subgraph Customer
    request[Request service]
    receive[Receive update]
  end

  subgraph Support
    triage[Triage request]
    answer[Send answer]
  end

  subgraph Engineering
    investigate[Investigate issue]
    fix[Prepare fix]
  end

  request --> triage
  triage -->|Known issue| answer
  triage -->|Needs code change| investigate
  investigate --> fix --> answer
  answer --> receive

Key elements:

• Start with swimlane-beta followed by a direction such as LR (left to right) or TB (top to bottom)
• Declare each lane as a subgraph Name ... end block; the block order sets the lane order
• Place a node inside the lane of the actor or system responsible for it
• Connect nodes with the usual flowchart edge syntax (-->, -->|label|, chained a --> b --> c)

Because swimlane shares the flowchart grammar, node shapes, edge styles, CSS classes, and linkStyle declarations all work the same way they do in a flowchart.

For complete syntax details, see the Mermaid Swimlane documentation.