Mermaid diagram line break

Question

I cannot find how to insert a line break in long titles inside nodes. For example:

library(DiagrammeR) 
mermaid("
graph TB
     A[GE Solution]-->C{ }
     B[GA Solution]-->C{ } 
     C{ }-->D[Stir 10 mins at 500 r/min]
     D[Stir 10 mins at 500 r/min]-->E[Homogenisation at 10000 r/min]
     E[Homogenisation at 10000 r/min]-->F(Stir 10 min 450 r/min Complex coacervation)
      ")

Note node F is too long. How to I make it into sth like..?

|Stir 10 min 450 r/min|
|Complex coacervation |

Note \n doesn't work.

score 109 · Accepted Answer · edited Mar 07 '23 at 18:56

109

It appears you can use <br> instead:

mermaid("
graph TB
        A[GE Solution]-->C{ }
        B[GA Solution]-->C{ } 
        C{ }-->D[Stir 10 mins at 500 r/min]
        D[Stir 10 mins at 500 r/min]-->E[Homogenisation at 10000 r/min]
        E[Homogenisation at 10000 r/min]-->F(Stir 10 min 450 r/min <br> Complex  coacervation)
        ")

edited Mar 07 '23 at 18:56

Alexander Pozdneev

1,289
1
13
31

answered Jul 16 '18 at 17:15

Hack-R

22,422
14
75
131

2

On the nail! I couldn't find this in the instructions. thnx – Scientist Jul 16 '18 at 17:19
3

Also when saving SVG and opening in a browser it is complaining about missing `
` close tag, `
` looks to be more appropriate but it's saved as `
` anyways maybe it's a mermaid bug – Aleksei Jan 03 '20 at 19:27
1

@Aleksei Good call out, see: https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br – Hack-R Nov 12 '21 at 21:16
1

how about mermaid's ER diagrams' comment – Yongxin Zhang Sep 28 '22 at 15:00

score 7 · Answer 2 · answered Jul 01 '22 at 16:09

7

Another answer that appears to work just fine is to use \n rather than <br>.

answered Jul 01 '22 at 16:09

Vorticity

4,582
4
32
49

3

It doesn't work. Either present an example as how you are using it or share a link explaining your answer in detail. – samar taj Shaikh Dec 28 '22 at 10:57
`\n` does not work at `participant` in flowcharts. `
` works though. – koppor Feb 16 '23 at 08:52
I am using Mermaid via [Markdown Viewer](https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk) (a Chrome Extension), neither work to produce line break. But it works when I push it to GitHub. Perhaps in my case is implementation in the extension. – dudung Mar 26 '23 at 12:00

Mermaid diagram line break

2 Answers2