Line breaks are rendered as <br> and not <br/> in the resulting svg file, resulting in parsing errors for external svg parsers

[frederikfab]

Describe the bug
Line breaks are rendered as <br> and not <br/> in the resulting svg file, resulting in parsing errors for external svg parsers

To Reproduce
Render the diagram

graph TD
    F[Line break `<br/>` Line 2] --> R

Loading

<br/> gets rendered as <br>

Expected behavior
<br/> and <br> and <br /> should get rendered as <br/> to be valid xml and parse correctly in more parsers.

[knsv]

What a silly problem. We must fix this.

[ashishjain0512]

@frederikfab The issue is when we parse and prepare to render the SVG, it has the proper <br/> closing tag, but in the case when the setting is htmlLabel =true, then, we rely on the native SVG.innerHTML() to render/draw it, and that gives back only <br>.

For your case I would recommend you try using the setting htmlLabel=false, then you should get the desired result, as here we have better control over how we break the label even before we style it, instead of depending on HTML rendering by the browser.

Let us know if this fixes your issue.

[frederikfab]

I have tried to set this option, but it does not seem to make a difference. I think i might be doing it wrong though:

%%{init: {'htmlLabel': false}%%

graph LR
%%{config: {'htmlLabel': false}%%

    A --> B[Line 1 <br/>Line 2]

[frederikfab]

also tried adding an s to htmlLabels above, made no difference.

In my workflow, I am using the markdown mermaid extension in vscode, so I do not control how the mermaid library is initialized - I understand if you see that as a requirement for addressing this, though.

[titibandit]

rendering my graph

graph TB
    F{the line <br/> after breaking} --> R

using

{
  "flowchart": {
    "htmlLabels": false
  }
}

as a config file works! Line breaks are now rendered.
I use mermaid-cli to generate my chart, and view the resulting SVGs in Firefox.

[jgreywolf]

@frederikfab
Is this still an issue for you in VSCode? The issue may need to be reviewed by the team that manages that add in

[AkechiShiro]

It may still be an issue, or I'm definitely facing a different one, <br> in a timeline diagram shows as </br> and there is no line break inserted in my SVG files.
But this issue is reproducible for png files as well.

timeline
    Section XXX
    XXX : XXX<br>YYY 

Shows up as

I'm using version : 10.1.0 with npx -p @mermaid-js/mermaid-cli mmdc -i

If it is believed to be another issue, I'll open a new one and delete this comment here (to avoid pollution with non-issue related comment here).

Note
This does not happen in the live editor but the live editor's version is not 10.1.0, it is v10.2.2

[jandrieu]

This error is because SVG is expected to be XML. The use of
within a is invalid HTML

Currently, this mermaid

flowchart TD
  F(Finance) --- F.1["F.1 Reuse Know
  your customer"]

generates this image:

    flowchart TD
  F(Finance) --- F.1["F.1 Reuse Know
  your customer"]

Loading

which has this html

 <span class="nodeLabel"><p>F.1 Reuse Know<br>your customer</p></span>

That <br> is an XML error. Any self-respecting SVG parser should throw an error.

It should be <br/>

FWIW, we are trying to use mermaid in specifications at the W3C and their new tooling requires strict parsing of SVGs. So this is a gating factor to continue to use mermaid. =(

It looks like this should have been fixed in jupyterlab/jupyterlab#15661 but as pointed out in jupyterlab/jupyterlab#15661 (comment) the PR doesn't solve the problem with newlines in the mermaid, as illustrated above.