CheatPress

Mermaid Diagrams from text

Version 12.0 · source

Mermaid, Postcard, light preview Light · Postcard 102 × 152 mm · PDF Mermaid, Postcard, dark preview Dark · Postcard 102 × 152 mm · PDF Mermaid, Postcard, ink saver preview Ink saver · Postcard 102 × 152 mm · PDF
Mermaid, A5, light preview Light · A5 148 × 210 mm · PDF Mermaid, A5, dark preview Dark · A5 148 × 210 mm · PDF Mermaid, A5, ink saver preview Ink saver · A5 148 × 210 mm · PDF
Mermaid, A4, light preview Light · A4 210 × 297 mm · PDF Mermaid, A4, dark preview Dark · A4 210 × 297 mm · PDF Mermaid, A4, ink saver preview Ink saver · A4 210 × 297 mm · PDF
Mermaid, A4 landscape, light preview Light · A4 landscape 297 × 210 mm · PDF Mermaid, A4 landscape, dark preview Dark · A4 landscape 297 × 210 mm · PDF Mermaid, A4 landscape, ink saver preview Ink saver · A4 landscape 297 × 210 mm · PDF
Mermaid, A3, light preview Light · A3 297 × 420 mm · PDF Mermaid, A3, dark preview Dark · A3 297 × 420 mm · PDF Mermaid, A3, ink saver preview Ink saver · A3 297 × 420 mm · PDF
Mermaid, A3 landscape, light preview Light · A3 landscape 420 × 297 mm · PDF Mermaid, A3 landscape, dark preview Dark · A3 landscape 420 × 297 mm · PDF Mermaid, A3 landscape, ink saver preview Ink saver · A3 landscape 420 × 297 mm · PDF
Mermaid, Letter, light preview Light · Letter 8.5 × 11 in · PDF Mermaid, Letter, dark preview Dark · Letter 8.5 × 11 in · PDF Mermaid, Letter, ink saver preview Ink saver · Letter 8.5 × 11 in · PDF
Mermaid, Tabloid, light preview Light · Tabloid 11 × 17 in · PDF Mermaid, Tabloid, dark preview Dark · Tabloid 11 × 17 in · PDF Mermaid, Tabloid, ink saver preview Ink saver · Tabloid 11 × 17 in · PDF

Start here

flowchart TD
Top-down flowchart
A[Text] --> B(Text)
Two nodes, one arrow
A -->|yes| B
Label a link
sequenceDiagram
Message sequence
subgraph <name> ... end
Group nodes
%% comment
Ignored line
mmdc -i in.mmd -o out.svg
Render to file
```mermaid
Fence in Markdown

Concepts

  1. Text .mmd or ```mermaid
  2. Mermaid JS library
  3. SVG page, PNG, PDF

Flowchart

flowchart TD / LR / BT / RL
Set direction
graph is an accepted alias; TB equals TD
A[Text]
Rectangle node
A{Text}
Decision diamond
A --> B
Arrow
A -->|text| B / A -- text --> B
Labelled link
A --> B & C
One to many
subgraph <id> [<title>]
Group nodes, close with end
classDef <c> fill:#f96,stroke:#333
Define a style class
class A,B <c> / A:::<c>
Apply a class
style A fill:#f9f
Style one node
A["Text (with) symbols"]
Quote text with special characters
%% <comment>
Comment line

Sequence diagram

participant A as <alias>
Declare, order, rename
A->>B: text
Solid arrow message
A-->>B: text
Dotted arrow (reply)
A->>+B: text
Activate B on arrival (- to end)
Note right of A: text
Note beside a participant
loop <label> ... end
Repeat
alt <c> ... else ... end
Alternatives
autonumber
Number the messages

Class diagram

classDiagram
Start a class diagram
class A { +type field / +method() }
Class with members
A <|-- B
Inheritance
A --> B / A -- B
Association / link
A ..> B
Dependency
A "1" --> "*" B : has
Cardinality and label

State, ER, Gantt, Pie

stateDiagram-v2
Start a state diagram
[*] --> A : label
Start state and transition
A --> [*]
End state
erDiagram
Start an ER diagram
A ||--o{ B : has
One to zero-or-more
A { string name PK }
Entity attributes with keys
section <name>
Group tasks
<task> :done, t1, 2026-01-01, 3d
Task: tags, id, start, length
<task> :after t1, 5d
Start after another task
pie showData
Pie chart with values
"Label" : 42
Pie slice

CLI and embedding

npm i -g @mermaid-js/mermaid-cli
Install mmdc
mmdc -i <in.mmd> -o <out.svg>
Render, format by extension
mmdc -t dark -b transparent
Theme and background
mmdc -i in.md -o out.md
Render fences in a Markdown file
<pre class="mermaid">
Embed in an HTML page

Recipes

Request flow
sequenceDiagram  participant U as User  participant S as Server  U->>+S: GET /items  S-->>-U: 200 JSON
Pipeline with a branch
flowchart LR  A[Commit] --> B{Tests pass?}  B -->|yes| C[Deploy]  B -->|no| D[Fix]  D --> A