CODEWITHSUNDEEP
rline-breaksdiagramsequence-diagrammermaid
Scientist
Scientist

Reputation: 1359

Mermaid diagram line break

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.

Upvotes: 90

Views: 65992

Answers (3)

ircama
ircama

Reputation: 135

As explained in the Mermaid flowcharts syntax, you need to prepend this before graph TB:

%%{init: {"flowchart": {"htmlLabels": false}} }%%

and then you can break lines (e.g., via \n), like in the following example:

%%{init: {"flowchart": {"htmlLabels": false}} }%%
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\nComplex coacervation)

Upvotes: 4

Hack-R
Hack-R

Reputation: 23241

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

enter image description here

Upvotes: 148

Vorticity
Vorticity

Reputation: 4936

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

Upvotes: 5

Related Questions