Mermaid Styling and Themes

Mermaid allows you to style diagrams using three primary methods: Pre-made Themes, Direct Configuration (Theme Variables), and CSS/Inline Styling (Classes).

Mermaid supports themes, configuration, node styles, and layout settings.

Styling can be applied globally or to individual nodes.

Pre-made Themes (The Quickest Way)

Mermaid comes with several built-in themes. You can apply them using a configuration directive block at the absolute top of your code snippet.

---
config:
    theme: dark
---

flowchart TD
    A --> B

Try this code ❯

Available Built-in Themes:

default: The standard light theme with blue and gray tones.
dark: A high-contrast dark theme optimized for night-mode viewers.
neutral: A minimalist grayscale theme ideal for black-and-white documentation or printing.
forest: A green-accented theme.
base: A blank slate theme used specifically when you want to write entirely custom colors from scratch.

Customizing Theme Variables

If you like a built-in theme but want to tweak specific elements (like changing the background color or making lines thicker), you can modify themeVariables inside the top configuration block.

Example

---
config:
  theme: base
  themeVariables:
    primaryColor: '#ffcc00'
    primaryTextColor: '#111111'
    lineColor: '#ff3333'
    signalColor: '#0033aa'
---
flowchart LR
    A[Custom Yellow Node] -->|Red Line| B(Another Node)

Try this code ❯

Highly Used Theme Variables:

primaryColor: Main background color for diagram nodes.
primaryTextColor: Color of text inside primary shapes.
lineColor: Global color for connection arrows and lines.
edgeLabelBackground: Background color for labels attached to lines.
mainBkg: Main canvas background color (supported in specific diagram types).

Individual CSS Inline Styling (style)

For flowcharts, you can bypass global themes and style individual nodes using the style keyword followed by standard CSS properties.

Example

flowchart TD
    A[Critical Error] --> B[System Halt]

    style A fill:#ff0000,stroke:#333,stroke-width:4px,color:#fff

Try this code ❯

4. Reusable Style Classes (classDef)

If you have multiple nodes that need to look identical, define a reusable theme class using classDef and apply it using the :::classname shortcut or the class operator.

Example

flowchart TD
    A[Node A] --> B[Node B]

    classDef important fill:#f96,stroke:#333,stroke-width:2px
    class A important

Try this code ❯

5. Line Customization (linkStyle)

To style the connector arrows rather than the nodes, use linkStyle referencing the 0-indexed order of the lines as they are listed in your code block.

Example

flowchart LR
    A --> B
    B --> C
    C --> D
    
    linkStyle 0 stroke:#ff3333,stroke-width:3px;
    linkStyle 1,2 stroke:#33cc33,stroke-dasharray: 5 5;

Try this code ❯

YAML Frontmatter

Modern Mermaid configuration can be placed in YAML frontmatter.

---
title: Custom Styled Flowchart
config:
    theme: base
    themeVariables:
        primaryColor: "#ff9900"
        primaryTextColor: "#ffffff"
        lineColor: "#333333"
---

flowchart LR
    A[Styled Node] --> B[Standard Node]

Try this code ❯

Hex colors should be quoted in YAML.

Styling Individual Nodes

flowchart TD
    A[Critical Error] --> B[System Halt]

    style A fill:#ff0000,stroke:#333,stroke-width:4px,color:#fff

Try this code ❯