<!--
title: Config-driven theming
domain: devtools
topic: Configurations
language: JavaScript
source: mermaid-js/mermaid
updated: 2026-01-15
url: https://awesomereviewers.com/reviewers/mermaid-config-driven-theming/
-->

When rendering/layout is affected by configuration or theming, avoid magic numbers and ad-hoc config handling. Instead:

- Use a centralized “effective config” helper for all config-derived decisions, including correct type coercion (e.g., treat `"false"` the same as `false`).
- Derive theme-/appearance-sensitive values from `themeVariables` (or CSS vars like `--mermaid-font-family`) rather than hard-coding constants that break with different fonts/sizes.
- Apply theming values consistently across SVG/CSS/labels so users can rely on a single source of truth.
- If changing defaults would cause visual regressions, preserve existing behavior in the default path and gate improvements behind theme/config changes.

Example pattern:
```js
// config.js
export function getEffectiveFlowchartHtmlLabels(siteConfig) {
  // Correctly coerce string booleans
  const v = siteConfig?.flowchart?.htmlLabels;
  return v === true || v === 'true';
}
```
And for theme-derived styling:
```js
// instead of spacing = 60; or font-family: ${options.fontFamily};
const spacing = themeVariables?.noteSpacing ?? 60; // or derive from other theme vars
const fontFamily = 'var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif';
```