Mermaid diagram rendering issue with new line characters (\n , <br>..etc)

[thomasmebin]

I have a mermaid diagram, it was rendering fine till now, seems to be after the latest upgrade, my diagram is broken or not rendering properly.

Diagram code below,

flowchart LR
phase_1([App 1])-->|App event|phase_2(App2 )-->|App event|phase_3(App 2 \n App 3 \n App 4)-->|App event|phase_4[(App 5)]-->|App event|phase_5([Final app])

Seems to be the "\n , < br>..etc" causing issues here.

Error while trying the url,

Same time when I try my code in the kroki site Try section, diagram is rendering as expected.

But the url generated in the same page showing issue,

https://kroki.io/mermaid/svg/eNpLy8kvT85ILCpR8AniKshILE6NN9SIdiwoUDCM1dTVtasBMVPLUvNKaiCyRhpAESMFrHLGIDkFI4WYmDwFEMtYwSapyA7MNMGqwSQarMNUMxabrKlGtFtmXmKOQmJBQawmFxAAAKfbOGk=

[ggrossetie]

We had a similar issue with <br> and Mermaid had/has some issues with it: mermaid-js/mermaid#1766
Since I can reproduce this issue, I will try to find a workaround/fix.

[mgzob]

I also experience this when rendering svg files, but if I change the format to png then at least the image generates. Ref your modified link with png:

https://kroki.io/mermaid/png/eNpLy8kvT85ILCpR8AniKshILE6NN9SIdiwoUDCM1dTVtasBMVPLUvNKaiCyRhpAESMFrHLGIDkFI4WYmDwFEMtYwSapyA7MNMGqwSQarMNUMxabrKlGtFtmXmKOQmJBQawmFxAAAKfbOGk=

Note this does result in a manifestation of issue #1641 where the intermediary arrow text does not receive a bounding box.

[ggrossetie]

This is indeed an upstream issue where SVG is using XHTML but Mermaid produces HTML (i.e., using <br> instead of <br/>). As a workaround, you can use the following option: flowchart.htmlLabels=false:

https://kroki.io/mermaid/svg/eNpLy8kvT85ILCpR8AniKshILE6NN9SIdiwoUDCM1dTVtasBMVPLUvNKaiCyRhpAESMFrHLGIDkFI4WYPAUQwxjGMMGq2iQarNxUMxabrKlGtFtmXmKOQmJBQawmACcjN2E=?flowchart_html-labels=false