mermaid-js / mermaid-live-editor

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

Newline by `\n` does not give a newline in mermaid live #1515

Open richelbilderbeek opened 2 weeks ago

richelbilderbeek commented 2 weeks ago

Describe the bug

In mermaid one can use \n to create multiline texts:

flowchart TD

  test[No more\nnewlines?]

pasting that text in mermaid.live, however ...

flowchart TD

  test[No more\nnewlines?]

does not result in a multi-line-text, as shown in this screenshot:

Screenshot from 2024-08-26 15-37-24

To Reproduce Link to Live Editor: here Steps to reproduce the behavior:

  1. Go to https://mermaid.live
  2. Paste the following text:
flowchart TD

  test[No more\nnewlines?]
  1. Observe that no newline is shown

Expected behavior

I expected a newline when I use \n in the live editor

Screenshots

Here it is again:

Screenshot from 2024-08-26 15-37-24

Desktop (please complete the following information):

Additional context

I'm a heavy mermaid user (yet with holidays), so I estimate this happened in the last two months.

SebastianSimon commented 2 weeks ago

I think in the same version, I noticed another bug: moderately long labels are now no longer rendered.

Example:

flowchart TD
  X(This is a somewhat long label.)

On the Website:

Screenshot 2024-08-28 at 13-22-42 Online FlowChart   Diagrams Editor - Mermaid Live Editor

richelbilderbeek commented 6 days ago

I mentioned the bug from @SebastianSimon in #1533, using the standard bug report form :+1: