Create custom styles

Themes style the whole diagram. classDef lets you go further — define a named style once and apply it to any node, consistently.

Define a style with classDef

classDef takes a name and a set of CSS-style properties. class applies it to one or more nodes by their ID.

Style properties:

Hex colors are supported across all properties. Use them for precise color control.

Apply a style to multiple nodes

class A,B,C myStyle

List node IDs separated by commas. They all get the same style.

Set a default style

Apply a style to all nodes that don’t have an explicit class assignment:

classDef default fill:#f9fafb,stroke:#d1d5db,color:#111827

Useful for establishing a baseline and only overriding the nodes that need to stand out.

Inline styles

For a one-off change on a single node without defining a class:

A[Start]:::highlight
classDef highlight fill:#fef9c3,stroke:#ca8a04

Or apply directly in the node definition using style:

style A fill:#fef9c3,stroke:#ca8a04,color:#78350f

Inline styles work but don’t scale — if multiple nodes need the same treatment, use classDef.

Customize with themeVariables

For deeper control — primary colors, font families, line colors across the whole diagram — use themeVariables with the base theme in a front matter block:

---
config:
  theme: base
  themeVariables:
    primaryColor: "#f0f4ff"
    primaryTextColor: "#1e1b4b"
    primaryBorderColor: "#4f46e5"
    lineColor: "#6366f1"
    fontSize: "16px"
---
flowchart LR
    A --> B --> C

themeVariables only works with the base theme. Using it with any other theme has no effect.

Common themeVariables:

Full themeVariables reference is in the OSS theming docs →

classDef in the Visual Editor

When you change node colors in the Visual Editor, Mermaid automatically generates classDef entries in the code. You can edit those entries directly in the text editor — the Visual Editor and text editor stay in sync.

Generate custom themes with Mermaid AI

If hand-tuning themeVariables or writing out classDef blocks feels like a lot, describe what you want instead. Mermaid AI turns a plain-language description into a working style block, dropped straight into your diagram.

Open the AI panel and tell it the look you’re after:

“Style this with a soft purple palette — light fills, dark text, clear borders on the decision nodes.”

It returns themeVariables (or classDef entries, depending on what you ask for) already wired into your code. Edit the result like anything else — it’s the same syntax covered above, just generated for you.

Prompts that work well:

Because the output is ordinary themeVariables and classDef, everything in this guide still applies. Refine the generated styles by hand, apply a class to more nodes, or set a default. AI gets you a starting point fast; the manual controls take it the rest of the way.

Common questions

• My styles aren’t applying. Check that the node IDs in your class statement match exactly — IDs are case-sensitive. A common mistake is defining classDef myStyle but referencing class A MyStyle with a capital M.

• themeVariables aren’t working. Make sure you’re using theme: base in the front matter. themeVariables has no effect on any other theme.

• I want consistent styles across multiple diagrams. classDef is diagram-scoped — it doesn’t carry across diagrams. For team-wide consistency, agree on a shared style block and paste it into each diagram, or use a theme as the baseline.

What’s next?

• Apply a site-wide style starting point | Apply a theme →
• Add icons to nodes | Use icons →
• Export with your styles intact | Export your diagram →