fix: icon and text color mismatch for root node

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

cypress/platform/e2e.html

@@ -6,6 +6,14 @@
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
     <style>
       svg:not(svg svg) {
         border: 2px solid darkred;

docs/config/setup/mermaid/interfaces/LayoutData.md

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L168)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L169)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L172)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.co
 
 > **edges**: `Edge`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.co
 
 > **nodes**: `Node`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L169)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)

packages/mermaid/src/diagrams/mindmap/mindmapIconHelper.ts

@@ -0,0 +1,223 @@
+import { log } from '../../logger.js';
+import type { D3Selection } from '../../types.js';
+import type { Node } from '../../rendering-util/types.js';
+import { getIconSVG, isIconAvailable } from '../../rendering-util/icons.js';
+
+export interface MindmapIconConfig {
+  iconSize: number;
+  iconPadding: number;
+  shapeType: 'circle' | 'rect' | 'rounded' | 'bang' | 'cloud' | 'hexagon' | 'default';
+}
+
+export interface MindmapDimensions {
+  width: number;
+  height: number;
+  labelOffset: { x: number; y: number };
+}
+
+/**
+ * Get icon configuration for different mindmap shape types
+ */
+export function getMindmapIconConfig(shapeType: string): MindmapIconConfig {
+  const baseConfig = {
+    iconSize: 30,
+    iconPadding: 15,
+    shapeType: shapeType as MindmapIconConfig['shapeType'],
+  };
+
+  switch (shapeType) {
+    case 'bang':
+      return { ...baseConfig, iconPadding: 1 };
+    case 'rect':
+    case 'default':
+      return { ...baseConfig, iconPadding: 10 };
+    default:
+      return baseConfig;
+  }
+}
+
+/**
+ * Calculate dimensions and label positioning for mindmap nodes with icons
+ */
+export function calculateMindmapDimensions(
+  node: Node,
+  bbox: any,
+  baseWidth: number,
+  baseHeight: number,
+  basePadding: number,
+  config: MindmapIconConfig
+): MindmapDimensions {
+  const hasIcon = Boolean(node.icon);
+
+  if (!hasIcon) {
+    return {
+      width: baseWidth,
+      height: baseHeight,
+      labelOffset: { x: -bbox.width / 2, y: -bbox.height / 2 },
+    };
+  }
+
+  const { iconSize, iconPadding, shapeType } = config;
+  let width = baseWidth;
+  let height = baseHeight;
+  let labelXOffset = -bbox.width / 2;
+  const labelYOffset = -bbox.height / 2;
+
+  switch (shapeType) {
+    case 'circle': {
+      const totalWidthNeeded = bbox.width + iconSize + iconPadding * 2;
+      const minRadiusWithIcon = totalWidthNeeded / 2 + basePadding;
+      const radius = Math.max(baseWidth / 2, minRadiusWithIcon);
+      width = radius * 2;
+      height = radius * 2;
+      labelXOffset = -radius + iconSize + iconPadding;
+      break;
+    }
+
+    case 'rect':
+    case 'rounded':
+    case 'default': {
+      const minWidthWithIcon = bbox.width + iconSize + iconPadding * 2 + basePadding * 2;
+      width = Math.max(baseWidth, minWidthWithIcon);
+      height = Math.max(baseHeight, iconSize + basePadding * 2);
+
+      const availableTextSpace = width - iconSize - iconPadding * 2;
+      labelXOffset = -width / 2 + iconSize + iconPadding + availableTextSpace / 2 - bbox.width / 2;
+      break;
+    }
+
+    case 'bang':
+    case 'cloud': {
+      const minWidthWithIcon = bbox.width + iconSize + iconPadding * 2 + basePadding;
+      width = Math.max(baseWidth, minWidthWithIcon);
+      height = Math.max(baseHeight, iconSize + basePadding);
+
+      const availableTextSpace = width - iconSize - iconPadding * 2;
+      labelXOffset = -width / 2 + iconSize + iconPadding + availableTextSpace / 2 - bbox.width / 2;
+      break;
+    }
+
+    default: {
+      const minWidthWithIcon = bbox.width + iconSize + iconPadding * 2 + basePadding * 2;
+      width = Math.max(baseWidth, minWidthWithIcon);
+      height = Math.max(baseHeight, iconSize + basePadding * 2);
+
+      const availableTextSpace = width - iconSize - iconPadding * 2;
+      labelXOffset = -width / 2 + iconSize + iconPadding + availableTextSpace / 2 - bbox.width / 2;
+      break;
+    }
+  }
+
+  return {
+    width,
+    height,
+    labelOffset: { x: labelXOffset, y: labelYOffset },
+  };
+}
+
+/**
+ * Insert mindmap icon into the shape SVG element
+ */
+export async function insertMindmapIcon(
+  parentElement: D3Selection<SVGGraphicsElement>,
+  node: Node,
+  config: MindmapIconConfig
+): Promise<void> {
+  if (!node.icon) {
+    return;
+  }
+
+  const { iconSize, iconPadding, shapeType } = config;
+  const section = node.section === undefined ? -1 : node.section;
+
+  let iconName = node.icon;
+  const isCssFormat = iconName.includes(' ');
+
+  if (isCssFormat) {
+    iconName = iconName.replace(' ', ':');
+  }
+
+  try {
+    if (await isIconAvailable(iconName)) {
+      const iconSvg = await getIconSVG(
+        iconName,
+        {
+          height: iconSize,
+          width: iconSize,
+        },
+        { class: 'label-icon' }
+      );
+
+      const iconElem = parentElement.append('g');
+      iconElem.html(`<g>${iconSvg}</g>`);
+
+      let iconX = 0;
+      let iconY = 0;
+
+      switch (shapeType) {
+        case 'circle': {
+          const nodeWidth = node.width || 100;
+          const radius = nodeWidth / 2;
+          iconX = -radius + iconSize / 2 + iconPadding;
+          iconY = 0;
+          break;
+        }
+        default: {
+          const nodeWidth = node.width || 100;
+          iconX = -nodeWidth / 2 + iconSize / 2 + iconPadding;
+          iconY = 0;
+          break;
+        }
+      }
+
+      iconElem.attr('transform', `translate(${iconX}, ${iconY})`);
+      // Use currentColor to inherit label color - works for all shapes including bang
+      iconElem.attr('style', 'color: currentColor;');
+      return;
+    }
+  } catch (error) {
+    log.debug('SVG icon rendering failed, falling back to CSS:', error);
+  }
+
+  // Fallback to CSS approach (original mindmap behavior)
+  const iconClass = isCssFormat ? node.icon : node.icon.replace(':', ' ');
+
+  let iconX = 0;
+  const iconY = -iconSize / 2;
+
+  switch (shapeType) {
+    case 'circle': {
+      const nodeWidth = node.width || 100;
+      const radius = nodeWidth / 2;
+      iconX = -radius + iconPadding;
+      break;
+    }
+    default: {
+      const nodeWidth = node.width || 100;
+      iconX = -nodeWidth / 2;
+      break;
+    }
+  }
+
+  const icon = parentElement
+    .append('foreignObject')
+    .attr('height', `${iconSize}px`)
+    .attr('width', `${iconSize}px`)
+    .attr('x', iconX)
+    .attr('y', iconY)
+    .attr(
+      'style',
+      'text-align: center; display: flex; align-items: center; justify-content: center;'
+    );
+
+  icon
+    .append('div')
+    .attr('class', 'icon-container')
+    .attr(
+      'style',
+      'width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;'
+    )
+    .append('i')
+    .attr('class', `node-icon-${section} ${iconClass}`)
+    .attr('style', `font-size: ${iconSize}px;`);
+}

packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts

@@ -7,6 +7,7 @@ import type { LayoutData } from '../../rendering-util/types.js';
 import type { FilledMindMapNode } from './mindmapTypes.js';
 import defaultConfig from '../../defaultConfig.js';
 import type { MindmapDB } from './mindmapDb.js';
+import { getMindmapIconConfig, insertMindmapIcon } from './mindmapIconHelper.js';
 
 /**
  * Update the layout data with actual node dimensions after drawing
@@ -71,6 +72,28 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
 
   // Use the unified rendering system
   await render(data4Layout, svg);
+  const genericShapes = ['hexagon', 'rect', 'rounded', 'squareRect'];
+  const nodesWithIcons = data4Layout.nodes.filter(
+    (node) => node.icon && genericShapes.includes(node.shape || '')
+  );
+
+  if (nodesWithIcons.length > 0) {
+    for (const node of nodesWithIcons) {
+      const nodeId = node.domId || node.id;
+      const nodeElement = svg.select(`g[id="${nodeId}"]`);
+
+      if (!nodeElement.empty()) {
+        try {
+          const iconConfig = getMindmapIconConfig(node.shape || 'default');
+          await insertMindmapIcon(nodeElement, node, iconConfig);
+        } catch (error) {
+          log.warn(`Failed to add icon to ${nodeId}:`, error);
+        }
+      } else {
+        log.warn(`Could not find DOM element for node ${nodeId}`);
+      }
+    }
+  }
 
   // Setup the view box and size of the svg element using config from data4Layout
   setupViewPortForSVG(

packages/mermaid/src/diagrams/mindmap/styles.ts

@@ -67,6 +67,9 @@ const getStyles: DiagramStylesProvider = (options) =>
   .section-root span {
     color: ${options.gitBranchLabel0};
   }
+  .node-icon--1 {
+    color: ${options.gitBranchLabel0};
+  }
   .section-2 span {
     color: ${options.gitBranchLabel0};
   }

packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts

@@ -7,6 +7,11 @@ import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
 import type { Bounds, Point } from '../../../types.js';
+import {
+  calculateMindmapDimensions,
+  getMindmapIconConfig,
+  insertMindmapIcon,
+} from '../../../diagrams/mindmap/mindmapIconHelper.js';
 
 export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -17,20 +22,34 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
     getNodeClasses(node)
   );
 
-  const w = bbox.width + 10 * halfPadding;
-  const h = bbox.height + 8 * halfPadding;
-  const r = 0.15 * w;
-  const { cssStyles } = node;
+  const baseWidth = bbox.width + 10 * halfPadding;
+  const baseHeight = bbox.height + 8 * halfPadding;
+
+  const iconConfig = getMindmapIconConfig('bang');
+  const dimensions = calculateMindmapDimensions(
+    node,
+    bbox,
+    baseWidth,
+    baseHeight,
+    halfPadding,
+    iconConfig
+  );
+
+  const w = dimensions.width;
+  const h = dimensions.height;
+
+  node.width = w;
+  node.height = h;
 
   const minWidth = bbox.width + 20;
   const minHeight = bbox.height + 20;
   const effectiveWidth = Math.max(w, minWidth);
   const effectiveHeight = Math.max(h, minHeight);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
+  label.attr('transform', `translate(${dimensions.labelOffset.x}, ${dimensions.labelOffset.y})`);
 
-  let bangElem;
-  const path = `M0 0 
+  const r = 0.15 * effectiveWidth;
+  const path = `M0 0
     a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${-1 * effectiveHeight * 0.1}
     a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${0}
     a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${0}
@@ -50,13 +69,16 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
     a${r},${r} 1 0,0 ${effectiveWidth * 0.1},${-1 * effectiveHeight * 0.33}
   H0 V0 Z`;
 
+  let bangElem;
   if (node.look === 'handDrawn') {
     // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const roughNode = rc.path(path, options);
     bangElem = shapeSvg.insert(() => roughNode, ':first-child');
-    bangElem.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
+    bangElem
+      .attr('class', 'basic label-container')
+      .attr('style', handleUndefinedAttr(node.cssStyles));
   } else {
     bangElem = shapeSvg
       .insert('path', ':first-child')
@@ -68,6 +90,10 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
   // Translate the path (center the shape)
   bangElem.attr('transform', `translate(${-effectiveWidth / 2}, ${-effectiveHeight / 2})`);
 
+  if (node.icon) {
+    await insertMindmapIcon(shapeSvg, node, iconConfig);
+  }
+
   updateNodeBounds(node, bangElem);
   node.calcIntersect = function (bounds: Bounds, point: Point) {
     return intersect.rect(bounds, point);

packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts

@@ -14,9 +14,25 @@ export async function circle<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
+    parent,
+    node,
+    getNodeClasses(node)
+  );
+
   const padding = options?.padding ?? halfPadding;
+
   const radius = bbox.width / 2 + padding;
+
+  node.width = radius * 2;
+  node.height = radius * 2;
+
+  const labelXOffset = -bbox.width / 2;
+  const labelYOffset = -bbox.height / 2;
+  if (node.icon) {
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
+  }
   let circleElem;
   const { cssStyles } = node;
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/cloud.ts

@@ -6,6 +6,11 @@ import type { Node } from '../../types.js';
 import intersect from '../intersect/index.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import {
+  getMindmapIconConfig,
+  calculateMindmapDimensions,
+  insertMindmapIcon,
+} from '../../../diagrams/mindmap/mindmapIconHelper.js';
 
 export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -17,8 +22,26 @@ export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>
     getNodeClasses(node)
   );
 
-  const w = bbox.width + 2 * halfPadding;
-  const h = bbox.height + 2 * halfPadding;
+  const baseWidth = bbox.width + 2 * halfPadding;
+  const baseHeight = bbox.height + 2 * halfPadding;
+
+  const iconConfig = getMindmapIconConfig('cloud');
+  const dimensions = calculateMindmapDimensions(
+    node,
+    bbox,
+    baseWidth,
+    baseHeight,
+    halfPadding,
+    iconConfig
+  );
+
+  const w = dimensions.width;
+  const h = dimensions.height;
+
+  node.width = w;
+  node.height = h;
+
+  label.attr('transform', `translate(${dimensions.labelOffset.x}, ${dimensions.labelOffset.y})`);
 
   // Cloud radii
   const r1 = 0.15 * w;
@@ -61,11 +84,13 @@ export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>
       .attr('d', path);
   }
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
-
   // Center the shape
   cloudElem.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
 
+  if (node.icon) {
+    await insertMindmapIcon(shapeSvg, node, iconConfig);
+  }
+
   updateNodeBounds(node, cloudElem);
 
   node.calcIntersect = function (bounds: Bounds, point: Point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/defaultMindmapNode.ts

@@ -3,6 +3,11 @@ import type { Node } from '../../types.js';
 import intersect from '../intersect/index.js';
 import { styles2String } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import {
+  getMindmapIconConfig,
+  calculateMindmapDimensions,
+  insertMindmapIcon,
+} from '../../../diagrams/mindmap/mindmapIconHelper.js';
 
 export async function defaultMindmapNode<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -17,22 +22,38 @@ export async function defaultMindmapNode<T extends SVGGraphicsElement>(
     getNodeClasses(node)
   );
 
-  const w = bbox.width + 8 * halfPadding;
-  const h = bbox.height + 2 * halfPadding;
-  const rd = 5;
+  const baseWidth = bbox.width + 8 * halfPadding;
+  const baseHeight = bbox.height + 2 * halfPadding;
 
-  const rectPath = `
-    M${-w / 2} ${h / 2 - rd}
-    v${-h + 2 * rd}
-    q0,-${rd} ${rd},-${rd}
-    h${w - 2 * rd}
-    q${rd},0 ${rd},${rd}
-    v${h - 2 * rd}
-    q0,${rd} -${rd},${rd}
-    h${-w + 2 * rd}
-    q-${rd},0 -${rd},-${rd}
-    Z
-  `;
+  const iconConfig = getMindmapIconConfig('default');
+  const dimensions = calculateMindmapDimensions(
+    node,
+    bbox,
+    baseWidth,
+    baseHeight,
+    halfPadding,
+    iconConfig
+  );
+
+  const w = dimensions.width;
+  const h = dimensions.height;
+
+  node.width = w;
+  node.height = h;
+
+  label.attr('transform', `translate(${dimensions.labelOffset.x}, ${dimensions.labelOffset.y})`);
+
+  const RD = 5;
+  const rectPath = `M${-w / 2} ${h / 2 - RD} 
+    v${-h + 2 * RD} 
+    q0,-${RD} ${RD},-${RD} 
+    h${w - 2 * RD} 
+    q${RD},0 ${RD},${RD} 
+    v${h - 2 * RD} 
+    q0,${RD} -${RD},${RD} 
+    h${-w + 2 * RD} 
+    q-${RD},0 -${RD},-${RD} 
+    Z`;
 
   const bg = shapeSvg
     .append('path')
@@ -49,9 +70,12 @@ export async function defaultMindmapNode<T extends SVGGraphicsElement>(
     .attr('x2', w / 2)
     .attr('y2', h / 2);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
   shapeSvg.append(() => label.node());
 
+  if (node.icon) {
+    await insertMindmapIcon(shapeSvg, node, iconConfig);
+  }
+
   updateNodeBounds(node, bg);
   node.calcIntersect = function (bounds: Bounds, point: Point) {
     return intersect.rect(bounds, point);

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -15,11 +15,21 @@ export async function drawRect<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  // console.log('IPI labelStyles:', labelStyles);
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
   const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0);
   const totalHeight = Math.max(bbox.height + options.labelPaddingY * 2, node?.height || 0);
+
+  node.width = totalWidth;
+  node.height = totalHeight;
+
+  const labelXOffset = -bbox.width / 2;
+
+  const labelYOffset = -bbox.height / 2;
+  if (node.icon) {
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
+  }
   const x = -totalWidth / 2;
   const y = -totalHeight / 2;
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts

@@ -26,10 +26,22 @@ export const createHexagonPathD = (
 export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
   const h = bbox.height + (node.padding ?? 0);
   const w = bbox.width + (node.padding ?? 0) * 2.5;
+
+  node.width = w;
+  node.height = h;
+
+  const labelXOffset = -bbox.width / 2;
+
+  const labelYOffset = -bbox.height / 2;
+
+  if (node.icon) {
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
+  }
   const { cssStyles } = node;
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
@@ -74,9 +86,6 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
     polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
-  node.width = w;
-  node.height = h;
-
   updateNodeBounds(node, polygon);
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/mindmapCircle.ts

@@ -1,13 +1,57 @@
-import { circle } from './circle.js';
-import type { Node, MindmapOptions } from '../../types.js';
+import type { Node } from '../../types.js';
 import type { D3Selection } from '../../../types.js';
+import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import { styles2String } from './handDrawnShapeStyles.js';
+import intersect from '../intersect/index.js';
+import {
+  getMindmapIconConfig,
+  calculateMindmapDimensions,
+  insertMindmapIcon,
+} from '../../../diagrams/mindmap/mindmapIconHelper.js';
 
 export async function mindmapCircle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
 ) {
-  const options = {
-    padding: node.padding ?? 0,
-  } as MindmapOptions;
-  return circle(parent, node, options);
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const halfPadding = (node.padding ?? 0) / 2;
+
+  const iconConfig = getMindmapIconConfig('circle');
+  const baseRadius = bbox.width / 2 + halfPadding;
+  const baseDiameter = baseRadius * 2;
+
+  const dimensions = calculateMindmapDimensions(
+    node,
+    bbox,
+    baseDiameter,
+    baseDiameter,
+    halfPadding,
+    iconConfig
+  );
+
+  const radius = dimensions.width / 2;
+  node.width = dimensions.width;
+  node.height = dimensions.height;
+
+  label.attr('transform', `translate(${dimensions.labelOffset.x}, ${dimensions.labelOffset.y})`);
+
+  const circle = shapeSvg
+    .insert('circle', ':first-child')
+    .attr('r', radius)
+    .attr('class', 'basic label-container')
+    .attr('style', styles2String(node).nodeStyles);
+
+  shapeSvg.append(() => label.node());
+
+  if (node.icon) {
+    await insertMindmapIcon(shapeSvg, node, iconConfig);
+  }
+
+  updateNodeBounds(node, circle);
+
+  node.intersect = function (point) {
+    return intersect.circle(node, radius, point);
+  };
+
+  return shapeSvg;
 }

packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts

@@ -2,8 +2,8 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } f
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
+import rough from 'roughjs';
 
 /**
  * Generates evenly spaced points along an elliptical arc connecting two points.
@@ -91,13 +91,20 @@ export async function roundedRect<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
   const labelPaddingX = node?.padding ?? 0;
   const labelPaddingY = node?.padding ?? 0;
 
   const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
   const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
+
+  const labelXOffset = -bbox.width / 2;
+
+  if (node.icon) {
+    label.attr('transform', `translate(${labelXOffset}, ${-bbox.height / 2})`);
+  }
+
   const radius = node.radius || 5;
   const taper = node.taper || 5; // Taper width for the rounded corners
   const { cssStyles } = node;

packages/mermaid/src/rendering-util/types.ts

@@ -84,6 +84,7 @@ interface BaseNode {
   radius?: number;
   taper?: number;
   stroke?: string;
+  section?: number;
 }
 
 /**