Flowchartio
Sign inTry it freeTry free

Mermaid flowcharts

Mermaid subgraphs and styling

Use "subgraph id [Title] … end" to group nodes, for example one group per team to imitate swimlanes. Use classDef and class (or the ::: shorthand) to style groups of nodes, and style for a single node.

By Flowchartio · Updated · 1 min read

Subgraphs

A subgraph draws a box around a group of nodes, with a title:

flowchart TD
  subgraph customer["Customer"]
    A([Submit application])
  end
  subgraph sales["Sales"]
    B[Review application]
    C{Complete?}
  end
  subgraph backoffice["Back office"]
    D[Run KYC check]
  end
  A --> B --> C
  C -->|No| A
  C -->|Yes| D

Nodes declared inside a subgraph belong to it. Edges can be declared anywhere, and you can also connect to or from a subgraph id directly.

Imitating swimlanes

Mermaid has no dedicated swimlane diagram, but one subgraph per owner gives a close result and keeps the information of a swimlane diagram: who does each step. Flowchartio's Mermaid export uses exactly this pattern, with one subgraph per lane.

Inside a subgraph, you can set its own direction with a direction LR line. Note that when nodes inside a subgraph are linked to nodes outside it, the renderer may ignore the subgraph's direction.

Styling with classes

Define a class once, then apply it to several nodes:

flowchart LR
  A[Manual step] --> B[Automated step]
  classDef auto stroke-dasharray: 4 3
  class B auto

The shorthand B:::auto applies a class where the node is declared. Use classes to mark automated steps, steps under review, or the critical path.

  • style A stroke-width:3px styles one node.
  • linkStyle 0 stroke-width:3px styles the first link (links are numbered in declaration order).

Prefer classes over individual styles: they are easier to maintain and keep the chart consistent.

How Flowchartio exports lanes

In the .mmd export, each lane becomes a subgraph titled with the owner's name, and each step is declared inside the subgraph of its owner. Arrows are declared after all subgraphs, with the decision labels on them. You can paste the file as-is, then add your own classes, for example to highlight automated steps, without changing the structure.

Keep it readable

  • Use styling to carry meaning, not decoration.
  • Do not rely on colour alone; combine it with labels or line styles, so the chart stays readable in print and for colour-blind readers.
  • Platforms apply their own theme (light or dark); test the result where it will be displayed.

Back to the basics in the syntax cheat sheet, or see which export format fits your destination.