Mermaid Diagram Theming

Quarto v1.3 updates Mermaid to version 9.2.2, and adds a number of theming options to diagram.

Default Mermaid Theme

Starting in v1.3, Quarto will use the current theme’s colors for Mermaid diagrams by default. If you use Quarto’s bootswatch built-in themes (or a custom theme that uses the same SCSS variables), Mermaid diagrams in Quarto will automatically follow your project themes.

The SCSS variables used by the default Mermaid theme shipped with quarto, together with their default values, are:

$mermaid-bg-color: $body-bg;
$mermaid-edge-color: $secondary;
$mermaid-node-fg-color: $body-color;
$mermaid-fg-color: $body-color;
$mermaid-fg-color--lighter: $body-color-lighter;
$mermaid-fg-color--lightest: $body-color-lightest;
$mermaid-font-family: $font-family-sans-serif;
$mermaid-label-bg-color: $body-bg;
$mermaid-label-fg-color: $primary;
$mermaid-node-bg-color: $primary-transparent;
$mermaid-node-fg-color: $primary;

These have CSS variable counterparts that can also be overridden:

:root {
  --mermaid-bg-color: #{$mermaid-bg-color};
  --mermaid-edge-color: #{$mermaid-edge-color};
  --mermaid-node-fg-color: #{$mermaid-node-fg-color};
  --mermaid-fg-color: #{$mermaid-fg-color};
  --mermaid-fg-color--lighter: #{$mermaid-fg-color--lighter};
  --mermaid-fg-color--lightest: #{$mermaid-fg-color--lightest};
  --mermaid-font-family: #{$mermaid-font-family};
  --mermaid-label-bg-color: #{$mermaid-label-bg-color};
  --mermaid-label-fg-color: #{$mermaid-label-fg-color};
  --mermaid-node-bg-color: #{$mermaid-node-bg-color};
  --mermaid-node-fg-color: #{$mermaid-node-fg-color};
}

Built-in Themes

If you want to use Mermaid’s own themes, you can do so by configuring the mermaid option in your YAML front matter:

html:
  mermaid:
    theme: forest

The available themes from mermaid are: default, dark, forest, and neutral.