Diagram Theming

Mermaid supports built-in themes and custom styling to control the visual appearance of your diagrams. You can apply themes at the diagram level using an init directive at the top of your diagram code.

Applying a Built-in Theme

Use the %%{init: {...}}%% directive as the first line of your Mermaid code block:

%%{init: {'theme': 'dark'}}%%
graph TD
    A[Start] --> B[Process]
    B --> C[End]

Available Themes

Theme	Description
default	Light background with standard colors
dark	Dark background, suitable for dark-mode pages
forest	Green-accented theme
base	Minimal, easily customizable base theme
neutral	Subtle grayscale palette

Custom Colors with themeVariables

You can override individual color variables using themeVariables:

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#007FFF', 'primaryTextColor': '#ffffff', 'lineColor': '#172b4d'}}}%%
graph TD
    A[Task] --> B[Review]
    B --> C[Done]

Common themeVariables

Variable	Controls
primaryColor	Node fill color
primaryTextColor	Text inside nodes
primaryBorderColor	Node border color
lineColor	Arrow and edge color
secondaryColor	Secondary node fill
tertiaryColor	Background fill for subgraphs
background	Diagram background color

Applying Themes per Diagram Type

Each %%{init}%% directive applies only to the diagram it precedes. You can use different themes for different diagrams on the same page.

Sequence Diagram Example

%%{init: {'theme': 'forest', 'sequence': {'mirrorActors': false}}}%%
sequenceDiagram
    User->>App: Request
    App-->>User: Response

Gantt Example

%%{init: {'theme': 'dark', 'gantt': {'titleTopMargin': 25}}}%%
gantt
    title Project Timeline
    section Phase 1
    Design :a1, 2024-01-01, 14d
    Development :after a1, 21d

Notes

• Theme directives are case-sensitive. Use lowercase keys such as 'theme' and 'themeVariables'.
• Not all themeVariables apply to every diagram type. Variables that do not apply to the selected diagram type are silently ignored.
• For the full reference of available variables per diagram type, see the official Mermaid theming docs.