5.1 Styling & Integrations

  1. Themes: default, forest, dark.

  2. Inline styles with style.

  3. Class definitions for reusable styles.

1. Themes: Default, Forest, Dark

By default, Mermaid renders your diagrams with a clean, simple style — but sometimes you’ll want to change how your diagrams look to better match your docs, slide decks, or website. Mermaid makes this easy with themes.

A theme changes your diagram’s:

  • Colors (background, nodes, lines)

  • Fonts and text color

  • Link styles and shapes

✅ Why Use Themes?

Themes help you:

  • Match your diagrams to your brand or documentation style.

  • Make diagrams easier to read in light or dark mode.

  • Quickly switch between looks without rewriting your diagram code.

✅ Common Mermaid Themes

Mermaid comes with a few popular built-in themes. The three you’ll see most are:

🎨 1️⃣ Default

  • The default theme is the clean, classic look you see when you first run Mermaid.

  • It uses a white background, light gray nodes, and black text.

  • Good for simple, clean documentation — especially on light pages.

🌲 2️⃣ Forest

  • The forest theme gives your diagram a green accent palette — nodes, arrows, and connectors use greens and earthy tones.

  • This theme is great for slides, wikis, or docs that need a slightly softer, organic feel.

  • Many people choose forest for architecture diagrams or process flows that need a bit more visual style.

🌙 3️⃣ Dark

  • The dark theme flips your diagram for dark-mode environments.

  • It uses a dark background with lighter text and shapes.

  • Perfect if your site, slides, or notes use a dark theme — it avoids harsh contrast and keeps your diagrams easy on the eyes.

✅ How to Set a Theme

When rendering your diagram, you can set a theme in your Mermaid configuration.

Example with inline config:

Or for dark mode:

✅ Tips for Using Themes

✔️ Pick a theme that matches your docs — for example, if your GitBook is dark, use dark. ✔️ Try different themes in the Mermaid Live Editor to see which fits your style best. ✔️ Use custom themes if you want to go further — Mermaid lets you tweak colors and styles using your own CSS variables too!

In short:

📌 Mermaid’s built-in themes — default, forest, and dark — help you keep your diagrams readable, professional, and consistent with your site or slides — without changing your diagram code at all.

2. Inline Styles with style

While Mermaid’s themes let you quickly change your diagram’s overall look, sometimes you need to highlight a single node, color a specific shape, or adjust one arrow without changing the whole diagram. That’s where inline styles come in — using the style keyword.

✅ What is style in Mermaid?

The style keyword lets you apply CSS-like custom styling directly to a specific node inside your diagram. This is handy when you want to:

  • Highlight a critical step (like an error or warning).

  • Make a key node stand out.

  • Add emphasis without editing the global theme.

✅ Basic Syntax

To style a node, use:

  • NodeID is the ID you used when you defined the node.

  • CSS-Properties are properties like fill (background), stroke (border), color (text), stroke-width (border thickness), etc.

✅ Example

Here’s a simple flowchart with an inline style applied:

What this does:

  • The Process node is given:

    • fill:#f96 → an orange background.

    • stroke:#333 → a dark gray border.

    • stroke-width:2px → a thicker border.

    • color:#fff → white text inside.

✅ Styling Multiple Nodes

You can repeat style for each node you want to customize:

✅ Common Properties

Property
What it does

fill

Background color of the node

stroke

Border color

stroke-width

Thickness of the border

color

Text color

stroke-dasharray

Makes borders dashed instead of solid

opacity

Makes the node partially transparent

✅ When to Use Inline style

✔️ Use it for one-off highlights — for example, showing a failure state in red. ✔️ Combine it with your overall theme — style overrides the theme for that node only. ✔️ Keep it minimal — too many custom styles can make your diagram cluttered.

In short:

📌 Inline style lets you override the look of one node at a time — perfect for quick highlights and emphasis without changing your whole diagram.

✅ More Complex Example

Here’s a diagram with multiple classes:

  • success style colors the Process step green.

  • warning style colors the Validate step yellow.

In short:

📌 classDef + class = reusable styling for multiple nodes — perfect for keeping your Mermaid diagrams clean, consistent, and easy to maintain.

3. Class Definitions for Reusable Styles

Inline styles with style are great for quick highlights — but what if you want to apply the same style to multiple nodes without repeating the same CSS code every time? Mermaid solves this with class definitions — using classDef and class.

✅ What Are Class Definitions?

A class definition lets you:

  • Create a named style rule once (like a CSS class).

  • Apply that rule to as many nodes as you want.

  • Keep your diagram cleaner and easier to update.

If you change the style in the class definition, all nodes using that class update automatically — just like CSS on a website.

✅ Basic Syntax

Mermaid uses two parts: 1️⃣ classDef — define the style 2️⃣ class — apply the style to specific nodes

Example:

✅ How It Works

Example Flowchart:

What this does:

  • classDef important ... defines a class called important with:

    • Red background (#f66),

    • Dark border,

    • White text.

  • class Step1,Step2 important applies that style to both Step1 and Step2.

✅ When to Use classDef

✔️ Use classDef when you want consistent styling across multiple nodes. ✔️ Use it for categories — for example:

  • warning for error states

  • success for positive outcomes

  • highlight for focus steps

✔️ It keeps your diagrams tidy and maintainable, especially if you reuse the same style in many places.

✅ Combining with Themes

You can mix classDef with themes and inline style.

  • Themes set the base look.

  • classDef overrides parts of the theme for a group.

  • style can still tweak individual nodes for unique highlights.

✅ More Complex Example

Here’s a diagram with multiple classes:

  • success style colors the Process step green.

  • warning style colors the Validate step yellow.

In short:

📌 classDef + class = reusable styling for multiple nodes — perfect for keeping your Mermaid diagrams clean, consistent, and easy to maintain.

PreviousChapter 5Next5.2 Embedding Mermaid in Docs & Wikis

Last updated