Handle br tag in flowchart the same way as in sequenceDiagram (especially when exporting to SVG)

[etimau]

When using <br> in a sequenceDiagram, when exported to SVG, it is translated to <text></text> 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 <br> tag.
Idem if the <br> is inside of a node.

[GDFaber]

I can take a look here, because I'm also interested in #702 which is about line breaks in sequence diagrams.

[klemmchr]

I can take a look here, because I'm also interested in #702 which is about line breaks in sequence diagrams.

Great! Make sure to make two separate prs for these issues.

[GDFaber]

This can be solved by turning <br> into <br/> to have all tags closed in the label text. I will work on this after #1156 has been merged (because it modifies the regex for line breaks in flowRenderer.js and it seems like I need to modify the same code block as well).

[GDFaber]

This can be solved by turning <br> into <br/> to have all tags closed in the label text.

This won't do much because browsers (at least Chrome) tend to turn <br/> back into <br> in order to produce HTML instead of XHTML (if not explicitly set by doctype). I guess that's also why #614 didn't work for all use cases.

I also tried to wrapping the texts in div-Blocks and replacing the line breaks by </div><div>. This works for security level "strict" but has a drawback in case of "loose": If the html text already includes its own div-Blocks, they might get broken by this approach. I think it cannot be done that way either.

[GDFaber]

Turns out, it already works if htmlLabels is set to false in the flowchart configuration. That's because with this setting the text lines get split up into <text> blocks just as @etimau suggested in the first place.

Is that good enough to work with, or do we need more here?

[etimau]

Hi and thanks for you answer and best wishes for 2020!

Maybe I'm doing it wrong but, when I turn htmlLabels to false, I don't get a line breaks but I see the <br/> tag in the text...

Furthermore, the rendering is a bit messy.
Here is the rendering with htmlLabels set to true:

(You can also see it here)

Here is the same graph when htmlLabels is set to false:

[GDFaber]

Hi, I also wish you all the best for 2020 :)

Thank you for posting the example, and pardon me, I forgot to say that I tried this on a yet unreleased state of the flowchart renderer which will be included in an upcoming release.

I built from the develop branch of the mermaid repository, which produces the following output for your example graph (used another color theme though):

Edit: updated the image

[GDFaber]

The issues with style classes which you mentioned (for example in node ".fic1") may be connected to issue #487 as there is currently no support to change the text color by mermaid style classes, and setting color unfortunately only works with HTML labels activated (which is because there is no color attribute in SVG to style a text node; instead you would have to use fill on the text tag, which is not possible at the moment).

[etimau]

Thanks for those informations. I will check when the new version will be available.
Just one detail: the text over the links is not centered anymore in the new renderer version. Will there be a way to center it?

[GDFaber]

the text over the links is not centered anymore

At the moment multiline texts are not centered if html labels are disabled. Thanks for pointing that out, I have opened a new issue to get the texts centered for non-html labels as well: #1177

[GDFaber]

Hi @etimau, feel free to ask if you need further information on this topic.
If you feel like your questions have been answered, would you agree to close this issue?

[GDFaber]

I think we can close this issue, feel free to open a new one if you run into problems.