Share your CSS

Lounge
148

Due to a request for help elsewhere on this forum I started digging around how Mermaid charts are displayed. It seems that the css used to format the chart is exposed and can be modified using userstyle.css and so I used it to change the chart font. It also means that a “standard” graph/flowchart like this

mermaid-original

can be tweaked to look as awful as this

mermaid-mod

There may be better ways to select elements but I just settled on the first guess I made that worked. Unfortunately I could not work out how to change the arrowhead colour before my limited attention span cut in. I also do not know if all the !importants are required, I was just a bit lazy…

Just posted here in case anyone may find this useful …

:root {
    --mermaid-font-family: "Bahnschrift SemiCondensed" !important;
    /* sets mermaid font variable */
    }
path.path {
    stroke: red !important;
    /* sets line colour for the lines joining nodes*/
    }
rect.label-container,
polygon.label-container,
circle.label-container,
ellipse.label-container {
    fill: gold !important;
    /* sets fill color for nodes*/
    stroke: green !important;
    /* sets line color for nodes*/
    stroke-width: 2px !important;
    /* sets line width for nodes*/
    }
span.edgeLabel {
    background-color: blue !important;
    /* sets background color for text boxes */
    color: white !important;
    /* sets font color for text boxes */
    }

By adding this

div.mermaid {
    background-color: #1D2024 !important;
    /* sets full background colour */
    }

and setting the colours to black and white values you can get something like this which may interest dark theme enthusiasts. However if you start doing this you may have to track down all the css elements and classes for all the different chart types you use (and there’s still the problem with the arrowheads!).

mermaid-mono

3 Likes