Change Mermaid theme in markdown

Question

I use mermaid for basic diagram rendering within my markdown documentation aside my code. I found this online editor useful to edit this while having a preview. This proposes to change theme (default and forest works).

How can I set theme when I copy paste this into my markdown document ?

Answer 1

I was looking for the same as you, so after taking a look and digging in Mermaid source code could find these code snippet:

for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
  themes[themeName] = require(`./themes/${themeName}/index.scss`)
}

So, after testing in their editor, these themes are working fine:

• default
• forest
• dark
• neutral

You can find their themes here in case you want to build your custom themes: https://github.com/knsv/mermaid/tree/master/src/themes

If you go to Mermaid online editor, you can change the theme to those mentioned above: