Start free

Apply a theme

Themes change the visual style of your entire diagram (colors, fonts, and line styles) in one click. Start here before reaching for custom styles.

Change the theme

  1. Open a diagram in the editor.
  2. Click Theme selector in the top panel.
  3. Choose a theme. The diagram updates in real time.
ThemeBest for
MermaidDefault — clean, professional, works everywhere
DefaultClassic Mermaid style
ForestGreen palette — good for nature, sustainability, or org content
BaseThe only theme you can fully customize — start here if you’re building a branded style
DarkDark background — good for technical presentations
NeutralMuted, grayscale — good for print or black-and-white documents

Set a theme in your diagram syntax

Lock a theme to a specific diagram using a front matter block at the top of your code. The diagram will use this theme regardless of editor settings — useful when sharing or embedding.

---
config:
  theme: forest
---
flowchart LR
    A[Start] --> B[End]

Available values: default, neutral, dark, forest, base

The base theme is the only one that supports deep customization via themeVariables. If you want to modify colors, fonts, or other properties beyond what classDef provides, use base as your starting point.

Apply a theme in the Visual Editor

In the Visual Editor, click the design icon in the center toolbar and select from the themes and looks available there. Changes apply immediately to the canvas.

Common questions

  • The theme looks different when I share the diagram. If you haven’t locked the theme in the front matter, the diagram will render with the viewer’s default settings. Add a front matter block to lock it.

  • I want to customize beyond what the themes offer. Themes are a starting point: use classDef for node-level customization or themeVariables with the base theme for deeper control. Create custom styles →

What’s next?