search

mermaid-js / mermaid-live-editor

Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.
https://mermaid.live
MIT License
4.3k stars 654 forks source link

Longer texts are not displayed in live editor and websites #1533

Closed richelbilderbeek closed 1 month ago

richelbilderbeek commented 2 months ago

Describe the bug

Longer node texts are not displayed in live editors and texts

To Reproduce

Link to Live Editor: here

Here is the mermaid code for two nodes with texts:

flowchart TD
    A(Let me think a bit longer an)
    B(Let me think a bit longer and)

Here is how it looks [edit: and this may look correctly on Edge, thanks @akulmehta for pointing this out. Below is a screenshot from Firefox]:

flowchart TD
    A(Let me think a bit longer an)
    B(Let me think a bit longer and)

[edit: as it depends on the browser, I add a screenshot here below too. Thanks @akulmehta]

Screenshot from 2024-09-12 10-22-40

Note that one of the nodes does not display any text. That is the bug.

Expected behavior

I expect the texts of a node to be rendered

Screenshots

Screenshot from 2024-09-09 13-17-59 Screenshot from 2024-09-09 13-18-06

Desktop (please complete the following information):

Additional context

None

pguinard-public-com commented 2 months ago

We've noticed the same issues on github.com.

akulmehta commented 2 months ago

The following does work in the live editor though:

flowchart TD
    A("`Let me think 
    a bit longer an`")
    B("`Let me think 
    a bit longer and`")

and in GitHub too

flowchart TD
    A("`Let me think 
    a bit longer an`")
    B("`Let me think 
    a bit longer and`")
akulmehta commented 2 months ago

@richelbilderbeek Interestingly, your code works fine in Microsoft's Edge browser image

richelbilderbeek commented 2 months ago

Interesting! Let's add a screenshot from Firefox then:

Screenshot from 2024-09-12 10-22-40

richelbilderbeek commented 2 months ago

Indeed, the code by @akulmehta works in the live editor too, until one adds more characters again:

flowchart TD
    A("`Let me think 
    a bit longer an`")
    B("`Let me think 
    a bit longer and`")
    C("`Let me think 
    a bit longer and looooonger`")
    D("`Let me think 
    a bit longer and loooooonger`")

With screenshot from Firefox:

Screenshot from 2024-09-12 10-29-04

akulmehta commented 1 month ago

Hmmm it seems to be working now on Firefox too image

Also, you can split the text into multiple lines if you are worried it will stop working for any reason:

flowchart TD
    A("`Let me think 
    a bit longer an`")
    B("`Let me think 
         a bit longer and 
         loooooonger`")
flowchart TD
    A("`Let me think 
    a bit longer an`")
    B("`Let me think 
         a bit longer and 
         loooooonger`")
richelbilderbeek commented 1 month ago

I can confirm too this works now under Firefox.

Thanks mermaid devs!

richelbilderbeek commented 1 month ago

I'll close this Issue. Again: thanks to the mermaid devs!