Mermaid flowcharts render blank boxes when a text line is too long (at ~30 chars)

[tuurep]

Description

When a flowchart node has a line of text that's too long, the whole node renders as a small blank box. Example:

```mermaid
flowchart LR
    A["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."]
```

Screenshot:

With manual wrapping (a newline or a <br> tag), it can be made to render if the lines are about 27 characters or less, for example:

```mermaid
flowchart LR
    A["Lorem ipsum dolor sit
       amet, consectetur
       adipiscing elit, sed
       do eiusmod tempor
       incididunt ut labore
       et dolore magna
       aliqua."]
```

Screenshot:

Blank box in comparison to normal boxes with text:

```mermaid
flowchart LR
    foo-->lorem["Lorem ipsum dolor sit amet, consectetur."]
    lorem-->bar
```

Expectation

This blog post reveals 2 things:

https://docs.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here

1. Long lines should render as long boxes to begin with.

2. Hard wrapping should not be necessary if the string is formatted in this way:

   • "`Lorem ipsum dolor sit amet, consectetur.`"
     • (notice: backticks)

.. in which case it should auto wrap (i.e. soft wrap), but in Vivify's rendering this isn't working.

Context

• Firefox 133.0
• Arch Linux
• vivify-git (AUR)
  • vivify-server v0.6.3.r0.g5d07d16-1-aur

[jannis-baum]

I just took a quick look into this and it turns out this doesn't happen on Safari or Chromium. There all the examples you gave look good and the Markdown labels also work with things like bold formatting.

On Firefox however I can reproduce the issue. That said I'll carefully conclude that this should be an issue with Mermaid, not Vivify. I also just tried updating Mermaid to the newest version (11.4.1) and that didn't fix it.

Possibly related issues:

• Long markdown strings disappear in Firefox mermaid-js/mermaid#5646
• flowchart node label disappears when too wide mermaid-js/mermaid#5785

@tuurep could you look into those and confirm/deny that this is not Vivify's fault?🙈 If you confirm we can close this issue.

[tuurep]

Yes, works perfect on Chromium's side, and those issues are related.

A potential workaround for Firefox is setting htmlLabels: false

(Why: see mermaid-js/mermaid#5785 (comment))

Looking around trying to understand what htmlLabels is, I find this:

Some diagrams have a htmlLabels: false config setting that you can pass that might stop them from using <foreignObject>/embedded HTML.

-- mermaid-js/mermaid-cli#691 (comment)

Examples:

```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%

flowchart LR
    A["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."]
```

```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%

flowchart LR
    foo-->lorem["Lorem ipsum dolor sit amet, consectetur."]
    lorem-->bar
```

But that probably has some undesirable effects as well, what I spotted right now was this:

```mermaid
flowchart LR
    a -- hello world --> b
```

```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%

flowchart LR
    a -- hello world --> b
```

[jannis-baum]

So do you think there is anything we can/should do on Vivify's side? If not I'd close this

[tuurep]

Yes, I made sure to subscribe to the issues in mermaid repos - really depends on those.