Change Mermaid theme in markdown

markdown mermaid
RandomCoder picture RandomCoder · Mar 28, 2018 · Viewed 15.7k times · Source

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

Federico Piazza picture Federico Piazza · Sep 19, 2018

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:

enter image description here

Related questions

How to install Mermaid to render flowcharts in markdown?

I'm trying to render a flowchart in a markdown file using Mermaid. I have a ReadMe.md file in my GitHub repository, and I'd like to include a basic flowchart to help describe the contents. But I can't figure out …

Read More
Mermaid - How to connect subgraphs in markdown?

I'm using mermaid in markdown.I can't figure out how to connect subgraphs. Given the program below, I need to be able to connect one and two with an arrow. - ```mermaid graph LR; subgraph one main---MainMenu MainMenu((MainMenu))---Game …

Read More
How to add images to README.md on GitHub?

Recently I joined GitHub. I hosted some projects there. I need to include some images in my README File. I don't know how to do that. I searched about this, but all I got was some links which tell me …

Read More