TryMermaid

Mermaid theme generator

Pick a handful of colours and see a flowchart, a sequence diagram and a pie chart restyle as you go. Then copy the theme as front matter, an init directive or JSON config. Free, with presets to start from.

---
config:
  theme: base
  themeVariables:
    primaryColor: "#e0f2fe"
    primaryBorderColor: "#0369a1"
    lineColor: "#475569"
---
flowchart LR
    A[Pick colours] --> B[Preview] --> C([Copy the theme])
Loading the tool…

How to do it

  1. Step 1

    Choose colours

    Start from a preset, or pick your own colours.

  2. Step 2

    Preview live

    Watch the sample diagrams update, or paste your own diagram to preview.

  3. Step 3

    Copy the theme

    Copy the theme as front matter, an init directive or JSON.

  4. Step 4

    Apply it

    Or click Open in editor to apply it to your own diagram.

What the main variables do

primaryColor fills most shapes, with primaryTextColor and primaryBorderColor for its text and outline. secondaryColor and tertiaryColor are used for alternates, such as sequence notes, class diagram sections and subgraph backgrounds. lineColor is every connector, and background is what the diagram sits on.

Matching a brand

Pick the primary colour from your brand palette at a light tint, so labels stay readable, and use the darker brand colour for lines and borders. The Monochrome preset is a good start for print and for documents that will be photocopied.

What this does not do

  • Mermaid derives many colours (notes, actors, clusters) from the ones you set; for full control, edit the extra themeVariables by hand.
  • Some diagram types, such as pie and XY charts, have their own colour variables beyond these basics.
  • Platforms that only allow built-in themes ignore themeVariables.

Frequently asked questions

Why does a custom theme use theme: base?

Mermaid's built-in themes (default, neutral, dark, forest) cannot be recoloured. Only the base theme reads themeVariables, so a custom theme is always theme: base plus the variables you set. The generator writes both for you.

Front matter, init directive or JSON?

Put the front matter version at the very top of a diagram; it applies to that diagram only and works on GitHub, GitLab and most Markdown renderers. Use the JSON version as the config in TryMermaid's editor, the Mermaid CLI (-c config.json) or mermaid.initialize() on your own site, to theme every diagram at once.

Will text stay readable?

Text colours are checked against their fill. If the text colour you picked does not reach a 4.5:1 contrast ratio on a fill (the WCAG AA level for normal text), the generator switches that text to near-black or white, whichever reads better.

Does a custom theme work on GitHub?

Yes, mostly: GitHub renders the front matter config, including themeVariables. GitHub forces its own dark-mode handling, so check the result in both light and dark mode.

More Mermaid tools

All tools