Mermaid cheat sheet

Mermaid cheat sheet, with an editor attached

One minimal snippet and the four tokens that matter for each core diagram type. Copy a snippet, paste it into the editor below, and export a clean PNG, SVG, or PDF.

Flowchart

Boxes and arrows for how a process or system moves from step to step.

flowchart LR
  A[Start] --> B{Valid?}
  B -- yes --> C[Export PNG]
  B -- no --> A

A[Step]: Rectangle — a process step
A{Choice?}: Diamond — a decision
A -->|yes| B: Arrow with a label
subgraph ... end: Group steps in a box

Convert flowchart to PNG →

Sequence diagram

Ordered messages between actors over time.

sequenceDiagram
  participant U as User
  participant T as Tool
  U->>T: Paste code
  T-->>U: PNG ready

A->>B: msg: Solid arrow — a call
A-->>B: msg: Dotted arrow — a reply
loop ... end: Repeat block
alt / else / end: Branch block

Convert sequence diagram to PNG →

Class diagram

Classes, members, and the relationships between them.

classDiagram
  class Converter {
    +render()
    +download()
  }
  Converter ..> Image : creates

A <|-- B: Inheritance
A *-- B: Composition
+method(): Public member
<<interface>>: Annotation

Convert class diagram to PNG →

ER diagram

Entities, attributes, and the cardinality between tables.

erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ LINE : contains

||: Exactly one
}o: Zero or more
}|: One or more
A ||--o{ B : verb: One A to many B

Convert er diagram to PNG →

Gantt chart

Tasks, sections, and dates on a timeline.

gantt
  dateFormat YYYY-MM-DD
  section Build
  Design :a1, 2026-01-05, 3d
  Ship :after a1, 2d

: id, date, 3d: Task with duration
: after a1, 2d: Depends on a task
done / active: Status tags
excludes weekends: Skip days

Convert gantt chart to PNG →

State diagram

States and the events that move between them.

stateDiagram-v2
  [*] --> Draft
  Draft --> Review: submit
  Review --> [*]: approve

[*] --> State: Where it starts
A --> B : event: Move on an event
state A { ... }: Composite state
direction LR: Left-to-right layout

Convert state diagram to PNG →

More diagram types

These types have little or no syntax to memorize — paste an example into the editor and edit it. For anything bigger, validate first with the Mermaid syntax checker.

TimelineEvents in time order

Try it →

MindmapIdeas branching from a root

Try it →

Pie chartShare of a total

Try it →

GitGraphBranches and commits

Try it →

C4Architecture layers

Try it →

Quadrant chartItems on two axes

Try it →

Paste any snippet and export

The editor below starts with a flowchart. Replace it with any snippet from this page — or your own code — and export PNG, SVG, JPG, WebP, or PDF. Free, no signup, no watermark.

Paste or edit Mermaid code

Replace the sample below, or load another example.

Load example

Paste Mermaid code here. Preview and export load locally in your browser.

flowchart LR
  A(Write) --> B(Preview)
  B --> C(Export)
  B --> D(Docs Asset)

Live previewSample preview · Clean Docs

Render & export

Export controls activate after your diagram renders locally.

Flowchart

Mode

Default renderNative MermaidOptimized exportStyled download

Export style

Clean DocsGitHub READMEGitHub DarkTransparent DocsWarm Editorial✦ ProWhiteboard Sketch✦ ProAurora Noir✦ ProBlueprint✦ ProChampagne✦ ProEmerald Suite✦ ProEditorial✦ Pro

Scale

1x2x4x

Or exact width, e.g. 1200px wide

Output: White · comfortable padding

Size: calculated after render

Filename: mermaid-flowchart-white-2x.png

Export any diagram type

Mermaid to image Mermaid to PNG Mermaid to SVG Mermaid to JPG Mermaid to WEBP Mermaid to PDF Flowchart to PNG Sequence diagram to PNG Class diagram to PNG ER diagram to PNG Gantt chart to PNG State diagram to PNG

FAQ

Mermaid cheat sheet questions

Is this Mermaid cheat sheet free to use?+

Yes. The cheat sheet and the editor below are free — no signup, no watermark on exports, and rendering happens locally in your browser.

How do I turn one of these snippets into a PNG?+

Copy the snippet, paste it into the editor below, then click Download PNG. You can set the background, theme, and 2x/4x scale before exporting.

Where can I check my Mermaid syntax before exporting?+

Paste your code into the editor below — invalid lines are flagged inline. For a focused pass, use the Mermaid syntax checker, which validates code and shows the failing line.

What file extension do Mermaid files use?+

.mmd and .mermaid are both common. The file is plain text, so you can also keep Mermaid code inside Markdown fences or paste it directly into the editor.

Does this cover every Mermaid diagram type?+

It covers the six core types people export most — flowchart, sequence, class, ER, Gantt, and state — plus a quick reference for timeline, mindmap, pie, GitGraph, C4, and quadrant charts. Try any of them in the editor below.