How to Add Line Breaks in Mermaid Labels

All Mermaid tools and guides

For a flowchart label, put <br/> inside a quoted label. Keep a short node ID separate from the displayed text so punctuation in the label does not become diagram syntax.

Split a long node label

flowchart LR
  request["Receive<br/>customer request"] --> review["Review request"]
  review --> done["Send confirmation"]

Run this example

The first box displays “Receive” above “customer request.” Try replacing the text while leaving the node ID request unchanged.

Split a long node label: rendered example

Use line breaks with punctuation

flowchart TB
  api["API gateway<br/>(public endpoint)"] --> worker["Background worker<br/>retry queue"]
  worker --> result["Result: ready"]

Run this example

The API label has two lines and includes parentheses. Quoting the entire label avoids treating the parentheses as a node-shape delimiter.

What to watch for

A literal \n in a traditional flowchart label is not a portable substitute for <br/>. These examples are for flowcharts; other diagram types have their own label rules. If another site shows the HTML literally, compare its Mermaid version and HTML-label configuration. Start with the complete first example before adding your original labels back.

Try it: change the first diagram to TB and compare the width of the layout. A manual line break controls the label, not the positions of the boxes.

Related guides

Reference: Official documentation.