Mermaid Flowchart Syntax Cheat Sheet

Common syntax for Mermaid flowchart — node shapes, edges, directions, subgraphs and styles explained on one page. Every example can be copied straight into this site's Flowchart Editor or any platform that supports Mermaid.

1. Basic structure

A Mermaid flowchart has three parts: a direction declaration, node definitions, and edges. The first line is always flowchart <direction>。

flowchart TD
    A[Start] --> B[End]

2. Directions

Two letters control the flow: T/B = top to bottom, L/R = left to right; the first letter is the start.

TBTop to bottom (default)

BTBottom to top

LRLeft to right

RLRight to left

3. Node shapes

The brackets decide the shape; A is the node id and the text inside the brackets is displayed. The first 5 shapes are natively supported by this site's editor.

Shape	Syntax	Usage
Rectangle · Step	`A[Step]`	The most common processing step
Rounded · Process	`A(Process)`	Rounded corners; same semantics as a rectangle
Stadium · Start/End	`A([Start])`	Start/end node, the entry and exit of a flow
Diamond · Decision	`A{Decision?}`	Conditional branch, usually with two outgoing edges
Circle · Connector	`A((Join))`	Connector / join point
Cylinder · Database	`A[(Database)]`	Represents data storage
Double-bar · Subroutine	`A[[Subprocess]]`	A predefined subprocess
Parallelogram · I/O	`A[/Input/]`	Represents input / output

4. Edges

Type	Syntax	Description
Solid arrow	`A --> B`	The most common one-way transition
Solid line	`A --- B`	Undirected link
Dotted arrow	`A -.-> B`	Optional / conditional transition
Dotted line	`A -.- B`	Undirected dotted link
Thick arrow	`A ==> B`	Emphasizes the main flow
Labeled arrow	`A -->\|Yes\| B`	Text on the edge describing the branch condition
Text before arrow	`A -- note --> B`	Equivalent alternative syntax

5. Subgraphs & styling

subgraph orders["Order module"]
    A[Place order] --> B[Pay]
end

classDef green fill:#bbf7d0,stroke:#15803d,color:#14532d
class A,B green
linkStyle 0 stroke:#6366f1

subgraph groups nodes; classDef defines a style class and class applies it to nodes; linkStyle colors an edge by index. Line comments start with %%.

6. Full example: login validation

flowchart TD
    A([Start]) --> B[Enter credentials]
    B --> C{Valid?}
    C -->|Yes| D[Go to home]
    C -->|No| E[Show error]
    E --> B
    D --> F([End])

渲染中…

The code above uses stadium, rectangle and diamond nodes plus a labeled edge — paste it straight into the Flowchart Editor to see it render and keep editing by dragging.

FAQ

What's the difference between flowchart and graph syntax?

graph is Mermaid's older syntax and flowchart is the recommended modern form; they are basically equivalent and both render fine. Use flowchart for new code to avoid the legacy syntax being deprecated over time.

What if node text contains special characters?

Wrap the text in double quotes, e.g. A["Hello, world"]. Most punctuation works inside quotes; the hash # must be written as #35;, a double quote as #quot;, and the vertical bar | interferes with edge-label syntax — avoid or replace it.

Does Mermaid support subgraphs (grouping)?

Yes. Wrap nodes in subgraph title ... end, e.g. subgraph orders["Order module"] ... end. A subgraph renders as a titled container that groups its inner nodes.

How do I color nodes and edges?

Define a style class with classDef and apply it with class: classDef green fill:#bbf7d0,stroke:#15803d,color:#14532d, then class A,B green. Edge colors use linkStyle 0 stroke:#6366f1 (the number is the edge index, starting at 0).

Where can I edit and preview side by side?

This site's flowchart editor keeps the canvas and Mermaid code in two-way sync — paste the code above to render it live. GitHub, Typora, Yuque and any other Mermaid-compatible platform work too.