How-to guide for Mermaid styling

Lounge
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