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 ?

Federico Piazza · Answer 1 · 2019-06-19T14:17:44.323

25

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:

edited Jun 19 '19 at 14:17

answered Sep 19 '18 at 15:10

Federico Piazza

30,085
15
87
123

2

Not exactly an answer to the question asked still thx for the digging. – phifi Jun 19 '19 at 13:55
This was the answer for the question I googled "mermaid js themes" Thank you. – Jessy Jan 27 '20 at 18:11

score 24 · Answer 2 · answered Apr 17 '21 at 10:24

24

It is possible to change the theme in the Markdown document with a directive for each figure.

Here is an example (tested with Material for Mkdocs):

This graph uses the forest theme:

``` mermaid
%%{init: {'theme': 'forest', "flowchart" : { "curve" : "basis" } } }%%
graph LR
A[Foo] --> B[Bar]
B --> A
```

That one uses the neutral theme:

``` mermaid
%%{init: {'theme': 'neutral' } }%%
graph LR
A[Foo] --> B[Bar]
B --> C[Baz]
```

The result will be:

answered Apr 17 '21 at 10:24

Edouard Thiel

5,878
25
33

That's nice. Is there a way to modify it for all diagrams at once? – Eric Duminil May 10 '21 at 14:05
yes but in `mkdocs.yml`, see other posts. You may also set a jinja variable and inject it in the mermaid snippet. – Edouard Thiel May 10 '21 at 15:44
Thanks for the answer. Do you know how the mkdocs parameters would look like? Sorry, I didn't find any info yet. The other posts seem to refer to older mermaid versions. – Eric Duminil May 10 '21 at 15:59
Like this: replace `- mermaid2` with `- mermaid2:\n arguments:\n theme: 'forest'\n flowchart: { curve: 'basis' }` (also keep the indentation and replace each `\n` with a carriage return. – Edouard Thiel May 11 '21 at 15:54
unfortunately, this doesn't work in azure devops, which is where i am using markdown – Andrew Pye Aug 24 '21 at 18:27
This also work in QOwnNotes – Steak Overflow Oct 14 '22 at 08:29

score 5 · Answer 3 · edited Nov 19 '19 at 19:21

5

The theme is embedded when rendering SVG and it seems currently there is no support for custom theme setting when using markdown.

edited Nov 19 '19 at 19:21

Dave Jarvis

30,436
41
178
315

answered Sep 17 '18 at 04:19

terry0201

51
1
3

3

Sadly this seems to be the case, the default Theme is the ugliest of all available themes. – phifi Jun 19 '19 at 13:54
1

@phifi: See my comment under https://stackoverflow.com/a/57274389/6419007 I use the last mermaid version with Markdown and can choose the theme ('neutral' fits well with the rest of our MkDocs material doc) – Eric Duminil Jul 14 '20 at 12:22

score 5 · Answer 4 · answered Sep 23 '19 at 15:56

5

As far as I know, your only chance to set the theme is on initialization:

 mermaid.initialize({
      theme: 'forest',
      logLevel: 1,
      flowchart: { curve: 'linear' },
    });

answered Sep 23 '19 at 15:56

Michael Weinberger

61
1
2

score 3 · Answer 5 · answered Jul 30 '19 at 14:45

Don't know what you use to produce output from your Markdown -- I use MkDocs with Material, and added Mermaid support like explained here.

After some trial-and-error configurations I found out that using Cloudflare's CDN, you can include an older version of MermaidJS with another CSS. This way, I was able to render the diagram using the neutral style:

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_div_format

extra_css:
  - https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.9/mermaid.neutral.css
extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.9/mermaid.min.js

I ended up downloading the last version (https://unpkg.com/mermaid@8.4.3/dist/mermaid.min.js), looked for `theme:"default"`, replaced it with `theme:"forest"` and saved the js locally, e.g. to `js/mermaid.min.js`. It worked fine and I can use the last version. — Eric Duminil, Dec 06 '19 at 23:20

score 0 · Answer 6 · answered Sep 26 '19 at 23:55

If you copy the stylesheet detailed in the documentation, modify it and add !important after every CSS property you change, it will take precedence over the inline styles Mermaid copies into the SVG. Far from ideal, but neither is the copying of styles Mermaid does, so this is a "fighting fire with fire" solution.

score 0 · Answer 7 · answered Jan 06 '22 at 18:32

You didn't say what your tool chain or targeted output format is.

That being said, you can use Pandoc with mermaid-filter to export a Markdown file containing a Mermaid chart to a couple of formats.

Plus, with mermaid-filter you can select the theme using the fenced code block's key-value attributes options

E.g. let /tmp/example.md contain the following

```{.mermaid theme=forest}
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```

then

pandoc --filter mermaid-filter --from markdown --to html /tmp/example.md > /tmp/example.html

will produce the an HTML page /tmp/example.html that looks as follows

example mermaid chart

Change Mermaid theme in markdown

7 Answers7

Linked