initialize of theme arguments works in version < 10, but not after

[fralau]

Description

In version 10, the following sequence does not alter the theme:

<script type="module">import mermaid from "https://unpkg.com/mermaid@10.2.0/dist/mermaid.esm.min.mjs"</script>
<script>mermaidAPI.initialize({
    theme: "base",
    themeVariables: {
        primaryColor: "#BB2528",
        primaryTextColor: "#fff",
        primaryBorderColor: "#7C0000",
        lineColor: "#F8B229",
        secondaryColor: "#006100",
        tertiaryColor: "#fff"
    }
});</script>

(Does not work with mermaid.initialize() either).

But works in version 9 (colors are properly changed):

<script src="[https://unpkg.com/mermaid@9.2.0/dist/mermaid.min.js](view-source:https://unpkg.com/mermaid@9.2.0/dist/mermaid.min.js)"></script><script>mermaid.initialize({
    theme: "base",
    themeVariables: {
        primaryColor: "#BB2528",
        primaryTextColor: "#fff",
        primaryBorderColor: "#7C0000",
        lineColor: "#F8B229",
        secondaryColor: "#006100",
        tertiaryColor: "#fff"
    }
});</script>

Steps to reproduce

Try a diagram in version 9 and 10.

Screenshots

Version 9:

Version 10:

Code Sample

Use with e.g. this diagram:

 graph LR
    hello --> world
    world --> again
    again --> hello

graph LR
    hello --> world
    world --> again
    again --> hello

<div class="mermaid">graph LR
    hello --&gt; world
    world --&gt; again
    again --&gt; hello
</div>

Setup

• Mermaid version: 9.2.0 and 10.2.0
• Browser and Version: Firefox, Safari (Mac)

Suggested Solutions

No response

Additional Context

No response

[sidharthv96]

Please use mermaid.initialize, not mermiadAPI.initialize.

mermaid.initialize({
        theme: 'base',
        themeVariables: {
          primaryColor: '#BB2528',
          primaryTextColor: '#fff',
          primaryBorderColor: '#7C0000',
          lineColor: '#F8B229',
          secondaryColor: '#006100',
          tertiaryColor: '#fff',
        }
      });

[fralau]

As indicated, I did use mermaid.initialize() and it did not work.

[sidharthv96]

That was because you were using 2 separate script tags.

<script type="module">import mermaid from "https://unpkg.com/mermaid@10.2.0/dist/mermaid.esm.min.mjs"</script>
<script>mermaidAPI.initialize({

Removing the second script tag fixes the issue.

<div class="mermaid">
  graph LR
    hello --> world
    world --> again
    again --> hello
</div>

<script type="module">
import mermaid from "https://unpkg.com/mermaid@10.2.0/dist/mermaid.esm.min.mjs";
mermaid.initialize({
    theme: "base",
    themeVariables: {
        primaryColor: "#BB2528",
        primaryTextColor: "#fff",
        primaryBorderColor: "#7C0000",
        lineColor: "#F8B229",
        secondaryColor: "#006100",
        tertiaryColor: "#fff"
    }
});
</script>

[sidharthv96]

Please close this if it was resolved.

[fralau]

Interesting! Let me check.

[fralau]

This worked, thanks! mkdocs-mermaid2 was fixed and it worked.

See fralau/mkdocs-mermaid2-plugin#82

🚀