Using mermaid css with Obsidian


I’m able to style a flowchart following the obsidian docs. It works, okay, but only using , eg. classDef default stroke:white;. I can’t seem to figure out how to change the rects only.

The mermaid.js docs give a list of globally accessible selectors, but I can’t figure out how to invoke them in Obsidian.

For example, in this pie chart:

pie showdata
        title /r/obsidianmd posts by type
        "Graphs" : 85
        "Dashboards" : 14
        "Tips" : 1

I want to change the color of the text in the legends. If I do classDef default text: white; like for the flowchart it complains

Error parsing Mermaid diagram!

Lexical error on line 7. Unrecognized text.
...        "Tips" : 1classDef default tex

In fact, I get the error message with any selector I might try.

So I clearly don’t understand the syntax rules. In the flowchart it was clear how to attach a class to a node, but here it is not clear. Is there any more complete documentation on this?

Thanks in advance,



I tried this link, but it complained when I entered the css described. In fact it complains about any snipped.

What I’m trying to do

Things I have tried

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.