just curious how do I change the theme

[windmaomao]

For instance i want to use forest theme instead of base theme. Thank you.

[KevinGimbel]

It's not possible at the moment because the code only runs mermaid.initialize({startOnLoad:true}) when the page is ready so setting a theme for all graphs doesn't work (or any other option for that matter).

I'll see how I can integrate more options. Alternatively you could add your own initialiser instead of using the mermaid_js shortcode.

 eleventyConfig.addShortcode("custom_mermaid_js", () => {
    let src = options?.mermaid_js_src || "https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs";
    return `<script type="module" async>import mermaid from "${src}";document.addEventListener('DOMContentLoaded', mermaid.initialize({startOnLoad:true, theme:'forest'}));</script>`
  });

or you can configure each graph with an init block like so

%%{init: {'theme':'forest'}}%%
graph TD
A[Public web] -->|HTTP request| B(Firewall)
B --> C{Is port open}
C -->|Yes| D[App]
C -->|No| E[Return error]

this would change the theme for this specific graph.

[KevinGimbel]

@windmaomao I've implemented custom options, you can now pass a mermaid_config object which will be put into the mermaid.initialize function.

const pluginMermaid = require("@kevingimbel/eleventy-plugin-mermaid");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginMermaid, {
// ... other config options
    mermaid_config: {
      'startOnLoad': true,
      'theme': 'dark'
    }
  });
};

You'll need to get the latest version 2.2.0