Change Mermaid CSS

Resolved help
, ,
#1

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.

image
image651×853 31.9 KB

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
#2

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

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

#3

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

Fixing Mermaid diagram display
Ability to resize and align mermaid diagrams
#4

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.

#5

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