### Bug description

Throughout the different releases, there have been various rendering issues with Mermaid in Quarto. I understand that there's a lot of moving parts to keep track of, so no judgement there.

I just noticed a new one with Quarto 1.3, so I thought I'd do a more thorough investigation. I created [this repo](https://github.com/data-intuitive/mermaid-demos-in-quarto) which gets rendered to [this site](https://mermaid-demos-in-quarto.netlify.app/syntax/flowchart.html), which should be a mirror of the [mermaidjs](https://mermaid.js.org/syntax/flowchart.html) syntax documentation.

Since Quarto 1.3 uses mermaid 9.1.1, I went back to the earliest version of mermaid js which had the syntax examples in the docs, which happened to be version 9.3.0. I used [this script](https://github.com/data-intuitive/mermaid-demos-in-quarto/blob/main/_script.R) to translate the md files in the mermaid repository to qmd files in my repository.

## Issues in Quarto v1.3

(See comment below for issues in Quarto v1.4, since some issues have already been fixed by upgrading to mermaid 10)

Flow charts:

- [ ] No background for text on links makes the labels less readable. [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/flowchart.html#text-on-links), [Expected](https://mermaid.js.org/syntax/flowchart.html#text-on-links)
- [ ] Character escaping doesn't work. [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/flowchart.html#entity-codes-to-escape-characters), [Expected](https://mermaid.js.org/syntax/flowchart.html#entity-codes-to-escape-characters)
- [ ] :exclamation: :exclamation: Backgrounds of subgraphs in the Flowchart makes the chart unreadable (also in dark mode). [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/flowchart.html#subgraphs), [Expected](https://mermaid.js.org/syntax/flowchart.html#subgraphs)
  
![Screenshot from 2023-05-04 14-20-00](https://user-images.githubusercontent.com/553642/236202121-863350fa-b15b-4a42-b8b2-530af3a6805b.png)

- [ ] Interactive tooltips don't work. [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/flowchart.html#interaction), [Expected](https://mermaid.js.org/syntax/flowchart.html#interaction).
- [ ] Html code is not escaped - similar to previously mentioned escaping issues. [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/flowchart.html#css-classes), [Expected](https://mermaid.js.org/syntax/flowchart.html#css-classes)
- [ ] Fontawesome icons are not rendered. [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/flowchart.html#basic-support-for-fontawesome), [Expected](https://mermaid.js.org/syntax/flowchart.html#basic-support-for-fontawesome)

Sequence diagrams:

- [ ] Background and labels is rendered behind vertical line, resulting in less readability. [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/sequencediagram#loops), [Expected](https://mermaid.js.org/syntax/sequenceDiagram.html#loops).

Class diagrams:

- [ ] Generics are not rendered properly. [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/classdiagram#generic-types), [Expected](https://mermaid.js.org/syntax/classDiagram.html#generic-types)
- [ ] Html code in labels. [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/classdiagram#labels-on-relations), [Expected](https://mermaid.js.org/syntax/classDiagram.html#labels-on-relations)
- [ ] Background in concurrency diagram is coloured wrong. [Example](https://mermaid-demos-in-quarto.netlify.app/syntax/statediagram#concurrency) [Expected](https://mermaid.js.org/syntax/stateDiagram.html#concurrency)

This was all rendered with quarto 1.3.340.

<details><summary>Output of quarto check</summary>

    [✓] Checking versions of quarto binary dependencies...
          Pandoc version 3.1.1: OK
          Dart Sass version 1.55.0: OK
    [✓] Checking versions of quarto dependencies......OK
    [✓] Checking Quarto installation......OK
          Version: 1.3.340
          Path: /home/rcannood/opt/quarto-1.3.340/bin
    
    [✓] Checking basic markdown render....OK
    
    [✓] Checking Python 3 installation....OK
          Version: 3.11.3
          Path: /usr/bin/python3
          Jupyter: 5.2.0
          Kernels: python3, julia-1.7, ir
    
    (/) Checking Jupyter engine render....0.00s - Debugger warning: It seems that frozen modules are being used, which may
    0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
    0.00s - to python to disable frozen modules.
    0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
    0.00s - Debugger warning: It seems that frozen modules are being used, which may
    0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
    0.00s - to python to disable frozen modules.
    0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
    [✓] Checking Jupyter engine render....OK
    
    [✓] Checking R installation...........OK
          Version: 4.2.3
          Path: /usr/lib64/R
          LibPaths:
            - /home/rcannood/R/x86_64-redhat-linux-gnu-library/4.2
            - /usr/local/lib/R/library
            - /usr/lib64/R/library
            - /usr/share/R/library
          knitr: 1.42
          rmarkdown: 2.20
    
    [✓] Checking Knitr engine render......OK

</details>

### Checklist

- [X] 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.
- [X] Please [format your issue](https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us) 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.
- [X] Please provide the output of `quarto check` so we know which version of quarto and its dependencies you're running.
cscheid
2023-05-04T12:09:20Z
rcannood
bug mermaid
v1.4
open
Various mermaid rendering issues
https://github.com/quarto-dev/quarto-cli/issues/5416