Skip to content
MermaidViewer
Log inOpen editor

Mermaid Themes and Styling: Colors, Fonts and Custom CSS

Customise Mermaid diagrams: built-in themes, the init/frontmatter config, themeVariables for brand colors, classDef and style for individual nodes, and link styles.

7 min readUpdated

Mermaid's defaults look good, but you'll often want diagrams that match your brand or document. There are three levels of control: pick a theme, tweak theme variables, and style individual elements.

1. Built-in themes

Mermaid ships five themes: default, neutral (great for print), dark, forest and base (the one designed for customisation). Switch themes in the MermaidViewer toolbar, or set it in the diagram itself with frontmatter:

mermaid
---
config:
  theme: forest
---
flowchart LR
    A --> B

2. Theme variables

With the base theme you can override colors and fonts using themeVariables. All other colors are derived automatically.

mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: "#ccfbf1"
    primaryBorderColor: "#0d9488"
    primaryTextColor: "#134e4a"
    lineColor: "#0f766e"
    fontFamily: "Inter, sans-serif"
---
flowchart LR
    A[Brand] --> B[Colors]

The older %%{init: {...}}%% directive on the first line still works too, if a platform doesn't support frontmatter.

3. Styling individual nodes

In flowcharts, classDef defines a style and ::: or class applies it. style targets a single node and linkStyle targets arrows by index.

mermaid
flowchart LR
    A[Normal] --> B[Important]:::hot --> C[Done]
    classDef hot fill:#fef3c7,stroke:#d97706,stroke-width:2px
    style C fill:#dcfce7,stroke:#16a34a
    linkStyle 0 stroke:#94a3b8,stroke-dasharray:4

Tips for readable diagrams

  • Use color to encode meaning (status, ownership), not decoration.
  • Ensure enough contrast between text and fill — test in dark mode too.
  • Prefer the neutral theme for documents that will be printed in black and white.
  • Keep a snippet of your brand frontmatter so every diagram starts consistent.