Mermaid css styling

Support
1

I've upgraded this week my Mac install to

Joplin 1.8.5 (prod, darwin)
Revision: b28f087

and I noticed that the custom css is affecting how my mermaid graphs are rendered in Markdown.

I tried to search through the forum and online to find how to adjust it and got most of the objects adjusted to my current theme.

image
image1064×218 18.7 KB

My theme is a modified version of GitHub - robotcorner/joplin-theme-dark-gruvbox: Inspired by "Mayukai Mirage Gruvbox Darktooth Theme" on VSCode.

What I can't figure out is how to change the defaults for the subgraph?
If the subgraph doesn't have any children, it's the color of a rect. Once it has, it reverts to default color.

Bonus question: How does one figure out the names of css objets? I'm not a web dev and it's not obvious to me how could I investigate further. I tried exporting the note to html and searching through the style section, using the Dev tools in Joplin with no luck

2

To answer my questions:

  1. the subgraph is handled by .cluster rect

2`To figure it out you can look in mermaid's repo for styles

3

Sorry. I totally missed this post. I'm glad you figured it out.

At one point I was thinking about allowing to set the Mermaid style (on of the ons that come with Mermaid) via an option, but I can't recall why we decided against it.

4

that's alright, it wasn't a big issue. I think I read about the idea somewhere here while looking for solutions, but for me I wanted something applied throughout Joplin.

I do wonder tho: how come the edges in Joplin's mermaid renders are not rounded like I see in mermaid's docs? E.g.
image

vs mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
image

5

It could be the Mermaid version. We are using 8.8.4 and maybe something has changed how it is rendered.

I saw that there were quite some fixes between 8.8.4 and the latest version.

@laurent any objection to updating Mermaid?

1 Like
6

Not sure why if you're using the exact same code from the mermaid docs, but I have noticed the lines are curved when I use flowchart TD instead of graph TD.

7

didn't even noticed there's a flowchart graph type in the exemples. Looks like that also requires different CSS styling at least for edge arrows

8

Flowchart seems to be what I need most of the time. I can't find what I need to change to change the flowchart arrowhead? Looks like it is the default black color
image

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.