How to Use Special Characters in Mermaid Flowchart Labels

All Mermaid tools and guides

Give each flowchart node a short plain ID and put the text people should see in double quotes: upload["Upload file (CSV)"]. Write a double quote inside a label as #quot;, quote edge labels that contain punctuation, and never use words such as end or class as node IDs.

Parentheses and brackets in labels

Unquoted parentheses are read as a node shape, so this line fails:

flowchart LR
  upload[Upload file (CSV)] --> check{Valid?}

Parse error on line 2:
... upload[Upload file (CSV)] --> check{Val
-----------------------^
Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', ... got 'PS'

Reproduce the parse error in the Mermaid playground

Quote the label instead. This complete flow also shows a double quote, an ampersand, square brackets, and parentheses in an edge label:

flowchart LR
  upload["Upload file (CSV)"] --> check{"Has #quot;id#quot; column?"}
  check -->|"Yes (valid)"| rd["R & D review"]
  check -->|No| reject["Reject: missing [id]"]

Run the fixed flowchart in the Mermaid playground

• Parentheses and brackets: ["Upload file (CSV)"] and ["Reject: missing [id]"] render as typed. The same rule applies to edge text: -->|Yes (valid)| fails with the same got 'PS' error, while -->|"Yes (valid)"| works.
• Double quotes: ["Say "hi""] does not raise an error in Mermaid 10.9; the box silently shows Say hi. Use #quot; for each quote you want to display. Single quotes need no escape.
• Ampersands: inside a bracketed label, & displays normally, and #amp; also works. Outside brackets it joins nodes: R & D --> Launch creates separate R and D nodes with two arrows to Launch. Open that silent mistake in the playground.

Reserved words and node IDs

A lowercase end closes subgraphs, so it cannot be a node ID:

flowchart LR
  start --> end

Parse error on line 2:
...hart LR  start --> end
----------------------^
Expecting 'AMP', 'COLON', 'PIPE', ... got 'end'

class, style, graph, subgraph, and click fail the same way as IDs. Keep a safe ID and put the word in the label instead:

flowchart LR
  start["start"] --> review["class review"]
  review --> finish["end"]
  dev --- ops

Run the safe-ID example in the Mermaid playground

finish["end"], End, and endpoint are all accepted; only the bare lowercase keyword is a problem. Also leave spaces around connectors when the next ID starts with o or x: dev---ops parses as a circle-ended link from dev to a node named ps, without an error. dev --- ops connects the two nodes you meant.

These results come from this site's Mermaid 10.9 playground. Newer Mermaid versions add other label options, so check the version your renderer uses before copying syntax from elsewhere. To split long text over lines, see line breaks in Mermaid labels.

Related guides

• Label flowchart edges and yes/no branches
• Create a Mermaid flowchart
• Mermaid cheatsheet
• Debugging broken Mermaid, Graphviz and PlantUML diagrams

Reference: Mermaid flowchart syntax.