Mermaid Diagram Themes

Preview Mermaid themes online before you use them in documentation, architecture diagrams, or presentations. Compare how the same Mermaid diagram looks with default, forest, dark, neutral, and base. Each example includes code you can edit and open in the full editor.

Preview Mermaid themes Customize colors

Compare Mermaid themes with your code

Edit the example or paste a diagram, then choose a theme. Open it in the full editor to share or export the result.

Mermaid code

Live preview

Paste Mermaid diagram code to preview.

Open full Mermaid editor

Your code and selected theme travel with the link. PNG/SVG export and sharing are available in the full editor.

Default theme

A familiar palette for everyday documentation. Start here when you want a diagram with the standard Mermaid appearance.

---
config:
  theme: default
---
flowchart TD
  Draft[Draft] --> Review{Review}
  Review -->|Approved| Publish[Publish]
  Review -->|Changes| Draft

Open default in editor

Forest theme

A green palette for nodes and decisions. Compare it with default when you want a different color scheme without changing your diagram.

---
config:
  theme: forest
---
flowchart TD
  Draft[Draft] --> Review{Review}
  Review -->|Approved| Publish[Publish]
  Review -->|Changes| Draft

Open forest in editor

Dark theme

A palette for dark backgrounds. Check the preview and export against a dark canvas so labels and connecting lines remain readable.

---
config:
  theme: dark
---
flowchart TD
  Draft[Draft] --> Review{Review}
  Review -->|Approved| Publish[Publish]
  Review -->|Changes| Draft

Open dark in editor

Neutral theme

A restrained palette for black-and-white documents and print. Check the diagram at its intended size before adding it to a report.

---
config:
  theme: neutral
---
flowchart TD
  Draft[Draft] --> Review{Review}
  Review -->|Approved| Publish[Publish]
  Review -->|Changes| Draft

Open neutral in editor

Base theme

The starting point for custom colors. Add themeVariables to control node fills, text, borders, and connecting lines.

---
config:
  theme: base
---
flowchart TD
  Draft[Draft] --> Review{Review}
  Review -->|Approved| Publish[Publish]
  Review -->|Changes| Draft

Open base in editor

Customize colors with themeVariables

Set theme: base, then add themeVariables inside the same frontmatter config block. Use quoted hex colors, such as "#fef3c7", so YAML reads the color as a value. Start with node fill, text, border, and line colors.

---
config:
  theme: base
  themeVariables:
    primaryColor: "#fef3c7"
    primaryTextColor: "#422006"
    primaryBorderColor: "#d97706"
    lineColor: "#92400e"
    fontFamily: "Arial"
    fontSize: "16px"
---
flowchart TD
  Draft[Draft] --> Review{Review}
  Review -->|Approved| Publish[Publish]
  Review -->|Changes| Draft

Open custom colors in editor

Variables used in this example
Variable	Controls
`primaryColor`	The fill of primary nodes.
`primaryTextColor`	Text inside primary nodes.
`primaryBorderColor`	The border of primary nodes.
`lineColor`	Connecting lines and arrows.
`fontFamily`	The diagram font family.
`fontSize`	The diagram font size, such as 16px.

Other diagram types can use additional variables. Check a real preview after each change. In this viewer, theme and layout controls retain your custom variables when you copy, share, or export the diagram.

Choose a theme for your diagram

Start with default for documentation, neutral for print, or dark for a dark canvas. Use forest to compare a green palette and base when you need custom colors. Check the labels and arrows at the size and background you will use in your document. Themes change appearance while the nodes and connections stay the same.

For a hand-drawn appearance, the full editor offers a separate Excalidraw rendering option. It is not one of Mermaid’s five built-in themes and uses a different rendering path.

See the official Mermaid theme documentation for additional variables, and the configuration reference for frontmatter options. Available variables can depend on the diagram type.

Explore related features

Frequently Asked Questions

What are Mermaid themes?

Mermaid themes define the visual appearance of Mermaid diagrams, including colors, fonts, and line styles.

Can I preview Mermaid themes online?

Yes. Mermaid Viewer lets you preview different Mermaid themes using the same Mermaid code, so you can compare styles instantly.

Do Mermaid themes change diagram logic?

No. Mermaid themes only affect visual style, not the structure or logic of your diagram.

How do I customize Mermaid theme colors?

Use theme: base and add themeVariables inside the frontmatter config block. Use quoted hex colors for node fills, labels, borders, and connecting lines, then check the preview.

Can I keep my theme when opening, sharing, or exporting a diagram?

Yes. Open an example or your edited code in the full Mermaid editor. Its code, selected theme, and custom variables are retained when sharing or exporting PNG/SVG.

Is Excalidraw one of the five built-in Mermaid themes?

No. Default, forest, dark, neutral, and base are the built-in themes shown here. The full editor also offers a separate Excalidraw rendering option for a hand-drawn appearance.