Mermaid 怎么应用 CSS 样式

Mermaid 官方语法支持 CSS 样式么，也不行吗？😢

搬运工

Yes, you can use CSS to modify Mermaid graphics, but with important limitations due to how Mermaid renders diagrams using shadow DOM.

Key Points on Using CSS with Mermaid

1. Shadow DOM Limits Direct CSS Overrides

Mermaid encapsulates its diagrams in shadow DOM to prevent ID conflicts and ensure consistent rendering. This means standard CSS rules often won't apply directly unless you use specific techniques or workarounds.

🔴 According to the MkDocs Material maintainers:
"Unfortunately, you cannot override Mermaid's CSS with additional CSS... because Mermaid.js diagrams must be encapsulated in shadow DOMs."
— GitHub Discussion #4582

2. Workarounds and Alternatives

✅ Use themeVariables or themeCSS

Instead of trying to override styles externally, define custom styles during Mermaid initialization:

mermaid.initialize({
  theme: 'forest',
  themeVariables: {
    primaryColor: '#FF5733',
    lineColor: '#333',
    fontSize: '16px',
    nodeBorder: '2px solid #000'
  }
});

You can also inject global themeCSS for deeper control.

✅ Use !important in CSS

When injecting styles (e.g., in Obsidian or Zettlr), use !important to override Mermaid’s internal styles:

.mermaid svg .node rect {
  fill: magenta !important;
  stroke: green !important;
}

.mermaid svg .cluster rect {
  fill: pink !important;
}

💡 Tip: Inspect the rendered SVG using browser DevTools to find correct selectors.

✅ Define CSS Classes in Markdown

You can define reusable CSS classes and apply them in diagrams:

.class green-styled {
  fill: #D5E8D4 !important;
  stroke: #82B366 !important;
  color: #000 !important;
}

Then use it in Mermaid:

3. Platform-Specific Tips

• Obsidian: Custom CSS can be added via the appearance settings. Use .mermaid selectors with !important.
• Zettlr: Modify the theme CSS directly (e.g., body #editor .CodeMirror .mermaid-chart).
• Docusaurus/MkDocs: You may need to swizzle components or rebuild the theme to inject custom Mermaid config.