Labels on Mermaid arrows have no background, makes them unreadable.

[ma-bit-bot]

I have a mermaid diagram which has labels over the arrows. This renders fine in PDF, where the labels get a gray box as background:

But rendering as HTML, the diagram is missing the grey backgrounds under the arrow labels and looks like this:

I'm using quarto version 1.3.450. The code do reproduce the HTML example is:

---
title: "Mermaid"
format: html
---

```{mermaid}
flowchart LR
    A-->|increases|B
```

[mcanouil]

It is a bit short.
Note that setting a title does not mean you can omit actual post content. Users with disability will have major issues to even understand what your are asking here.

In a more developer note, it's nice to have provided a small reproducible example, but providing the environment is absolutely mandatory as Quarto/Pandoc/Mermaid are not static, those have various versions.
This could you please update your question to include actual text in it and the output of at least quarto --version (or quarto check)?

Thank you for your understanding.

[ma-bit-bot]

Sure! Updated and added pictures to show comparison HTML/PDF.

[harrelfe]

I have given up on mermaid when I need to use any semi-advanced features (especially when trying to add hover text), in favor of graphviz. The R Workflow book at https://hbiostat.org/rflow shows how to do several advanced things with graphviz with Quarto including how to insert R results (including tables) into diagrams.

[LJFRIESE]

That's disappointing... I've been down the rabbit hole of Quarto mermaid and kept seeing your name popping up. I like mermaid, but it's been frustrating in Quarto.

[mcanouil]

Mermaid behaves the same way in Quarto but do not get as frequent updates as the library itself.
This will be true for any software development. You (as a developer) cannot upgrade everything all the time unless you don't want to fix bugs or add features.

[mcanouil]

For what is worth, I cannot reproduce the issue using Quarto 1.4 pre-release.
Likely an issue inside Mermaid.js that was fixed by a update that occured between Quarto 1.3 and Quarto 1.4.