fix: move mindmap icons logic into a separate file

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)

package.json

@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.55.2",
-    "@argos-ci/cypress": "^6.1.3",
+    "@argos-ci/cypress": "^6.1.1",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.7",
     "@cspell/eslint-plugin": "^8.19.4",

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

@@ -0,0 +1,222 @@
+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 ?? 0;
+
+  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})`);
+      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 + iconPadding;
+      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/rendering-util/layout-algorithms/dagre/index.js

@@ -27,53 +27,6 @@ import { log } from '../../../logger.js';
 import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
-/**
- * Apply absolute note positioning after dagre layout
- * This fixes the issue where TB and LR directions position notes differently
- * by making note positioning truly absolute
- */
-const positionNotes = (graph) => {
-  const noteStatePairs = [];
-
-  graph.nodes().forEach((nodeId) => {
-    const node = graph.node(nodeId);
-    if (node.position && node.shape === 'note') {
-      const edges = graph.nodeEdges(nodeId);
-
-      for (const edge of edges) {
-        const otherNodeId = edge.v === nodeId ? edge.w : edge.v;
-        const otherNode = graph.node(otherNodeId);
-
-        if (otherNode && otherNode.shape !== 'note' && otherNode.shape !== 'noteGroup') {
-          noteStatePairs.push({
-            noteId: nodeId,
-            noteNode: node,
-            stateId: otherNodeId,
-            stateNode: otherNode,
-            position: node.position,
-          });
-        }
-      }
-    }
-  });
-
-  noteStatePairs.forEach(({ noteNode, stateNode, position }) => {
-    const spacing = 60;
-
-    let noteX = noteNode.x;
-    let noteY = stateNode.y;
-
-    if (position === 'right of') {
-      noteX = stateNode.x + stateNode.width / 2 + spacing + noteNode.width / 2;
-    } else if (position === 'left of') {
-      noteX = stateNode.x - stateNode.width / 2 - spacing - noteNode.width / 2;
-    }
-
-    noteNode.x = noteX;
-    noteNode.y = noteY;
-  });
-};
-
 const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, siteConfig) => {
   log.warn('Graph in recursive render:XAX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
@@ -211,9 +164,6 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
 
   dagreLayout(graph);
 
-  // Apply absolute note positioning after dagre layout
-  positionNotes(graph);
-
   log.info('Graph after layout:', JSON.stringify(graphlibJson.write(graph)));
   // Move the nodes to the correct place
   let diff = 0;

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;
 }
 
 /**

pnpm-lock.yaml

@@ -17,8 +17,8 @@ importers:
         specifier: ^3.55.2
         version: 3.55.2(encoding@0.1.13)(typescript@5.7.3)
       '@argos-ci/cypress':
-        specifier: ^6.1.3
-        version: 6.1.3(cypress@14.5.4)
+        specifier: ^6.1.1
+        version: 6.1.1(cypress@14.5.4)
       '@changesets/changelog-github':
         specifier: ^0.5.1
         version: 0.5.1(encoding@0.1.13)
@@ -793,26 +793,26 @@ packages:
     resolution: {integrity: sha512-8mBaNNJ0zUBlb09ycc8aFTKajoqEu+E7M7kdV1IENIwuVOI3ecM6x9vr4ptWQz0LTnel7M+L3NPqAGJqoQ3AKA==}
     engines: {node: '>=12.13.0'}
 
-  '@argos-ci/api-client@0.12.0':
-    resolution: {integrity: sha512-WfhI+StLJKIKERWQaIm7Kv1/k+YO/CYIp3djDVhZIU6mv/8yalyNXHnkRC6ofq1kPpmRvoag1KW79/C2WsB4Ag==}
+  '@argos-ci/api-client@0.11.0':
+    resolution: {integrity: sha512-mv7LWrJfEDjjs+CmAJaM1GIexpb3A8TwuyTUCTKgDp/SHdbU0uF8uC6lV4P/mfeGIvBYZzIRKq/frd+IETlC2g==}
     engines: {node: '>=20.0.0'}
 
   '@argos-ci/browser@5.0.0':
     resolution: {integrity: sha512-SKAD7EXoLX4u50dzTIT/ABnpD284+DnBfoJM0ZrTIav2eiiVJyknNKSznF5w118lYGnYvugTXbKMnukGPzJeOA==}
     engines: {node: '>=20.0.0'}
 
-  '@argos-ci/core@4.2.0':
-    resolution: {integrity: sha512-3RNyBZ84pYfQ8dn/Ivv5ls2x2rgqFuh8wA8e4ugggA5lx2dE7a6yghJw8cPzud+zbHrpOntl/HBM3akh2SXLkw==}
+  '@argos-ci/core@4.1.5':
+    resolution: {integrity: sha512-tPsbnSuHEClkdGLUU/qHTNsMe3kAPBvz0DK0nkv6Z18N0imEbzVg+ggmcTmc2x2yEm7i1V456Z2MLhFvTqXnlw==}
     engines: {node: '>=20.0.0'}
 
-  '@argos-ci/cypress@6.1.3':
-    resolution: {integrity: sha512-JlBabUsksKXH7QT2M47dhBNHRxNwW+GQ1lvBT/mgGaFJX8P/GqLkEEmKolf1YBn28MFemQmjuK4G+z5Pjs3rLg==}
+  '@argos-ci/cypress@6.1.1':
+    resolution: {integrity: sha512-fs6K2o7vEiAjBtQhrB6cp7YG6beYBRI9WyVbAHRVYyhdEic36agAqQ7/q3tx8d+uf7nXjjtZuW7KGUxjBmC9MA==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       cypress: ^12.0.0 || ^13.0.0 || ^14.0.0
 
-  '@argos-ci/util@3.1.1':
-    resolution: {integrity: sha512-sGb9PS7yqdVVtxpxRD1Nfter3kaioC4nPPTknVmMSqo2GQKO1gdmjMJtwHY+Nf9FgiMfwpTCnk8Rrf0pjS3Sug==}
+  '@argos-ci/util@3.1.0':
+    resolution: {integrity: sha512-QM0IwJGm9YsRdsvTAskQab9iXpQOTOOLb+h9Yev76L2TzoLZ2tM9QO+pYNNlX9YLK5dYr/H/pBNQ1lWr130Jjw==}
     engines: {node: '>=20.0.0'}
 
   '@asamuzakjp/css-color@3.2.0':
@@ -7603,8 +7603,8 @@ packages:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
 
-  openapi-fetch@0.14.1:
-    resolution: {integrity: sha512-l7RarRHxlEZYjMLd/PR0slfMVse2/vvIAGm75/F7J6MlQ8/b9uUQmUF2kCPrQhJqMXSxmYWObVgeYXbFYzZR+A==}
+  openapi-fetch@0.14.0:
+    resolution: {integrity: sha512-PshIdm1NgdLvb05zp8LqRQMNSKzIlPkyMxYFxwyHR+UlKD4t2nUjkDhNxeRbhRSEd3x5EUNh2w5sJYwkhOH4fg==}
 
   openapi-typescript-helpers@0.0.15:
     resolution: {integrity: sha512-opyTPaunsklCBpTK8JGef6mfPhLSnyy5a0IN9vKtx3+4aExf+KxEqYwIy3hqkedXIB97u357uLMJsOnm3GVjsw==}
@@ -10298,19 +10298,19 @@ snapshots:
 
   '@applitools/utils@1.12.0': {}
 
-  '@argos-ci/api-client@0.12.0':
+  '@argos-ci/api-client@0.11.0':
     dependencies:
       debug: 4.4.3(supports-color@8.1.1)
-      openapi-fetch: 0.14.1
+      openapi-fetch: 0.14.0
     transitivePeerDependencies:
       - supports-color
 
   '@argos-ci/browser@5.0.0': {}
 
-  '@argos-ci/core@4.2.0':
+  '@argos-ci/core@4.1.5':
     dependencies:
-      '@argos-ci/api-client': 0.12.0
-      '@argos-ci/util': 3.1.1
+      '@argos-ci/api-client': 0.11.0
+      '@argos-ci/util': 3.1.0
       convict: 6.2.4
       debug: 4.4.3(supports-color@8.1.1)
       fast-glob: 3.3.3
@@ -10319,17 +10319,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@argos-ci/cypress@6.1.3(cypress@14.5.4)':
+  '@argos-ci/cypress@6.1.1(cypress@14.5.4)':
     dependencies:
       '@argos-ci/browser': 5.0.0
-      '@argos-ci/core': 4.2.0
-      '@argos-ci/util': 3.1.1
+      '@argos-ci/core': 4.1.5
+      '@argos-ci/util': 3.1.0
       cypress: 14.5.4
       cypress-wait-until: 3.0.2
     transitivePeerDependencies:
       - supports-color
 
-  '@argos-ci/util@3.1.1': {}
+  '@argos-ci/util@3.1.0': {}
 
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
@@ -18528,7 +18528,7 @@ snapshots:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  openapi-fetch@0.14.1:
+  openapi-fetch@0.14.0:
     dependencies:
       openapi-typescript-helpers: 0.0.15