# 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.

## 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.

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

![A left-to-right flowchart with three boxes labelled Start, Middle and End, connected by arrows.](/diagrams/flowchart/direction.svg)

### Arrow types

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

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

![One node on the left connected to four nodes on the right by a solid arrow, a dotted arrow, an open line and a thick arrow.](/diagrams/flowchart/edges.svg)

### Node shapes

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

```mermaid
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.](/diagrams/flowchart/shapes.svg)

### Styling a node

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

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

![Two boxes connected by an arrow. The right box is filled coral, the left box is filled light grey.](/diagrams/flowchart/styling.svg)

## The diagram families

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

- [Flowchart](/cheat-sheet/flowchart/index.md): Boxes, arrows and branches — the diagram most people mean by Mermaid.
- [Sequence diagram](/cheat-sheet/sequence/index.md): Messages between participants, in order, over time.
- [Class diagram](/cheat-sheet/class/index.md): Types, their members, and how they relate.
- [State diagram](/cheat-sheet/state/index.md): States, the moves between them, and the branching in between.
- [ER diagram](/cheat-sheet/er/index.md): Entities, their columns, and the cardinalities between them.
- [Mindmap](/cheat-sheet/mindmap/index.md): A text outline that becomes a tree, with no arrows to write.
- [Architecture diagram](/cheat-sheet/architecture/index.md): Services, the groups they live in, and the edges between them.
- [Requirement diagram](/cheat-sheet/requirement/index.md): Requirements, their kinds, and what satisfies them.
- [Block diagram](/cheat-sheet/block/index.md): A wall of blocks, read from left to right.
- [Swimlane diagram](/cheat-sheet/swimlane/index.md): A process split into lanes, one per owner.
- [Agent flow diagram](/cheat-sheet/agentflow/index.md): An agent’s steps, and what kind of step each one is.
- [Use case diagram](/cheat-sheet/usecase/index.md): Actors, use cases, and the system that owns them.
- [Pie chart](/cheat-sheet/pie/index.md): A labelled list of values, drawn as slices.
- [Gantt chart](/cheat-sheet/gantt/index.md): Tasks, sections and dates, laid out along a time axis.
- [Quadrant chart](/cheat-sheet/quadrant/index.md): Two axes, four quadrants, and the points plotted on them.
- [Radar chart](/cheat-sheet/radar/index.md): One axis per measure, one curve per thing being compared.
- [Treemap](/cheat-sheet/treemap/index.md): Nested rectangles whose area is the value.
- [Kanban diagram](/cheat-sheet/kanban/index.md): Columns of cards, one column per stage of the work.
- [Packet diagram](/cheat-sheet/packet/index.md): The bits of a network packet, field by field.
- [Info diagram](/cheat-sheet/info/index.md): Mermaid’s version banner — Mernyx recognises it, but does not draw it yet.
- [Timeline](/cheat-sheet/timeline/index.md): Periods down one side, events beside them.
- [Sankey diagram](/cheat-sheet/sankey/index.md): A flow, written as three fields per line.
- [User journey](/cheat-sheet/journey/index.md): A path with a score on every step.
- [Venn diagram](/cheat-sheet/venn/index.md): Overlapping sets, and the regions they share.
- [C4 diagram](/cheat-sheet/c4/index.md): The architecture views, at three levels of zoom.
- [Cynefin diagram](/cheat-sheet/cynefin/index.md): Five domains, each with its own way of deciding.
- [Git graph](/cheat-sheet/gitgraph/index.md): A branch history, drawn.
- [XY chart](/cheat-sheet/xychart/index.md): A line or a bar chart on two axes.
- [Wardley map](/cheat-sheet/wardley/index.md): Where a component sits on visibility and on evolution.
- [Railroad diagram](/cheat-sheet/railroad/index.md): A grammar rule, drawn.
- [ZenUML diagram](/cheat-sheet/zenuml/index.md): A sequence diagram, written for a method call.
- [Event modeling diagram](/cheat-sheet/eventmodeling/index.md): How the information changed, in time.
- [Ishikawa diagram](/cheat-sheet/ishikawa/index.md): One problem, and the causes under it.
- [Tree view](/cheat-sheet/treeview/index.md): A directory listing, drawn.

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.