How to add newline in the text

[coolgoose85]

I am trying to break the text in two lines on top of arrows or on notes but newline is not working anywhere

Example
Note right of ABC: - Group all \n large and medium

OR

abc->>cuz: How are \n you?

Am I missing some syntax?

[jboelter]

Doesn't look like this is currently supported. For example, with sequence diagrams the drawNote is correctly provided a multi-line input, but is putting it directly into an svg field. There's some commented code in drawSvg that might be a starting point for a contribution.

[knsv]

We should support this. A good task for someone that wants to be a part of the project.

[alanmimms]

One of the examples for sequence diagrams shows HTML <br/>, and it happens that the sample breaks the line at that point. But if you add another <br/> or move the existing one the line break doesn't follow it. Apparently that is simply ignored.

[Naishy]

I found that using <br/> in node text gives line breaks as expected, including for multiple breaks if required. Tested on Chromium 55.0.2883.87 and Firefox 51.0.1

[ufo2mstar]

Sorry, still not giving line breaks as expected for sequence diagrams (Chrome 56+ and Firefox 51+).
I will try to work on this feature soon.

[scordature]

Line breaks work in graph diagrams, except not in Subgraph names.
They do not work in sequence diagrams, at all.

graph TD;

subgraph Line breaks <br /> don't work in <br /> Subgraphs
    inset[Line breaks <br />work in <br />Insets]
end

    inset-->A

  A(Line breaks<br />work in<br />rounded rec nodes)
  B{Line breaks <br />work in<br />decision nodes}
  C[Line breaks<br />work in<br /> rectangles]
  D((Line breaks <br />work in <br />circles))
  E>Line breaks <br />work in <br />flag nodes]


    A-->B
    B--yes-->C
    B--no-->E
    C-->D
 


style A fill:#ed6,stroke:#333,stroke-width:2px;
style B fill:#ed6,stroke:#333,stroke-width:2px;
style C fill:#ed6,stroke:#333,stroke-width:2px;
style D fill:#ed6,stroke:#333,stroke-width:2px;
style E fill:#ed6,stroke:#333,stroke-width:2px;
style inset fill:#ed6,stroke:#333,stroke-width:2px;

[Lucas-C]

<br> is not fully supported: the following graph generates an "Opening and ending tag mismatch: br line 0 and div" error, both with mmdc and in mermaid-live-editor:

graph TD
B(B<br>b)

[tylerlong]

@Lucas-C It seems to work in mermaid-live-editor: https://mermaidjs.github.io/mermaid-live-editor/#/edit/Z3JhcGggVEQKQihCPGJyPmIpCg

[Lucas-C]

Yeah, I wasn't clear about this one: click "Download SVG" and you'll see the error

[tylerlong]

@Lucas-C Confirmed. Downloaded SVG doesn't work.
I am not a SVG format expert. Maybe <br> is invalid in SVG. More investigation is needed.

[alanmimms]

At least some SVG implementations support newline, but not using HTML's <br/> tag. This sort of question gets asked a lot.

Instead, SVG evidently supports embedding the ASCII NL character. An example is here.

[Lucas-C]

So a fix could be to replace every <br> by a \n ?

[alanmimms]

I suspect the fix would be to replace the <br> tags with 
 as described in the example I pointed to above.

[katherinermartin]

@alanmimms @Lucas-C I'm unable to get 
 to work in mermaid-live-editor (I think because of the semi colon, and I haven't figured out a way to escape it out as a special character).
To continue with Lucas' code and per Alan's linked example, this is what I've input to the editor:

graph TD
B(B 
 b)

Any suggestions?

[DorfilIkatu]

@KaptainRose write different lines between <p> and </p>... it worked for me

[katherinermartin]

@DorfilIkatu thank you so much, it worked!

[galaxy001]

Please make it to output <br/> as it is, instead of changing it to <br> and break Firefox XML parser.

[oisu]

I tried using <p></p>, it works but makes additional line space.
<div></div> instead perfectly works for me 🙂

[tylerlong]

@galaxy001

Please make it to output <br/> as it is, instead of changing it to <br> and break Firefox XML parser.

done

@Lucas-C

So a fix could be to replace every <br> by a \n ?

<br/> works

[jhvanderven]

Will this be supported in the sequence diagram too?

[BHunter2889]

@galaxy001

Please make it to output <br/> as it is, instead of changing it to <br> and break Firefox XML parser.
@tylerlong
done

This doesn't appear to be done. At least not in the Live Editor. I had to go into the svg and manually change all to be <br/>, which worked.

[jayagopaldaz]

i think there's still some work to be done here. should i try to become a collaborator?:

graph TD

Y(BEHAVIOUR OUTSIDE<br/>OF SUBGRAPHS)
Z(BEHAVIOUR OUTSIDE<br>OF SUBGRAPHS)
a-- long arrow message line 1<br>line 2 of long arrow message --> b
c-- long arrow message line 1<br/>line 2 of long arrow message --> d

subgraph BEHAVIOUR INSIDE<br>OF SUBGRAPHS
  e-- long arrow message line 1<br>line 2 of long arrow message --> f
end

subgraph BEHAVIOUR INSIDE<br/>OF SUBGRAPHS
  g-- long arrow message line 1<br/>line 2 of long arro- message --> h
end

see the mermaid-live-editor view here

in gitlab, none of these examples introduce newlines.

[skorokithakis]

I cannot get the live-editor to introduce newlines in any browser with any method as well. Please reopen this.

[Tinkerer-]

I tried to get a newline in a box in Pandoc, with Mardown Preview Enhanced, and also did not manage to get a newline. Would be greatly appreciated if this could be fixed.

[rajasekaran2003]

Sorry, still not giving line breaks as expected for sequence diagrams (Chrome 56+ and Firefox 51+).
I will try to work on this feature soon.

any progress on this?

sequence diagrams still doesn't support multi lines for message lines,

[rajasekaran2003]

Hi, i wanted to try this on sequence diagram and couldn't get it to work. https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BLT4-QjogYSB2ZXJ5IHNpbXBsZSBtdWx0aSA8YnIvPiAmI3hBOyAgXFxyXFxuIGxpbmUgc2VudGVuY2UiLCJtZXJtYWlkIjp7InRoZW1lIjoibmV1dHJhbCJ9fQ With regards, Raja

…

On Mon, Jun 17, 2019 at 4:23 PM Tim Cashion ***@***.***> wrote: I just searched for this and it worked for me running in RStudio &#xA; . I tried <br/> and \n before this and neither worked. grViz("digraph flowchart { # node definitions with substituted label text node [fontname = Helvetica, shape = rectangle] tab1 [label = '@@1 <https://github.com/1>'] tab2 [label = '@@2 <https://github.com/2>'] tab3 [label = '@@3 <https://github.com/3>'] tab4 [label = '@@4 <https://github.com/4>'] tab5 [label = '@@5 <https://github.com/5>'] tab6 [label = '@@6 <https://github.com/6>'] tab7 [label = '@@7 <https://github.com/7>'] tab8 [label = '@@8 <https://github.com/8>'] # edge definitions with the node IDs tab1 -> tab2; tab1 -> tab3; tab3 -> tab4; tab3 -> tab5; tab5 -> tab6; tab5 -> tab7; tab7 -> tab8 } [1]: 'Label' [2]: 'Step 1: Match by Type, Group,&#xA;State, Processed, and Final Processed' [3]: 'Unmatched at Step 1' [4]: 'Step 2: Match by Type, State, &#xA;Processed, and Final Processed' [5]: 'Unmatched at Step 2' [6]: 'Step 3: Match by Type,&#xA;Processed, and Final Processed' [7]: 'Unmatched at Step 3' [8]: 'Step 4: Match by Type only' ") — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#384>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAKJPFIRJTPHZ36CH2DEPNTP3AMFPANCNFSM4COHMVUQ> .

[gakonst]

+1, I'd like to get multiline text in a Sequence Diagram, no clear way to do this still. Can this be reopened?

[nicola]

same here!

[etimau]

When using
in a sequenceDiagram, when exported to SVG it is translated to tags.
See this example

Is it possible to have the same behavior in flowcharts?
If you try this and click on "Download SVG", the result has a parse XML error because of the
tag.
Idem if the
is inside a node.

[IOrlandoni]

@etimau Hey! You're commenting in an old closed issue. Feel free to create a new issue if you found a bug, need help, want to request a feature or anything!