How-to guide for Mermaid styling

Lounge
1

Hi everyone, I'm fairly new here but I've been using Joplin for a while, particularly to produce Mermaid charts.

Whilst I'm no CSS expert I have been fairly successful in modifying styles within the Mermaid code itself (as opposed to userstyle.css) using classDef as a container for styles.

If you wish to learn more - or indeed add to it as I'm very much still learning - I've written a short guide on the following link:
Great looking Mermaid flowcharts in seconds

Do let me know what you think. Thanks,

Dom

4 Likes
2

I just realised some may not be able to access this.

Below is a 'friend link' that enables you to bypass any paywall:

3 Likes
3

Great article. Thanks for sharing!

1 Like
4

Nice!
But for some styling AFAIK we need to use CSS.
For example, if I want to change an arrow's color I can't change also the harrowead color.

Next I 'll show what I mean.

If I have a simple graph like this:

graph RL
 
    A:::someclass --> B
    classDef someclass fill:#f96;
    linkStyle default fill:none,stroke-width:3px,stroke:red

I obtain this.
0001

If I want to make also the arrowhead in red I need to mess with the CSS.
First, I need to find the ID of the arrow.
I done this by looking into teh note with the "HELP -> toggle developers tools" but now I know it is simple.
It is actually very simple; the ID is "L-" then there is the id of the first node, a dash and then the of the second node.

Then, I do in my note:

   ```mermaid
      graph RL
 
          A:::someclass --> B
          classDef someclass fill:#f96;
          linkStyle default fill:none,stroke-width:3px,stroke:red
	
          C --> D
    ```

    <style>
    #L-C-D .arrowheadPath {
         fill:red !important;
    }
    </style>

and I obtain:
0002

With style you can do a lot of trikcs. It's quite simple and better documentated than mermaid.

If anyone knows a better or simpler way I'd like to know it.

2 Likes
5

Do you know how to style classDiagram in mermaid in Joplin?

6

I'm not sure i did understand what you mean, but if you want to learn what are the CSS class in the diagram you can do, as I did, opening the developers tools.