New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add newline in the text #384

Closed
coolgoose85 opened this Issue Aug 31, 2016 · 21 comments

Comments

Projects
None yet
@coolgoose85

coolgoose85 commented Aug 31, 2016

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?

@coolgoose85 coolgoose85 changed the title from How to add newline in the comments to How to add newline in the text Aug 31, 2016

@jboelter

This comment has been minimized.

jboelter commented Oct 6, 2016

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 knsv added the help wanted label Oct 7, 2016

@knsv

This comment has been minimized.

Owner

knsv commented Oct 7, 2016

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

@alanmimms

This comment has been minimized.

alanmimms commented Jan 19, 2017

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

This comment has been minimized.

Naishy commented Feb 21, 2017

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

This comment has been minimized.

ufo2mstar commented Mar 10, 2017

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

This comment has been minimized.

scordature commented May 23, 2017

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

This comment has been minimized.

Lucas-C commented Sep 18, 2017

<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

This comment has been minimized.

Collaborator

tylerlong commented Sep 19, 2017

@Lucas-C

This comment has been minimized.

Lucas-C commented Sep 19, 2017

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

@tylerlong

This comment has been minimized.

Collaborator

tylerlong commented Sep 20, 2017

@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

This comment has been minimized.

alanmimms commented Sep 24, 2017

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

This comment has been minimized.

Lucas-C commented Sep 25, 2017

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

@alanmimms

This comment has been minimized.

alanmimms commented Sep 25, 2017

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

@KaptainRose

This comment has been minimized.

KaptainRose commented Sep 28, 2017

@alanmimms @Lucas-C I'm unable to get &#xA; 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 &#xA; b)

Any suggestions?

@DorfilIkatu

This comment has been minimized.

DorfilIkatu commented Oct 10, 2017

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

@KaptainRose

This comment has been minimized.

KaptainRose commented Oct 11, 2017

@DorfilIkatu thank you so much, it worked!

@galaxy001

This comment has been minimized.

galaxy001 commented Nov 9, 2017

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

@oisu

This comment has been minimized.

oisu commented Feb 16, 2018

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

@tylerlong

This comment has been minimized.

Collaborator

tylerlong commented Mar 16, 2018

@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

@tylerlong tylerlong closed this Mar 17, 2018

@jhvanderven

This comment has been minimized.

jhvanderven commented Apr 22, 2018

Will this be supported in the sequence diagram too?

poteat added a commit to poteat/mermaid-gitbook that referenced this issue May 26, 2018

Add "line break / newline" section to flowchart
The flowchart documentation doesn't currently doesn't mention how to add newlines, but as per issue [#384](knsv/mermaid#384), you can do so using "<br>"
@BHunter2889

This comment has been minimized.

BHunter2889 commented Oct 1, 2018

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

watsoncj added a commit to watsoncj/mermaid that referenced this issue Nov 26, 2018

Support Multi-line Actor Descriptions
- Add support for <br/> delimiter in actor descriptions.
- Add actorFontFamily and actorFontSize options to sequence diagram.
- Change default actor description font from times to sans.

Fix knsv#384 knsv#702 knsv#755
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment