Skip to content
MermaidViewer
Log inOpen editor

Mermaid cheat sheet

Every piece of Mermaid syntax you reach for, on one page. Bookmark it, and click any example to open it in the live editor.

Basics

  • The first line declares the diagram type, e.g. flowchart LR, sequenceDiagram, erDiagram.
  • Comments start with %%.
  • Wrap labels with special characters in double quotes: A["Hello (world)"].
  • Flowchart directions: TB/TD (top-down), BT, LR, RL.
  • Markdown in labels: A["`**bold** and _italic_`"].

Flowchart

Node shapes

SyntaxShape
A[Text]Rectangle
A(Text)Rounded rectangle
A([Text])Stadium / pill
A[[Text]]Subroutine
A[(Text)]Cylinder (database)
A((Text))Circle
A(((Text)))Double circle
A>Text]Asymmetric flag
A{Text}Rhombus (decision)
A{{Text}}Hexagon
A[/Text/]Parallelogram
A[\Text\]Parallelogram (alt)
A[/Text\]Trapezoid
A[\Text/]Trapezoid (alt)
A@{ shape: doc, label: "Report" }Named shape syntax (v11+)

Links and arrows

SyntaxLink
A --> BArrow
A --- BLine without arrow
A -.-> BDotted arrow
A ==> BThick arrow
A --text--> BArrow with label
A -->|text| BArrow with label (alt)
A --o BCircle end
A --x BCross end
A <--> BBidirectional
A ---> BLonger link (more rank)
A ~~~ BInvisible link (layout only)
A --> B & CChain to several nodes

Subgraphs

mermaid
flowchart LR
    subgraph API["API layer"]
        direction TB
        G[Gateway] --> S[Service]
    end
    U[User] --> API

More in the flowchart guide.

Sequence diagram

SyntaxMeaning
A->>B: msgSolid line with arrowhead (sync call)
A-->>B: msgDotted line with arrowhead (reply)
A->B: msgSolid line, no arrowhead
A-)B: msgAsync message
A-xB: msgMessage with cross (lost/failed)
activate A / deactivate AActivation bar (or use +/- after the arrow)
Note right of A: textNote (left of / right of / over A,B)
loop / alt / else / opt / par / and / critical / break ... endControl blocks
autonumberNumber every message
box Aqua Group ... endGroup participants
rect rgb(240,240,255) ... endHighlight a region

See the sequence diagram reference and tutorial.

Class diagram

SyntaxRelationship
A <|-- BInheritance
A *-- BComposition
A o-- BAggregation
A --> BAssociation
A ..> BDependency
A ..|> BRealization
A "1" --> "*" BCardinality
+public -private #protected ~packageMember visibility
<<interface>> AAnnotation

ER diagram cardinality

SyntaxMeaning
|o--o|Zero or one to zero or one
||--||Exactly one to exactly one
}o--o{Zero or more to zero or more
}|--|{One or more to one or more
||--o{One to zero-or-more (classic 1:N)
-- vs ..Identifying (solid) vs non-identifying (dashed)
string name PK "comment"Attribute with key and comment

Generate one from a schema with the SQL to ER diagram guide.

Styling

classDef, style and linkStyle

mermaid
flowchart LR
    A[Start] --> B[Process] --> C[Done]
    classDef ok fill:#dcfce7,stroke:#16a34a,color:#14532d
    classDef warn fill:#fef9c3,stroke:#ca8a04
    class C ok
    B:::warn
    style A stroke-dasharray: 5 5
    linkStyle 0 stroke:#0d9488,stroke-width:2px
Open in the live editor

Read Mermaid themes and styling for more.

Config & themes

Use a YAML frontmatter block at the very top of the diagram to set a title, theme, look and per-diagram options. Built-in themes: default, neutral, dark, forest and base (customisable with themeVariables).

mermaid
---
title: My diagram
config:
  theme: forest
  look: handDrawn
  flowchart:
    curve: linear
---
flowchart LR
    A --> B

All diagram types

DiagramStarts withKey syntax
Flowchartflowchart TDflowchart TD · A[Text] · A(Text) / A([Text])
Sequence DiagramsequenceDiagramsequenceDiagram · participant A as Alice · actor U
Class DiagramclassDiagramclassDiagram · class Name { +type field \n +method() ret } · + - # ~
State DiagramstateDiagram-v2stateDiagram-v2 · [*] --> A · A --> B : event
Entity Relationship DiagramerDiagramerDiagram · A ||--o{ B : label · |o / o|
Gantt Chartganttgantt · title Text · dateFormat YYYY-MM-DD
Pie Chartpie showDatapie · pie showData · title Text
Mindmapmindmapmindmap · Indentation · root((Text))
Timelinetimelinetimeline · title Text · Period : Event
Git GraphgitGraphgitGraph · commit / commit id: "x" · commit type: HIGHLIGHT | REVERSE
User Journeyjourneyjourney · title Text · section Name
Quadrant ChartquadrantChartquadrantChart · x-axis Left --> Right · y-axis Bottom --> Top
Sankey Diagramsankeysankey · source,target,value · "Name, with comma",target,5
XY Chart (Bar & Line)xychartxychart · xychart horizontal · title "Text"
Requirement DiagramrequirementDiagramrequirementDiagram · requirement name { id: … text: … risk: … verifymethod: … } · functionalRequirement / performanceRequirement / interfaceRequirement / physicalRequirement / designConstraint
C4 DiagramC4ContextC4Context / C4Container / C4Component / C4Dynamic / C4Deployment · Person(alias, "Label", "Description") · System(alias, …) / System_Ext(alias, …)
Block Diagramblockblock (or block-beta) · columns 3 · a["Label"]
Packet Diagrampacketpacket (or packet-beta) · title Text · 0-15: "Field"
Kanban Boardkanbankanban · id[Column title] · id[Card text]
Architecture Diagramarchitecture-betaarchitecture-beta · group id(icon)[Label] · service id(icon)[Label] in group
Radar Chartradar-betaradar-beta · axis id["Label"], … · curve id["Label"]{1, 2, 3}
Treemaptreemap-betatreemap-beta · "Section" · "Leaf": 42

Cheat sheet FAQ

How do I add a comment in Mermaid?

Start a line with %%. Everything after it on that line is ignored by the parser.

How do I change the Mermaid theme?

Add a frontmatter block with config: theme: forest (or default, neutral, dark, base) at the top, or pick a theme in the MermaidViewer toolbar.

How do I use special characters in labels?

Wrap the label in double quotes, e.g. A["Price (USD): $10"]. Use #quot; for a literal double quote and entity codes like #9829; for symbols.

Why does my diagram break on the word end?

In flowcharts the lowercase word end closes a subgraph. Capitalise it (End) or wrap it in quotes.