Change Mermaid CSS

Hello, Obsidian community,

I start using the integrated Mermaid diagrams in my notes.
However, sometimes I would like to modify the block colors and styling/theme of the diagram to fit the light/dark mode of the Obsidian editor.

I read the mermaid documentation but realized the CSS is controlled by using another file/window.

I’m not familiar with CSS. Could anyone provide some example codes to show how to modify those in the mermaid block?

I am using Flowchart, Gantt, and state diagrams. I know we can change the flowchart block color in some way, but I’m not sure how to do so in other diagrams.

Thank you very much!

W.Wang

1 Like

Same here, I wonder how do I style a Class Diagram too.

The default font is just too small for the class diagram.

To style in the mermaid block the current way that works is to define the classes within the block itself.

For example:

graph LR;
    A-->B[AAA];
    B-->D;

    %% Class Definitions
    %% =================
    class A cssClass;
    classDef cssClass fill:#f9f,stroke:#333,stroke-width:4px, font-size:15px;

It appears that adding the css do the custom.css file isn’t working for the moment.

For more details see the mermaid docs: https://github.com/mermaidjs/mermaid-gitbook/blob/master/content/flowchart.md#styling-a-node

2 Likes

Do you have any idea how to style simple PIE diagram? I tried to replicate your Class definition, but the diagram is not generated. Also there is no documentation explaining PIE diagram just nodes.

Best to refer to the Mermaid documentation in total to understand its styling rules: https://mermaid-js.github.io/mermaid/#/classDiagram?id=styling