We are currently planning to migrate to a different platform for the forum. We will announce this fact both here and on Twitter, once we have settled on a solution.

Mermaid custom styling

edited July 2020 in Customisation

Hi all,
I am trying to use a custom CSS to change the style of mermaid diagrams.
I mainly use the Berlin Light theme and my doc has a mermaid gantt chart.

The gantt chart looks quite bad by default:

  • The background is way too dark for the black font that is used for the chart elements
  • The font is very small

I want to change that by using a custom CSS. I managed to change the background color, my custom CSS looks like this:

body .mermaid-chart svg {
    background-color: var(--grey-0);
    border-radius: 5px;

But I cannot for the life of me figure out how to change font color, font size, or some of the other settings (like color of the chart elements etc).

I know that custom Mermaid styling is in the backlog, but is there a way to achieve the same with a custom CSS? If yes, how?

Thanks for helping a CSS noob out here!


Sign In or Register to comment.