Repository: mermaid-js/mermaid
File: packages/mermaid/src/dagre-wrapper/clusters.js (JavaScript)

Code before:
import intersectRect from './intersect/intersect-rect.js';
import { log } from '../logger.js';
import createLabel from './createLabel.js';
import { createText } from '../rendering-util/createText.js';
import { select } from 'd3';
import { getConfig } from '../diagram-api/diagramAPI.js';
import { getEffectiveHtmlLabels } from '../config.js';

import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';

const rect = async (parent, node) => {
  log.info('Creating subgraph rect for ', node.id, node);
  const siteConfig = getConfig();

  // Add outer g element
  const shapeSvg = parent
    .insert('g')
    .attr('class', 'cluster' + (node.class ? ' ' + node.class : ''))
    .attr('id', node.id);

  // add the rect
  const rect = shapeSvg.insert('rect', ':first-child');

  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);

  // Create the label and insert it after the rect
  const label = shapeSvg.insert('g').attr('class', 'cluster-label');

  // const text = label
  //   .node()
  //   .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
  const text =
    node.labelType === 'markdown'
      ? createText(label, node.labelText, { style: node.labelStyle, useHtmlLabels }, siteConfig)
      : label
          .node()
          .appendChild(await createLabel(node.labelText, node.labelStyle, undefined, true));

  // Get the size of the label
  let bbox = text.getBBox();

  if (getEffectiveHtmlLabels(siteConfig)) {
    const div = text.children[0];
    const dv = select(text);
    bbox = div.getBoundingClientRect();
    dv.attr('width', bbox.width);
    dv.attr('height', bbox.height);
  }

Review comment (suggestion):
**issue(potentially-blocking)**: We've removed the `evaluate` call, which makes me a bit nervous.

Previously, setting the value to `"false"` instead of `false` would work. Should we maybe add it back inside the `getEffectiveHtmlLabels` function?

E.g. try out:

```mermaid-example
---
config:
    flowchart:
        htmlLabels: "false"
---
flowchart TD
    A -- <b>Hi</b> --> B
```

```mermaid
---
config:
    flowchart:
        htmlLabels: "false"
---
flowchart TD
    A -- <b>Hi</b> --> B
```



Code after:
import intersectRect from './intersect/intersect-rect.js';
import { log } from '../logger.js';
import createLabel from './createLabel.js';
import { createText } from '../rendering-util/createText.js';
import { select } from 'd3';
import { getConfig } from '../diagram-api/diagramAPI.js';
import { getEffectiveHtmlLabels } from '../config.js';
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';

const rect = async (parent, node) => {
  log.info('Creating subgraph rect for ', node.id, node);
  const siteConfig = getConfig();

  // Add outer g element
  const shapeSvg = parent
    .insert('g')
    .attr('class', 'cluster' + (node.class ? ' ' + node.class : ''))
    .attr('id', node.id);

  // add the rect
  const rect = shapeSvg.insert('rect', ':first-child');

  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);

  // Create the label and insert it after the rect
  const label = shapeSvg.insert('g').attr('class', 'cluster-label');

  // const text = label
  //   .node()
  //   .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
  const text =
    node.labelType === 'markdown'
      ? createText(label, node.labelText, { style: node.labelStyle, useHtmlLabels }, siteConfig)
      : label
          .node()
          .appendChild(await createLabel(node.labelText, node.labelStyle, undefined, true));

  // Get the size of the label
  let bbox = text.getBBox();

  if (getEffectiveHtmlLabels(siteConfig)) {
    const div = text.children[0];
    const dv = select(text);
    bbox = div.getBoundingClientRect();
    dv.attr('width', bbox.width);
    dv.attr('height', bbox.height);
  }