Mermaid not rendering classDef

[gianfaProm]

Bug description

Hi, I cannot manage to render mermaid charts with style classes.

Steps to reproduce

Case1: classDef

Running the following code you can see that github is able to render it as a mermaid graph.

Here I just define a style class for a node.

```{mermaid}

flowchart TD;
    subgraph subg1
        direction LR

        W:::style1;

        W --> Q

        classDef style1 fill:#ffffff,stroke-width:1.5px,stroke:#000000, color: grey

    end
```

flowchart TD;
    subgraph subg1
        direction LR

        W:::style1;
        W --> Q

        classDef style1 fill:#ffffff,stroke-width:1.5px,stroke:#000000, color: grey

    end

Loading

Case2: CSS

I tried to pass the style class via css, adding the mermaid.css file in the _quarto.yaml file, as shown in the docs here. But it didn't work.

```{mermaid}

flowchart TD;
    subgraph solution1
        direction LR

        W --> Q

    end

    class W cssClass
```

What I'm doing wrong?

Expected behavior

I'd like to obtain the rendering of the chart, as shown in the example of "Case 1".

Actual behavior

It doesn't render, or I get a error message.

Your environment

OS: Mac 14.1

Quarto check output

Quarto 1.4.466
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.1.8: OK
Dart Sass version 1.55.0: OK
Deno version 1.33.4: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.4.466
Path: /Applications/quarto/bin

[✓] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)

[✓] Checking LaTeX....................OK
Using: Installation From Path
Path: /Library/TeX/texbin
Version: 2023

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
Version: 3.10.13
Path: /Users/giana/.pyenv/versions/3.10.13/bin/python3
Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
Version: 4.2.0
Path: /Library/Frameworks/R.framework/Resources
LibPaths:
- /Library/Frameworks/R.framework/Versions/4.2/Resources/library
knitr: 1.42
rmarkdown: 2.20

[✓] Checking Knitr engine render......OK

[gianfaProm]

I can't actually render the images either, which I can do with regular markdown

```{mermaid}

flowchart TD;
    subgraph subg1
        direction LR

        B("Example logo <img src='https://logos-world.net/wp-content/uploads/2020/09/Linux-Logo-1996-present.png'>");

        A --> B

    end
```

(Just writing here for the records, even if I know, this is another issue; but maybe both the issues depend on a single misconfiguration on my computer)

[cderv]

Can you try latest pre-release ?

I can't reproduce I believe.

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

```{mermaid}
flowchart TD;
    subgraph subg1
        direction LR
        W:::style1;
        W --> Q
        classDef style1 fill:#ffffff,stroke-width:1.5px,stroke:#000000, color: grey
    end
```

```{mermaid}
flowchart TD;
    subgraph subg1
        direction LR
        B("Example logo <img src='https://logos-world.net/wp-content/uploads/2020/09/Linux-Logo-1996-present.png'>");
        A --> B
    end
```

Also, Quarto is using mermaid 10.2 so this needs to be considered regarding supporting features.

[gianfaProm]

Hi @cderv, thank you very much for your reply.
By adding the header, as you propose, I can render it! I had forgotten to add the header, my fault 😅.