Add support for mermaidOptions in mermaid.render

[Shashank Agarwal]

Proposal

Many thanks for creating, and maintaining this library.

I want to use themes with for my charts which Mermaid supports.
However, correct me if I am wrong, here are my options.

1. Set a global theme with mermaid.initialize
2. Add a configuration object for each diagram that needs to have a different theme.

The problem:

1. I do not want to update the global theme if I have to change only a few charts that'll be rendered.
2. In my use case, I have a server-generated markdown which is parsed using remark and piped through rehype before finally being processed by mermaid, a very common use I have come across after looking at the code samples. Updating the configuration for each chart generated by a remote server is not feasible as the UI alone knows about the users colour scheme.

Suggestion:
It would be incredibly convenient if mermaid.render accepted an optional mermaid configuration which overwrites configuration specifically for this diagram. I have no use case for other options in mind other than updating theme, but this will make it super flexible.

Example

In this issue on for the package rehype-mermaid, @remcohaszing highlights his inability to update chart specific configuration. remcohaszing/rehype-mermaid#13

My thoughts of the updated syntax:

1. Already supported: mermaid.render(id, diagram)
2. Already supported: mermaid.render(id, diagram, element)
3. Suggestion:

mermaid.render(id, diagram, {
    element,
    ...mermaidOptions
})

Screenshots

No response

[Sidharth Vinod]

This is an issue we've identified a while back. But due to the internal implementation of how configs are handled, it's not possible for mermaid to apply a config for a single diagram.

We are making efforts to fix this, but as it'll require some major changes, it's been slow.

In the current situation, adding the mermaidOptions to the render function can't be handled by anything more than doing a mermaid.initialize call inside the render function, as there is no diagram specific config available.

There's 275 calls to getConfig, which always returns the global config.
All these would have to be modified, while passing down the config/db to each function that calls it.

---

One potential workaround is to add a function to get a site's config, enabling us to do something like this.
But that's one hacky workraound.

const config = mermaid.getConfig();
mermaid.initialize(someOtherConfig);
await mermaid.render();
mermaid.initialize(config);