Styling with Themes and Classes

When you want your diagrams to match your website's look or stand out visually, Mermaid.js offers several ways to change the appearance of your diagrams. The simplest way is to use Mermaid's built-in themes, which instantly change colors, fonts, and backgrounds. You can apply a theme by specifying it in your diagram's configuration, letting you quickly switch between styles like default, forest, dark, and neutral. This is useful for adapting diagrams to different environments, such as dark mode or brand guidelines.

To go beyond built-in themes, Mermaid allows you to define and use custom classes for nodes and edges. By adding class definitions in your diagram code, you can target specific elements and apply custom styles using CSS. For example, you can assign a class to a node or an edge by using the triple-colon syntax, like A:::customNode. Then, in your CSS, you can define how .customNode should look. This approach gives you fine-grained control, letting you highlight important nodes, change edge colors, or adjust fonts for specific labels. Classes are especially helpful when you need to emphasize certain parts of a diagram or create a consistent visual language across multiple diagrams.