Mermaid Directives are not recognized in HTML/Javascript diagram

[obaqueiro]

Hello internet!

I am working on a simple tool allows someone to render a Mermaid diagram in a webpage with minimal HTML/Javasript code.

The JS code is here:

https://github.com/obaqueiro/mermaid-js-auto-renderer/blob/main/mermaid-js-autorenderer.js

const diagram = document.body.innerHTML;
document.body.textContent = "";
const x = document.createElement('pre');
x.classList.add('mermaid');
x.innerHTML= diagram;
x.removeChild(x.getElementsByTagName('script')[0])
document.body.appendChild(x);

const a = document.createElement('script'); a.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.3.0/mermaid.min.js');
document.head.appendChild(a);

Pretty simple. The idea is that opening a file with a content like this in the browser will yield a full diagram:

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
<script src='https://cdn.jsdelivr.net/gh/obaqueiro/mermaid-js-auto-renderer@master/mermaid-js-autorenderer.js'/></script>

(go ahead and try that in an HTML file)

The problem I encounter is that, when I add some %% directive to that text, the whole thing gets ignored by the Mermaid script. For example, this doesn't work (doesn't get rendered into a diagram):

%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
<script src='https://cdn.jsdelivr.net/gh/obaqueiro/mermaid-js-auto-renderer@master/mermaid-js-autorenderer.js'/></script>

I wonder if I am missing some format or am using the library in the wrong way.

Any help is appreciated!

[obaqueiro]

OK so GPT gave me the answer. Apparently directives %% are not parsed by the JS mermaid library but have to be setup using the initialize function.

I make the necessary changes and it works!

https://cdn.jsdelivr.net/gh/obaqueiro/mermaid-js-auto-renderer@main/mermaid-js-autorenderer.js