Mermaid Swimlane Diagram Cheat Sheet

Lanes

A lane is a subgraph, and the subgraph title is the lane name.

swimlane-beta TB
  subgraph Engineering
    a[Build]
  end
  subgraph Design
    b[Sketch]
  end
  b --> a

The same keyword as flowcharts: LR runs the lanes sideways, TB stacks them.

swimlane-beta LR
  subgraph Engineering
    a[Alpha]
    b[Beta]
  end
  a --> b

An arrow between two lanes is a handover. The handover, not the lane, is what the diagram is about.

swimlane-beta TB
  subgraph Frontend
    ui[Click]
  end
  subgraph Backend
    api[Handle]
    db[Save]
  end
  ui --> api
  api --> db

The node shapes are the ones from flowcharts — a box, a cylinder, a diamond.

swimlane-beta TB
  subgraph Engineering
    a[Build]
    b[(Cache)]
  end
  subgraph Operations
    c{Ready?}
  end
  a --> c