Add support for line breaks (i.e., <br>) within strings of text

[michael-booker]

Would it be possible for the preview to respect <br> and <br/> in strings of text within a node or line. Following examples taken from: Other Mermaid Examples

subgraph A
    od>Odd shape]-- Two line<br/>edge comment --> ro
    di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
    di==>ro2(Rounded square shape)
end

%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]

%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

Thank you!

[mjbvz]

This already seems to work:

The note on the right use <br>

If you're still not seeing this working, please share a complete example that demonstrates the issue . The one original included does not work in its current state

[michael-booker]

I agree that it appears to work on the Note, but not in Nodes or in Line text. Please copy and paste the following code into a markdown file in Visual Studio Code and preview using "Markdown Preview Mermaid Support v1.16.0".

%%{ init: { 'flowchart': { 'curve': 'bump' } } }%%
flowchart TD
   IPSC -->|Hey there
This is some
text that I want
on different lines| TBH -->|As you can see
it is not wrapped
in the preview| I:D
   RC -->|This is what I
am requesting| I:D

   IPSC[Hey there!
This line should be wrapped]
   TBH[And this one
too]
   I:D[Title
Descriptive text]
   RC[Single line]

   classDef paleBlue fill:lightblue,color:black;
   class IPSC paleBlue;
   classDef paleYellow fill:Wheat,color:black;
   class TBH,I:D paleYellow;
   classDef paleGreen fill:lightgreen,color:black;
   class RC paleGreen;

[michael-booker]

[mjbvz]

Does that example work on https://mermaid.live? I get an error on line 3

[michael-booker]

Yep, it sure does.

[michael-booker]

And Typora as well.

[mjbvz]

Please you share that text in its original state. Your example code is different than what the screenshots show (seems like there are literal new lines in it): https://github.com/mjbvz/vscode-markdown-mermaid/issues/163#issuecomment-1353665817

[michael-booker]

Following is the exact code that is used in Visual Studio Code. The other code snippets are exactly the same except mermaid.live does not like <pre class="mermaid">...<pre> and Typora prefers fenced code '''mermaid...'''. That is literally the only difference. Besides, it's simple enough to reproduce this by putting an HTML break <br> in any non-Note string of text. It is possible that this is an issue with flowcharts alone?

Request

%%{ init: { 'flowchart': { 'curve': 'bump' } } }%%
flowchart TD
   IPSC -->|Hey there<br>This is some<br>text that I want<br>on different lines| TBH -->|As you can see<br>it is not wrapped<br>in the preview| I:D
   RC -->|This is what I<br>am requesting| I:D

   IPSC[Hey there!<br>This line should be wrapped]
   TBH[And this one<br>too]
   I:D[Title<br>Descriptive text]
   RC[Single line]

   classDef paleBlue fill:lightblue,color:black;
   class IPSC paleBlue;
   classDef paleYellow fill:Wheat,color:black;
   class TBH,I:D paleYellow;
   classDef paleGreen fill:lightgreen,color:black;
   class RC paleGreen;

[michael-booker]

Word wrap on the editors might make it appear differently as well, but it is all the same example.

[mjbvz]

Ok, I figured out what is going on and fixed your code example. In the future, just use a markdown fenced code block instead of a <pre> (which causes the <br> to be rendered instead as treated as text)

[mjbvz]

The example seems to work for me though?

[michael-booker]

Well I'll be darned. That worked! Yes, fencing the code works while using <pre> does not. That you very much! My apologies for the run around.