Mermaid Styling not working

šŸ’šŸ»ā€ā™‚ļøSupport
#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.