CODEWITHSUNDEEP
markdownmermaid
RandomCoder
RandomCoder

Reputation: 7054

Change Mermaid theme in markdown

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 ?

Upvotes: 31

Views: 42989

Answers (7)

FK82
FK82

Reputation: 5075

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

Upvotes: 0

Edouard Thiel
Edouard Thiel

Reputation: 6238

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:

Resulting diagrams

Upvotes: 33

terry0201
terry0201

Reputation: 61

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

Upvotes: 6

Asbjørn Ulsberg
Asbjørn Ulsberg

Reputation: 8820

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.

Upvotes: 0

Michael Weinberger
Michael Weinberger

Reputation: 71

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

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

Upvotes: 5

Bernd
Bernd

Reputation: 41

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

Upvotes: 4

Federico Piazza
Federico Piazza

Reputation: 31045

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

Upvotes: 26

Related Questions