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 59 · Accepted Answer · answered Jul 16 '18 at 17:15

59

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)
        ")

answered Jul 16 '18 at 17:15

Hack-R

21,021
11
69
118

2

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

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
@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

Mermaid diagram line break

1 Answers1