Homepage    |    GitHub    |    API    |    FAQ

Mermaid css styling

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.

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

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

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.

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

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?

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.

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

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