Updating from quarto 1.5 to 1.6 breaks mermaid diagrams

[rcannood]

Bug description

When the text in a node becomes too long, it doesn't wrap but instead is no longer shown.

In Quarto 1.5.57:

In Quarto 1.6.42:

Code:

```{mermaid}
graph TB
  ben["🌱📈 Living benchmarks"]
  pra["🌱📖 Living best practices"]
  pip["🌱⚙️ Living reproducible pipelines"]
  ben --> pra --> pip
```

In GitHub:

graph TB
  ben["🌱📈 Living benchmarks"]
  pra["🌱📖 Living best practices"]
  pip["🌱⚙️ Living reproducible pipelines"]
  ben --> pra --> pip

Loading

Steps to reproduce

Create a file called example.qmd containing the following contents:

---
title: Mermaid in Quarto
format: html
---

```{mermaid}
graph TB
  ben["🌱📈 Living benchmarks"]
  pra["🌱📖 Living best practices"]
  pip["🌱⚙️ Living reproducible pipelines"]
  ben --> pra --> pip
```

And then run quarto render example.qmd using the latest stable version of quarto, which is 1.6.42 at the time of writing.

I created a repository to test at which point the rendering breaks: https://github.com/rcannood/test-mermaid-across-quarto-versions.

• 1.5.57: ✓
• 1.6.1: ✓
• 1.6.10: ✓
• 1.6.11: ✓
• 1.6.12: ❌
• 1.6.15: ❌
• 1.6.20: ❌
• 1.6.30: ❌
• 1.6.42: ❌
• 1.7.14: ❌

Actual behavior

The "Living reproducible pipelines" is not rendered because the label is too long. If I replace the text with "Living pipelines", the issue is resolved.

Expected behavior

I expect the full "Living reproducible pipelines" label to be shown

Your environment

OS: Fedora 40
Quarto: 1.6.42

Quarto check output

quarto 1.6.11 check:

Quarto 1.6.11
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
      Version: 1.6.11
      Path: /home/rcannood/.local/share/quarto-1.6.11/bin

      TinyTeX: (not installed)
      Chromium: (not installed)

      Using: Installation From Path
      Path: /usr/bin
      Version: 2023

      Version: 3.12.9
      Path: /usr/bin/python3
      Jupyter: 5.7.2
      Kernels: python3

      Version: 4.4.2
      Path: /usr/lib64/R
      LibPaths:
        - /home/rcannood/R/x86_64-redhat-linux-gnu-library/4.4
        - /usr/lib64/R/library
        - /usr/share/R/library
      knitr: 1.49
      rmarkdown: 2.29

quarto 1.6.12 check:

Quarto 1.6.12
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
      Version: 1.6.12
      Path: /home/rcannood/.local/share/quarto-1.6.12/bin

      TinyTeX: (not installed)
      Chromium: (not installed)

      Using: Installation From Path
      Path: /usr/bin
      Version: 2023

      Version: 3.12.9
      Path: /usr/bin/python3
      Jupyter: 5.7.2
      Kernels: python3

      Version: 4.4.2
      Path: /usr/lib64/R
      LibPaths:
        - /home/rcannood/R/x86_64-redhat-linux-gnu-library/4.4
        - /usr/lib64/R/library
        - /usr/share/R/library
      knitr: 1.49
      rmarkdown: 2.29

[rcannood]

If I check what changed v1.6.11..v1.6.12 it appears mermaid was upgraded to 11.2.0 as part of PR #10797.

[cderv]

Can you look into your browser console to see the error you may have ?

Currently I get this with 1.6.42

And this with 1.7.13

With 1.6.11, I get

Not that in Positron viewer pane I get for 1.7.13

So possibly some rules to adapt to new mermaid ?

I don't why you don't get the last block content though. I can't reproduce.

[cderv]

It could also depend on the browser you are using maybe. Possibly related

• flowchart node label disappears when too wide mermaid-js/mermaid#5785

[jguhlin]

Same error. And @cderv is right, error is on firefox, not chrome.

[cderv]

Thanks for confirming @jguhlin - I see upstream issue is still not fixed so we probably need to wait and then update mermaid.js dependency in Quarto.