Mermaid.js Swimlane Diagram Syntax Guide

Mermaid.js provides dedicated syntax designed specifically to build Swimlane diagrams. With plain-text declarations, you can map multi-actor workflows, cross-functional business processes, and system responsibilities across distinct lane boundaries without manually positioning layout shapes.

1. Core Swimlane Syntax & Direction

Swimlane diagrams use subgraph blocks to define individual role lanes (e.g., departments, systems, or actors) and direction flags (such as LR for left-to-right or TD for top-down layout) to control process orientation.

Syntax Construct	Swimlane Element	Description
`swimlane LR` / `TD`	Diagram Declaration	Initializes the diagram layout direction (Left-to-Right or Top-Down)
`subgraph Name ... end`	Lane Definition	Groups tasks, nodes, and steps within a named actor or department lane
`node[Label]`	Action Node	Defines a discrete step or task assigned to the containing lane
`node1 --> node2`	Process Flow	Connects tasks sequentially across or within lane boundaries
`-->\|Label\|`	Decision Label	Annotates connection arrows with conditional paths or status descriptions

Mermaid Edit Mermaid in VPasCode

swimlane-beta LR
    subgraph Client
      start[Submit Form]
      view[View Confirmation]
    end

    subgraph Server
      process[Process Request]
    end

    start --> process --> view

Edit Mermaid in VPasCode

2. Incident & Support Workflow Example

Use subgraphs to map task handoffs between customer support representatives, engineering teams, and end users during operational escalation paths.

Mermaid Edit Mermaid in VPasCode

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

Edit Mermaid in VPasCode

3. Cross-Functional Order Fulfillment Example

The following example demonstrates a multi-department e-commerce order process mapped across sales, inventory, and logistics lanes.

Mermaid Edit Mermaid in VPasCode

swimlane-beta LR
    subgraph Buyer
      checkout[Place Order]
      confirm[Receive Item]
    end

    subgraph Operations
      verify[Verify Payment]
      pack[Pack Order]
    end

    subgraph Logistics
      ship[Dispatch Carrier]
      deliver[Deliver Package]
    end

    checkout --> verify
    verify -->|Success| pack
    pack --> ship --> deliver --> confirm

Edit Mermaid in VPasCode

Conclusion

Using Mermaid’s Swimlane syntax gives system architects, business analysts, and product teams a clean, code-driven way to document cross-functional workflows. By organizing nodes into logical subgraphs and connecting them across lane boundaries, you can produce clear responsibility maps directly within your technical documentation.