Mermaid Syntax

Mermaid syntax is simple: you start a code block with code block, then write diagram definitions.

For example, a basic flowchart uses the graph or flowchart keyword followed by a direction (e.g. TB for top-to-bottom):
Before writing specific diagrams, you need to understand how Mermaid processes text.

flowchart TD
  A[Start] --> B{Condition}
  B -->|Yes| C[Option 1]
  B -->|No| D[Option 2]

Try this code ❯

Directional Options

Mermaid supports multiple graph orientations: TB (top-bottom), LR (left-right), etc..

TD or TB: Top-down / Top-to-Bottom
BT: Bottom-to-Top
LR: Left-to-Right
RL: Right-to-Left

Nodes are defined by labels in square brackets (e.g. A[Start]) or other shapes (round/diamond) and edges by arrows (-->, ---, <-->, etc). Text on links is separated by |text|.

Syntax	Resulting Shape
id[Text]	Rectangle (Default)
id(Text)	Round Edges
id([Text])	Stadium/Terminal Shape
id[[Text]]	Subroutine
id[(Text)]	Cylinder / Database
id((Text))	Circle
id>Text]	Asymmetric (Flag)
id{Text}	Rhombus / Decision Box
id{{Text}}	Hexagon
id[/Text/]	Parallelogram

Connector Edges (Arrows & Lines)

A --> B : Link with arrow
A --- B : Plain line link
A -- Text --> B : Link with arrow and central text
A -.-> B : Dotted arrow link
A ==> B : Thick arrow link

⚠️ Syntax Warning: Avoid using a lowercase "end" inside a flowchart node, as it acts as a layout boundary and will break the chart parsing. Use "End" or "END" instead.

To see the diagram, ensure your Markdown code block is labeled mermaid.

For example in GitHub-flavored Markdown:

```mermaid
flowchart LR
A --> B
```

How to Write Mermaid

In any Markdown file that supports Mermaid, you enclose your code in standard code blocks, specifying mermaid as the language:

```mermaid
flowchart LR
    A --> B
```

When rendered, Mermaid generates an SVG graph.

Diagrams update automatically if you change the text, allowing quick edits without redrawing shapes manually.

Mermaid Code Blocks

Mermaid code blocks can include optional frontmatter for configurations. A minimal block is simply:

```mermaid
graph LR
  X --> Y
````

Mermaid recognizes this and renders the graph as a flowchart. Common keywords: graph, sequenceDiagram, classDiagram, gantt, pie, etc., start the diagram type.

For many diagram types, Mermaid infers elements from relations (e.g. in sequence diagrams, writing A->B creates participants A and B).

Mermaid in HTML

<pre class="mermaid">
  graph TD
    A[Client] --> B[Server]
</pre>

Try this code ❯

The Golden Rules of Mermaid Syntax

Case Sensitivity: Node IDs are case-sensitive. NodeA and nodea are two different entities.
The end Keyword: end is a reserved keyword used to close loops and subgraphs. Never name a node end. If you must have a node labeled "End", capitalize it as End or use an ID: E[End].
Escaping Special Characters: If your node labels contain parentheses, quotes, or colons, wrap the entire label in double quotes: A["Process (v2.0): Start"].
Comments: Use %% to write a comment. The parser will ignore everything after %% on that line.