mermaid theming: classDef requires htmlLabels: true

[dmi3kno]

Description

I am very encouraged to see a new approach to styling mermaid diagrams in Quarto 1.3! Thank you!

My question is related to using classDef property inside the diagram to style some particular nodes. It seem to be working for everything other than the color:

---
title: "Untitled"
format: 
   html:
     mermaid: 
       theme: default
---

```{mermaid}
flowchart LR
  classDef dark color:#fff,fill:#0d5caa
  Lorem --> Ipsum --> Dolor
  class Lorem,Dolor dark
```

Github rendering

flowchart LR
  classDef dark color:#fff,fill:#0d5caa
  Lorem --> Ipsum --> Dolor
  class Lorem,Dolor dark

Loading

Quarto rendering

I came across mermaid-js/mermaid#1955 in mermaid, but I don't think it is related to that. What is more likely is that classDef color gets overwritten by the document CSS. Is that something you guys can confirm? What would be the proper line of attack here? How can I make sure classDef stipulated color takes precedence over $body-color?

[cscheid]

You'll have to inspect the CSS with the developer tools in your browser and investigate, I'm afraid. Each mermaid diagram uses its own set of CSS rules and we don't have the cycles to track all of it.

[dmi3kno]

Thank you for the tip. I should have inspected it before writing, of course. The difference seems to be that github is using a different HTML construction to render the flowchart-label:

• github: <foreignObject><div><span>...</span> </div></foreignObject>
• Quarto: <text><tspan>...</tspan></text>

The Mermaid CSS is very similar, but since <text> has its own styling, it overrides the style assigned at the container group <g> (the custom dark class).

In order to make Quarto use the same HTML construct one should add

%%{init:{"theme":"base", "flowchart": {"htmlLabels": true}}}%%

This options is not currently exposed in YAML, but I feel like it should be:

---
title: "Untitled"
format: 
   html:
     mermaid: 
       theme: default
       flowchart:
         htmlLabels: true
---

This seems to be simiar to #6064. Is there a cleaner way to force HTML labels by default?

[dmi3kno]

While we are on it, can I please suggest an improvement to documentation?

This page suggests that the properties are set as

$mermaid-fg-color--lighter: $body-color-lighter;
$mermaid-fg-color--lightest: $body-color-lightest;

When if fact they are set as

$mermaid-fg-color--lighter: lighten($body-color, 10%) !default;
$mermaid-fg-color--lightest: lighten($body-color, 20%) !default;

I don't think that body-color-lightest or body-color-lighter are even defined. Would be good to clarify those for future users. What do you think @cderv ?

[cscheid]

Ouch, those definitely need changing. I think this was a copy-and-paste error.

[cderv]

Thanks @dmi3kno ! It has been fixed already in quarto-dev/quarto-web@0e49089 (Thanks Carlos ! )

Thanks for the report!