Support \n in edge labels for multiline edge text

[nourhenta]

Proposal

Mermaid.js should add support for \n inside edge labels in flowcharts to allow multiline edge text. This would make flowcharts more readable, especially when labeling complex transitions or actions with longer descriptions. It improves clarity without changing existing syntax and is backward-compatible.

Example

graph TD
    A -->|"This is a long\nmultiline label"| B
    B -->|"Another\nExample"| C

This should render as:

This is a long
multiline label

and

Another
Example

Screenshots

Current Behavior:

[nourhenta]

Technical Analysis

Mermaid's edge labels in flowcharts are rendered using SVG text elements via D3 inside the flowRenderer.ts file. Currently, labels are rendered as plain strings directly onto the path using , and the renderer doesn’t split or handle multiline content.
Implementation Plan
To support \n line breaks in edge labels, the following approach is suggested:

1. Detect \n in the label text Before appending the label, check if it includes \n.
   Example:
   const lines = label.split('\\n');

2. Create a for each line
   Inside the or element, render each line using a tag and offset vertically using dy:

<textPath ...>
    <tspan x="0" dy="0em">Line 1</tspan>
    <tspan x="0" dy="1.2em">Line 2</tspan>
</textPath>

3. Adjust layout if needed
   Ensure that the full height of the multiline label doesn't collide with other elements.

4. Test cases
   Add tests for edge labels using:

• Single \n
• Multiple \n
• Various graph directions (TD, LR, etc.)

[nour0205]

Hello @nourhenta

Update: I resolved this issue in [PR #6439 ]
Flowcharts in Mermaid now support multiline edge labels using \n.

You can now write:

mermaid
graph TD
  A -->|"Line 1\nLine 2"| B

And it will render correctly as:

Line 1
Line 2

Implemented by converting \n to <br/> in SVG rendering — simple and backward-compatible

Possible Improvements
Add / Test support for \n in node labels and other diagrams (e.g., state diagrams, mindmaps)

Thanks again for raising this🙌