Issues with automatic Mermaid theme

[tessus]

A while back there was a PR that changed the Mermaid look depending on the theme selected in Joplin.

Turns out that some of my Mermaid diagrams are not as legible anymore. It's also slightly problematic when you export the diagram (e.g.: save as png).

I am using the dark theme in Joplin, but I would still like Mermaid to use a light theme (also a white background for the diagram).

There is the possibility to use the mermaid code %%{init: {'theme':'default'}}%%, but the problem is that I would have to do that every single time and the background of the Mermaid diagram is dark when using the dark theme. This results in an even less readable diagram.

Example diagram in dark theme with mermaid light theme

I know I could additionally use CSS, but once again, this seems like a hassle to me and has a few drawbacks.

Mermaid is a popular feature in Joplin. I know that adding more options is not always welcome and warranted, but I believe in this particular situation it would make sense to add an option:

Mermaid theme

with the following possible values:

• Auto (current behavior)
• Light (previous behavior)
• Dark

It would also allow to add the other Mermaid themes, like forrest.

@laurent what do you think?

[laurent]

@tessus

There is the possibility to use the mermaid code %%{init: {'theme':'default'}}%%, but the problem is that I would have to do that every single time and the background of the Mermaid diagram is dark when using the dark theme.

Any reason you don't simply use the dark theme for Mermaid? You say it's not legible?

[tessus]

It is legible but not as well as it was before. I am hesitant to post an example, because it would take me a while to anonymize the data.

Additionally, when I export the document, it looks a bit weird that the document itself is not dark, but the mermaid diagrams are.

While creating a plugin might also work, I believe this functionality should be in core.

[personalizedrefriger]

@tessus

Additionaly, when I export the document, it looks a bit weird that the document itself is not dark, but the mermaid diagrams are.

I would consider this a bug — if the document is in light mode, mermaid diagrams should also be in light mode.

[tessus]

@personalizedrefriger

if the document is in light mode

Afaik exported documents are always light, no matter the theme in Joplin. But maybe I am wrong. I'd have to check the code.

[laurent]

@tessus

Afaik exported documents are always light, no matter the theme in Joplin. But maybe I am wrong. I'd have to check the code.

Yes I think there's something like this. For printing too, the document is set to light theme in the background. So if the Mermaid still appear as dark in this case, that's indeed a bug

[tessus]

The bug is another issue. I was rather addressing the fact that users should be able to choose how Mermaid diagrams are rendered.

Maybe I'll create a plugin first. Let's see if I can manage. Not sure yet how to hook into the Mermaid init. I might have to pester you during implementation.
I'll look into it next week.