Mermaid Theme Control / Init Directive Support

Problem

Mermaid diagrams with explicit color styling render incorrectly in Hudu. Subgraph label text is unreadable, and edge label backgrounds are semi-transparent in a way that makes connector text nearly invisible. The diagrams render correctly in other Mermaid environments (e.g. mermaid.live, GitLab).

Current Behavior

Hudu appears to inject its own Mermaid theme (likely 'dark' or a custom variant) that conflicts with user-defined styles. classDef node colors and subgraph styles are partially overridden, and Mermaid's default edgeLabelBackground renders as a semi-transparent box that obscures connector labels.

Additionally, Mermaid's %%{init: ...}%% directive — the standard mechanism for author-level theme control — appears to be stripped or ignored, removing the author's ability to work around this.

Proposed Behavior

• Honor the %%{init: ...}%% directive in Mermaid source, allowing authors to specify theme and themeVariables (e.g. edgeLabelBackground, clusterBkg, font sizes)

• If a platform-level theme is applied, it should not override explicit classDef or style declarations in the diagram source

• Alternatively, expose a per-article or platform-wide setting to select the Mermaid render theme (default, base, neutral, dark)

Why This Matters

Complex diagrams — network maps, ticket workflows, runbooks — require precise color coding to be useful. If Hudu's theme silently overrides author styles, those diagrams become unreliable and potentially misleading. The %%{init}%% directive is the Mermaid-standard solution for this and is supported by most major integrations.

Suggested Implementation Reference

Mermaid's official docs cover init directives: https://mermaid.js.org/config/directives.html. GitLab and Notion both pass these through without stripping.