Mermaid cheat sheet

The core of the Mermaid language, one rule at a time — the source beside the diagram it produces. all 34 diagram families, the syntax that actually gets used.

Every picture on this site was drawn byMernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

The four things most diagrams use

Direction, arrows, node shapes and styling — shown here as flowchart syntax. Whatever you are drawing, these four come up first, and they are written the same way in most families.

Direction

The first line picks the flow: TD and TB are the same, LR and RL run sideways.

flowchart LR
  A[Start] --> B[Middle] --> C[End]

A left-to-right flowchart with three boxes labelled Start, Middle and End, connected by arrows.

Arrow types

Four ways to connect two nodes: solid, dotted, open and thick.

flowchart LR
  A[Solid] --> B[Target]
  A -.-> C[Dotted]
  A --- D[Open]
  A ==> E[Thick]

Expand diagram

Node shapes

The brackets you type are the shape you get. These are the five Mernyx draws as everyday boxes.

flowchart LR
  A[Rectangle] --> B(Rounded)
  B --> C([Stadium])
  C --> D[[Subroutine]]
  D --> E[(Database)]

A flowchart of five connected nodes, each drawn in a different shape: a rectangle, a rounded box, a stadium, a subroutine and a database cylinder.

Styling a node

style changes one node; classDef names a style you can reuse.

flowchart LR
  A[Normal] --> B[Highlighted]
  style B fill:#ee421d,color:#ffffff,stroke:#b32c0c
  classDef quiet fill:#f0f0f3,stroke:#d4d4d8
  class A quiet

Expand diagram

The diagram families

Each family has its own page, its own syntax and its own rules.

Mernyx renders 34 diagram families in total. This sheet covers all of them.

Questions

Is this the Mermaid documentation?

No. The official Mermaid docs are exhaustive — the flowchart page alone runs to hundreds of shapes. This is a condensed cheat sheet of the core syntax, the part you look up while writing a diagram. Where the official docs go deep, this page goes straight to the rule.

Why do the pictures look different from mermaid.live?

Because they are not drawn by Mermaid.js. Every diagram here is rendered by Mernyx’s own engine — the same native renderer the app uses for its canvas. Colours, spacing and typography are Mernyx’s, so what you see is what the app produces.

Can I paste these snippets into any Mermaid tool?

Yes. The source under each heading is plain Mermaid and works anywhere. The picture beside it is a rendering of that source by Mernyx — it is an illustration, not a special format.

Which diagram families are covered here?

This sheet covers all 34 diagram families Mernyx renders — one page each, linked from the list above.

Does Mernyx support every Mermaid feature?

Not yet, and the site will not pretend otherwise. Coverage keeps growing after 1.0, and the capability matrix lists what each of the 34 families can do — where a family cannot do something, the app does not offer that action at all rather than failing quietly.

Open one in Mernyx.

Take any snippet from this page, paste it into Mernyx, and move a node on the canvas. The source comes with it.

Buy Mernyx Pro — $19 Download free