Mermaid diagram color scheme and formating not as specified

[bryanhanson]

Bug description

• Mac OS 12.6.3.
• Latest Quarto downloaded a few minutes ago by pulling and building locally.
• Behavior checked on Safari, Chrome and Firefox, and behavior is the same.
• Running Quarto from the command line
• Complete repo is here and the page with the bad behavior is here.

Not sure what's going on here. I'm hoping you all will recognize the problem. Glad to build a MWE if the problem is not immediately apparent. This was working, not sure when it broke.

A Mermaid diagram on my blog here has the wrong colors, the html formatting of some labels is displayed rather than rendered, and the arrows appear to be pure white (they seem invisible/missing but under the right conditions you can see them as white on a barely grey background).

The Mermaid code works fine if I put it in Mermaid Live, here's a png of what it should look like:

Screenshot of (part of) the mis-behaving version (also visible at the link to the post above):

Any ideas of what's happening? Thank you!

Checklist

• Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
• Please format your issue so it is easier for us to read the bug report.
• Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
• Please document the operating system you're running. If on Linux, please provide the specific distribution.

[bryanhanson]

Here's a test file. See next comment for context.

mwe.qmd:

---
title: "Problematic Mermaid Diagram"
format:
  html
----

Mermaid diagram follows... It appears fine in a single page project, but incorrectly formated in a blog project.

```{mermaid}
%%| label: fig-flow
%%| fig-cap: "Heiarchical relationships between different types of matrices. *Blue Rectangles* denote matrices with particular, recognizable *structures*.  *Pink Hexagons* indicate properties that can be *queried*."
flowchart TD
A(all matrices <br/> n x m) --> C(row matrices <br/> 1 x n)
A --> D(column matrices <br/> n x 1)
A ---> B(square matrices <br/> n x n)
B --> E(upper triangular<br/>matrices)
B --> F(lower triangular<br/>matrices)
B --> G{{<b>either</b><br/>is singular?}}
B --> H{{<b>or</b><br/>is invertible?}}
H --> I{{is diagonalizable?}}
I --> J{{is normal?}}
J --> K(symmetric)
K --> L(diagonal)
L --> M(identity)
J --> N{{is orthogonal?}}
N --> M
style G fill:#FFF0F5
style H fill:#FFF0F5
style I fill:#FFF0F5
style J fill:#FFF0F5
style N fill:#FFF0F5

[bryanhanson]

Further update: Doing any of the following creates an almost properly formatted diagram:

• Create a single web page
• Create a website
• Crate a blog

By almost properly formatted I mean that the arrows are visible, the fill colors are correct, but the html tags in node labels are not processed. For instance, one node is labeled <b>either</b> is invertible but there is no bold font, only visible tags. Also, just noticed the text is left justified but it used to be centered.

These are some of the problems I described in the original post. All of these formatting issues seem to be styling issues, maybe the defaults have changed somewhere.

[cscheid]

@bryanhanson The defaults have changed: https://quarto.org/docs/prerelease/1.3/mermaid.html

It's likely we've missed some classes, but I'm giving you that info in case it helps you as well.

[bryanhanson]

Thank you. Fixed everything except html tags for bold, e.g. <b>text</b> is passed through verbatim. Tag <br/> is honored.

[bryanhanson]

Closing, I can work on the remaining details another time. Thank you.

[cscheid]

Thanks for closing it, but I'm going to keep this open for our own internal tracking!

[cscheid]

I confess I don't understand why <br> tags are resolving correctly, but <b> are not, and specifically why that's working on mermaid's live editor. I suspect it's some mermaid version issue. We've already updated mermaid for 1.3, and we try to limit the number of library upgrades per release (so that we don't spend all of our time tracking downstream dependencies).

We'll bump all of our dependencies in about 6 weeks when we move to 1.4 development, and then I'll revisit this.