Measured against mermaid 11.17.2 · 6 September 2026

Mermaid cheat sheet

Every Mermaid diagram type, the syntax that actually parses, and — the part other cheat sheets leave out — what the engine cannot draw. Each snippet below was run through mermaid.parse() against version 11.17.2 on 6 September 2026 before it was published here.

The short version: a Mermaid diagram is a plain-text block whose first word picks the type (flowchart TD, sequenceDiagram, erDiagram, …). 23 opening keywords work in the current browser bundle; 4 that appear in the project’s own type list — venn, wardley, cynefin and zenuml — do not.

What mermaid 11.17.2 actually accepts

Each row is the first line of a minimal diagram of that type, passed to mermaid.parse() with a freshly imported engine. “Rejected” means the parser answered No diagram type detected matching given configuration — the type is not registered in this build, as opposed to a syntax error in the snippet.

Opening keyword	Diagram	Result
`flowchart TD`	Flowchart	Parses
`sequenceDiagram`	Sequence diagram	Parses
`classDiagram`	Class diagram	Parses
`stateDiagram-v2`	State diagram	Parses
`erDiagram`	Entity relationship	Parses
`journey`	User journey	Parses
`gantt`	Gantt chart	Parses
`pie`	Pie chart	Parses
`quadrantChart`	Quadrant chart	Parses
`requirementDiagram`	Requirement diagram	Parses
`gitGraph`	Git graph	Parses
`C4Context`	C4 context	Parses
`mindmap`	Mind map	Parses
`timeline`	Timeline	Parses
`sankey-beta`	Sankey	Parses
`xychart-beta`	XY chart	Parses
`block-beta`	Block diagram	Parses
`packet-beta`	Packet diagram	Parses
`kanban`	Kanban board	Parses
`architecture-beta`	Architecture	Parses
`radar-beta`	Radar chart	Parses
`treemap-beta`	Treemap	Parses
`ishikawa`	Ishikawa (fishbone)	Parses
`venn`	Venn diagram	Rejected — Not in this build — use a dedicated Venn tool
`wardley`	Wardley map	Rejected — Not in this build
`cynefin`	Cynefin framework	Rejected — Not in this build
`zenuml`	ZenUML sequence	Rejected — Ships as a separate add-on, not in the default bundle

Syntax by diagram type

Flowchart

The workhorse. First word sets the direction: TD or TB top-down, LR left-to-right, RL and BT for the reverse. Node shape comes from the bracket you use, edge style from the arrow.

`flowchart TD`	Open the diagram, top-down
`A[Square box]`	A process step
`B{Decision?}`	A diamond — a branch point
`C([Rounded])`	A start or end terminator
`D[(Database)]`	A datastore
`E((Circle))`	A connector or junction
`A --> B`	A solid arrow
`A -->\|Yes\| B`	A labelled edge
`A -.-> B`	A dotted arrow
`A ==> B`	A thick arrow
`A --- B`	A line with no arrowhead
`N["Text with (punctuation)"]`	Quote the label whenever it has brackets, commas or accents
`subgraph name ... end`	Group nodes into a labelled box

Tested snippet

flowchart TD
  A[Start] --> B{Ok?}
  B -->|Yes| C[Done]

Sequence diagram

For calls between people or services over time. Participants appear in the order you first mention them, or in the order you declare them.

`sequenceDiagram`	Open the diagram
`participant A as Client`	Declare a participant and its display name
`actor U as User`	A stick-figure participant
`A->>B: message`	A solid arrow with an arrowhead
`B-->>A: reply`	A dashed reply
`A-)B: async`	An open arrowhead — fire and forget
`activate B / deactivate B`	Show the activation bar on B
`Note over A,B: text`	A note spanning participants
`alt / else / end`	A conditional block
`loop every minute ... end`	A repeated block

Tested snippet

sequenceDiagram
  A->>B: hi
  B-->>A: ok

Class diagram

UML classes with members and relationships. The arrow you choose is the relationship: inheritance, composition, aggregation and association each have their own.

`classDiagram`	Open the diagram
`class Animal { +String name }`	A class with a public member
`+ / - / # / ~`	Public, private, protected, package visibility
`Animal <\|-- Dog`	Dog inherits from Animal
`A *-- B`	Composition — B cannot exist without A
`A o-- B`	Aggregation — B can exist alone
`A --> B`	A directed association
`A "1" --> "*" B`	Multiplicity on both ends

Tested snippet

classDiagram
  Animal <|-- Dog
  class Animal {
    +String name
  }

State diagram

Use stateDiagram-v2 — it is the current layout engine. [*] is both the start and the end pseudo-state, depending on which side of the arrow it sits.

`stateDiagram-v2`	Open the diagram
`[*] --> Idle`	The initial state
`Busy --> [*]`	A terminal state
`Idle --> Busy: start`	A transition with its trigger
`state "Long name" as s1`	A state whose label has spaces
`state fork <<fork>>`	A fork or join bar
`note right of Idle : text`	An attached note

Tested snippet

stateDiagram-v2
  [*] --> Idle
  Idle --> Busy: start
  Busy --> [*]

Entity relationship diagram

Crow’s-foot cardinality is spelled out in the connector itself: the character next to each entity says how many of it participate, and a solid or dashed line says whether the relationship is identifying.

`erDiagram`	Open the diagram
`\|\|--o{`	Exactly one, to zero or more
`\|\|--\|\|`	One to exactly one
`}o--o{`	Zero or more, to zero or more
`}\|--\|{`	One or more, to one or more
`\|\|..o{`	A dashed line — a non-identifying relationship
`CUSTOMER \|\|--o{ ORDER : places`	The verb after the colon labels the relationship
`CUSTOMER { string name PK }`	Attributes, with PK or FK as a key marker

Tested snippet

erDiagram
  CUSTOMER ||--o{ ORDER : places

Gantt chart

Declare dateFormat before any task or the dates will not parse. Tasks take an optional id, then a start (a date or "after <id>") and a duration.

`gantt`	Open the chart
`dateFormat YYYY-MM-DD`	How to read the dates you write
`section Build`	A group of tasks
`Task :a1, 2026-01-01, 7d`	id, start date, duration
`Next :after a1, 3d`	Chain a task to the end of another
`Task :done, a1, ...`	Mark it done, active or crit
`Review :milestone, 2026-02-01, 0d`	A zero-length milestone
`excludes weekends`	Skip Saturdays and Sundays

Tested snippet

gantt
  title T
  dateFormat YYYY-MM-DD
  section S
  Task :a1, 2026-01-01, 7d

Mind map

Indentation is the whole syntax: two spaces deeper makes a child. There are no arrows, and the root shape is set by the bracket you wrap it in.

`mindmap`	Open the map
`root((core))`	A circular root
`child`	Two spaces deeper — a branch of the line above
`id[Square]`	A square node
`id(Rounded)`	A rounded node
`id))Bang((`	A bang shape
`::icon(fa fa-book)`	Attach an icon (needs an icon font on the page)

Tested snippet

mindmap
  root((core))
    a
    b

Pie chart

Quote every label. The values do not need to add up to 100 — Mermaid computes the shares.

`pie title Share`	Open the chart with a title
`pie showData`	Print the raw value next to each slice
`"Label" : 60`	One slice

Tested snippet

pie title T
  "A" : 60
  "B" : 40

Timeline

A period, a colon, then the events on it. Repeat the colon to put several events in the same period.

`timeline`	Open the diagram
`title History`	A heading
`section Early`	Group consecutive periods
`2020 : one`	A period and its event
`2021 : one : two`	Two events in the same period

Tested snippet

timeline
  title T
  2020 : one

Git graph

Commits run in the order written. Branch, check out, commit, merge — the drawing follows the commands.

`gitGraph`	Open the diagram
`commit`	A commit on the current branch
`commit id: "fix"`	A commit with a label
`commit tag: "v1.0"`	A tagged commit
`branch dev`	Create a branch and switch to it
`checkout main`	Switch branches
`merge dev`	Merge a branch into the current one

Tested snippet

gitGraph
  commit
  branch dev
  commit

XY chart

Bars and lines on shared axes. One caution measured on this site: bar values are drawn from the bottom of the plot, so a negative value has no zero baseline to hang from — for signed series, label the numbers instead of drawing them.

`xychart-beta`	Open the chart
`title "Revenue"`	A quoted title
`x-axis [a, b]`	Categorical x-axis labels
`y-axis "Units" 0 --> 100`	A titled, bounded y-axis
`bar [3, 5]`	A bar series
`line [3, 5]`	A line series

Tested snippet

xychart-beta
  title "T"
  x-axis [a, b]
  bar [3, 5]

Architecture diagram

Services, groups and the edges between them, with a small built-in icon set. Note the -beta suffix: it is part of the keyword, not a version note.

`architecture-beta`	Open the diagram
`group g(cloud)[G]`	A group with an icon and a label
`service s(server)[S] in g`	A service placed inside a group
`db(database)`	Built-in icons: cloud, database, disk, internet, server
`s:R -- L:db`	An edge, with the side of each box it leaves from

Tested snippet

architecture-beta
  group g(cloud)[G]
  service s(server)[S] in g

Five errors that account for most failures

Unquoted punctuation in a label. A bracket, comma or quote inside a node label is read as syntax. A["Retry (up to 3 times)"] parses; the same text without quotes does not.
A missing -beta suffix. Several newer types only answer to the suffixed keyword: sankey-beta, xychart-beta, block-beta, packet-beta, architecture-beta, radar-beta, treemap-beta. Dropping it produces “No diagram type detected”.
Gantt dates before dateFormat. The parser needs to be told how to read your dates before it meets one, so dateFormat YYYY-MM-DD belongs directly under gantt.
A merge with nothing to merge. In gitGraph, merge dev fails with “Both branches have same head” unless dev has a commit the current branch does not.
Trusting a type list over the build you loaded. Documentation describes the project; the bundle in your page is what parses. Check the first line against the table above.

Where to run it

Paste any snippet above into the Mermaid editor to see it render and export SVG or PNG. For a specific shape there are focused pages — the flowchart generator, sequence diagram generator, ER diagram generator, Gantt chart generator and state diagram generator each load a working example. For the one shape on this page the engine refuses, there is the Venn diagram generator, which draws its own SVG instead. To publish what you build, see embedding Mermaid in a GitHub README and embedding a diagram in your own page.

Method: on 6 September 2026 each snippet on this page was passed to mermaid.parse() in a browser after importing mermaid@11.17.2 from cdn.jsdelivr.net; 11.17.2 was the version behind the package’s latest tag that day. A separate engine instance was imported for every snippet: re-using one instance across many parse() calls produced results that did not reproduce, so every figure here comes from a fresh import. Mermaid releases often — read this as a dated measurement of one version, not a permanent specification.

Frequently asked questions

What diagram types does Mermaid support?

Tested on 6 September 2026 against mermaid 11.17.2, the default browser bundle recognises 23 opening keywords: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, journey, gantt, pie, quadrantChart, requirementDiagram, gitGraph, C4Context, mindmap, timeline, sankey-beta, xychart-beta, block-beta, packet-beta, kanban, architecture-beta, radar-beta, treemap-beta and ishikawa. Four keywords the project documents elsewhere are not in that bundle: venn, wardley, cynefin and zenuml.

Why does my diagram fail with "No diagram type detected"?

The first non-empty line is not an opening keyword Mermaid recognises. Usual causes: a typo, leading text before the keyword, a missing -beta suffix on the newer types (sankey-beta, xychart-beta, block-beta, packet-beta, architecture-beta, radar-beta, treemap-beta), or a type that is documented but not built into the bundle you loaded — venn, wardley, cynefin and zenuml all fail this way on mermaid 11.17.2.

When do I need to quote a node label?

Whenever the label contains brackets, a comma, a semicolon, a quote character, or anything the parser could read as syntax. Writing N["Text with (punctuation)"] is always safe, and it is also what lets you use accents and non-Latin scripts without thinking about it.

What is the difference between graph and flowchart?

Both open a flowchart. "flowchart" is the current keyword and gets the newer renderer and shapes; "graph" is the older spelling and still parses, which is why so much existing Mermaid in the wild starts with "graph TD". Use flowchart in new diagrams.

Can Mermaid draw a Venn diagram?

Not in the bundle that ships today. On 6 September 2026, mermaid 11.17.2 answered a venn block with "No diagram type detected matching given configuration", while 23 other opening keywords parsed in the same build. For set overlaps, use a dedicated Venn tool instead.

Does Mermaid render in a GitHub README?

Yes — put the diagram in a fenced code block with mermaid as the language identifier and GitHub renders it in README files, issues, pull requests and wikis. GitHub documents this on its "Creating diagrams" page.