Mermaid Styling not working

Help
1

Bug report

I’m working with the Mermaid Plugin. The diagrams react when I update the settings for the Theme, but when I look at playing around with the Custom theme CSS and Custom theme variables (mostly just using the examples) nothing seems to be happening. I didn’t give this too much effort troubleshooting as it was a simple style change to just see if I could get my diagrams to be centered instead of left aligned.

image
image1880×867 124 KB

Environment

  • Platform: Windows
  • Platform version: 11
2

Hi,

Since it’s just a plain CSS, the CSS you specified text { font-size: 72px !important; } only applies to the text nodes of SVG diagrams.

You have to understand how Mermaid theming works:

You can inspect the diagrams in preview so you can understand what CSS selectors you need.

3

Hi,

could you possibly provide an example diagram and a custom theme CSS and custom theme variables that have worked for you? I’ve tried different diagrams, different CSS selectors, but nothing seems to change how the diagram is rendered.

I’ve done a side by side comparison when I try and change the styling inline and it works according to the documentation, but when I try to define a separate CSS and then reference that it doesn’t work

CleanShot 2022-06-29 at 09.00.41@2x
CleanShot 2022-06-29 at 09.00.41@2x1746×1368 187 KB

4

That’s out of scope for Inkdrop but here you are:

```mermaid
%%{init:{
  'theme':'base',
  'themeVariables': {
    'primaryColor':'#6A7FAB',
    'primaryTextColor':'#FAFBF9',
    'primaryBorderColor':'#6A7FAB',
    'lineColor':'#6A7FABCC',
    'textColor':'#6A7FABCC',
    'fontSize':'16px'
  }
}}%%

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

It yields:

CleanShot 2022-07-01 at 16.47.01@2x
CleanShot 2022-07-01 at 16.47.01@2x1534×896 61.2 KB

5

Thank you for the example. I’m guessing then that styling can only be done inline, and that styling via the plugin preferences does not work at this moment. OK, I’ll work with that. Thank you!

6

No, the plugin preferences work as well. You have to reload the app to get the customization applied.
It doesn’t reload automatically because it can cause errors with the settings in the middle of typing.

7

I actually learned that myself too here recently. I was trying to setup the web clipper, and noticed things changed after I had to restart Inkdrop. It’s a weird user experience. I can change the theme, and that will update without having to reload the app, but the custom CSS or Theme variables requires a restart.