Configurable HTML class for initialisation

[PMunch]

Is your feature request related to a problem? Please describe.
I have a Markdown parser which generates HTML. I've added loading of Mermaid in the header and set it up to initialise on load. However the HTML my Markdown parser outputs appends language- to the tags for code blocks. So when I do:

```mermaid
some diagram
```

The output is:

<div class="language-mermaid">
some diagram
</div>

This prevents Mermaid from turning the blocks into SVGs

Describe the solution you'd like
A configuration option to select which class Mermaid will consider Mermaid diagrams and turn into graphs.

Describe alternatives you've considered
Modifying the Markdown parser to not add the language- prefix does work, but simply having a configuration option in Mermaid would be a much more flexible option.

[secure-77]

This is possible by calling the init method:

mermaid.init(undefined,document.querySelectorAll(".language-mermaid"));

but this method is marked as deprecated, there should be a way via the mermaidAPI:

<script>
    mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var
element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){
    element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph =
mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); });
</script>

but Iam also looking for a simple example how to only change the target class without adjusting anything else like graphDefinition etc.

[knsv]

We should do it!

[sidharthv96]

@PMunch, calling mermaid.init({}, ".language-mermaid"); would be the easiest solution here.
init is what is already used to automatically render all .mermaid diagrams in a page.

The difference between init, initThrowsErrors and initialize is:

• init: Renders all matching nodes/selectors in the page with provided config. Will not throw error on failure.
• initThrowsErrors: init without the try-catch to suppress errors.
• initialize: Initializes mermaid with the provided config. You have to call mermaid.render separately to actually render each diagram.

I'm not sure why init is marked as deprecated, maybe @knsv can pitch in and "un-deprecate" it if possible. It's just a nifty little wrapper around a rendering loop.

[knsv]

The idea was to replace the init function with a run function. This to keep the addition of config and starting the execution apart. This as you sometimes want to separate the to, as in when you want to trigger the rendering manually.

[axolo]

<script>document.querySelectorAll('.language-mermaid').forEach(s => s.classList.add("mermaid"))</script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad:true })</script>

[frafra]

How this problem has been fixed by version 10?

[sidharthv96]

https://mermaid.js.org/config/usage.html#using-mermaid-run