I
Integrated Hamster
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.