CortanaROI Brain

Mermaid mindmap theming fragility (v11.4)

2 min read

Mermaid mindmap theming fragility

Mermaid 11.4 mindmap diagrams ignore the standard themeVariables. Setting mainBkg, nodeBorder, primaryColor, cScale0-cScale11, cScaleLabel0-cScaleLabel11 does not change mindmap node fill or label color. The mindmap module has its own render path that derives colors from an internal palette generator.

How this was confirmed

On 2026-05-22 during the CortanaROI brain site Cortana-theme work:

  1. Attempt 1: added cScale0-11 and cScaleLabel0-11 overrides pinned to --lightgray and --dark via Codex. Verified the overrides made it into the deployed postscript.js bundle (curl + grep). Dark mode mindmap still showed white boxes with invisible labels.

  2. Attempt 2: added high-specificity CSS in custom.scss targeting [saved-theme="dark"] .mermaid svg foreignObject, .nodeLabel, .mindmap-node * with !important. Mermaid injects an inline <style> block inside the SVG with hex literals that tied or beat external CSS, and combining both attempts regressed light mode too. Rolled back.

  3. Resolution: replaced the mindmap block with a flowchart LR in content/index.md. Flowcharts DO respect primaryColor, mainBkg, nodeBorder, and primaryTextColor. Both modes work immediately with no further hacks.

Rule

For any Quartz site (or any Mermaid render path with custom themes):

  • Use flowchart LR or graph TD for hierarchy diagrams, not mindmap.
  • Mermaid flowchart honors the standard themeVariables. Mermaid mindmap does not.
  • If a future Mermaid version (11.5+, 12.x) advertises mindmap theme support, re-test before adopting.

Adjacent fragility

  • Mermaid label text inside <foreignObject> is HTML, not SVG, so text { fill } CSS never reaches it. Use color on the HTML selectors when you must override.
  • Mermaid versions pin breaking-API changes in minors (similar to Nautilus). Do not bump Mermaid without testing every diagram on the site.

Reference

  • Mermaid CDN URL pinned in quartz/components/scripts/mermaid.inline.ts: https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.esm.min.mjs.
  • Cortana brain site commit e79e099 documents the swap.

cortanaroi-brain-site

Graph View

Backlinks