Global or document-wide styles in Mermaid

Question

I have a document in which I am creating a number of flow charts which share a common legend of styles and colors for their items. For example:

graph TB
  classDef client fill:#D5E8D4,stroke:#82B366,color:#000000;
  classDef utility fill:#E1D5E7,stroke:#9673A6,color:#000000;
  classDef resource fill:#DAE8FC,stroke:#6C8EBF,color:#000000,stroke-dasharray: 3 3;
  <!-- and more -->

Right now, I need to add these classDefs to each flow chart that I make. Copy-and pasting them isn't the end of the world, but it's not the best when you have twenty flow charts to make that all use the same style definitions.

Is there any way to specify a per-document set of classDefs or styles that are shared between all diagrams of the same type?

is there any option to switch between dark and default theme as per the background coor of github md file. i am adding the raw mermaid code into the code tag in md. but when theme is changed from dark to light in github no lines are visible. — Sagar Nayak, Jul 01 '22 at 07:55

Tim · Accepted Answer · 2020-11-08T18:35:47.057

For this, Mermaid allows using CSS: you declare CSS classes once and use them later in any Mermaid definition in the same manner as if they were declared using a classDef. Added benefit: you actually declare styles where they belong (*.css files or directly in the <style> tag).

Example on JSFiddle: https://jsfiddle.net/negbsw0v/

Somewhere in the CSS:

.client > rect {
    fill: #D5E8D4 !important;
    stroke: #82B366 !important;
    color: #000000 !important;
}
.utility > rect {
    ...
}
.resource > rect {
    ...
}

In a Mermaid definition:

graph TB
A --> C
B --> C
class A client
class B resource
class C utility

Relevant documentation: http://mermaid-js.github.io/mermaid/#/flowchart?id=css-classes

Note: as you can see above, unlike the documentation suggests, !important directive is added to some style definitions, because if not added, Mermaid CSS takes precedence over the custom CSS. This is the case at least in Firefox with the current version of Meramaid (8.8.3).

Global or document-wide styles in Mermaid

1 Answers1