Using themes and styles in mermaid diagram

[AbdulSayyed]

Mermaid module works as intended, but does not render if themes and styles are used. Could you tell me what needs to be used in a mermaid diagram?
For example, the following mermaid diagram is rendered on the Mermaid server but not when using the Mermaid module in the HbStack framework:
%%{ init: { "theme": "base", "themeVariables": {
"primaryColor": "#fdf6e3",
"edgeLabelBackground": "#ffffff",
"nodeBorder": "#586e75",
"nodeTextColor": "#073642",
"mainBkg": "#eee8d5"
}} }%%
graph TD
HTML["html"]:::root --> HEAD["head"]:::head
HTML --> BODY["body"]:::body

HEAD --> TITLE["title"]:::head
HEAD --> META["meta"]:::head

BODY --> HEADER["header"]:::section
BODY --> MAIN["main"]:::section
BODY --> FOOTER["footer"]:::section

HEADER --> H1["h1"]:::text
MAIN --> SECTION["section"]:::section
SECTION --> ARTICLE["article"]:::section
ARTICLE --> H2["h2"]:::text
ARTICLE --> P["p"]:::text
FOOTER --> P2["p"]:::text

classDef root fill:#b58900,stroke:#586e75,color:#fff;
classDef head fill:#268bd2,stroke:#586e75,color:#fff;
classDef body fill:#2aa198,stroke:#586e75,color:#fff;
classDef section fill:#6c71c4,stroke:#586e75,color:#fff;
classDef text fill:#dc322f,stroke:#586e75,color:#fff;

[razonyang]

Remove the following code should work, seems configuration, but not recognisable for some reason.

%%{ init: { "theme": "base", "themeVariables": {
"primaryColor": "#fdf6e3",
"edgeLabelBackground": "#ffffff",
"nodeBorder": "#586e75",
"nodeTextColor": "#073642",
"mainBkg": "#eee8d5"
}} }%%

I don't see difference without those code.

[razonyang]

BTW, you can wrap the code with Markdown on GitHub.

````markdown
```mermaid
...
```
````

[AbdulSayyed]

Thanks it is working without the upper block