chore(deps): update eslint

6919: correct viewBox casing in Radar & Packet

.changeset/brave-memes-flash.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Support edge animation in hand drawn look

.changeset/busy-mirrors-try.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Resolved parsing error where direction TD was not recognized within subgraphs

.changeset/chilly-words-march.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Correct viewBox casing and make SVGs responsive

.changeset/curly-apes-prove.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Improve participant parsing and prevent recursive loops on invalid syntax

cypress/helpers/util.ts

@@ -6,6 +6,7 @@ interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;
+  screenshot?: boolean;
 }
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
@@ -90,7 +91,7 @@ export const renderGraph = (
 
 export const openURLAndVerifyRendering = (
   url: string,
-  options: CypressMermaidConfig,
+  { screenshot = true, ...options }: CypressMermaidConfig,
   validation?: any
 ): void => {
   const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
@@ -98,12 +99,15 @@ export const openURLAndVerifyRendering = (
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
   cy.get('svg').should('be.visible');
+  cy.get('svg').should('not.have.attr', 'viewbox');
 
   if (validation) {
     cy.get('svg').should(validation);
   }
 
+  if (screenshot) {
     verifyScreenshot(name);
+  }
 };
 
 export const verifyScreenshot = (name: string): void => {

cypress/integration/rendering/flowchart-handDrawn.spec.js

@@ -1029,4 +1029,19 @@ graph TD
       }
     );
   });
+
+  it('FDH49: should add edge animation', () => {
+    renderGraph(
+      `
+      flowchart TD
+          A(["Start"]) L_A_B_0@--> B{"Decision"}
+          B --> C["Option A"] & D["Option B"]
+          style C stroke-width:4px,stroke-dasharray: 5
+          L_A_B_0@{ animation: slow } 
+          L_B_D_0@{ animation: fast }`,
+      { look: 'handDrawn', screenshot: false }
+    );
+    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
+    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
+  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -774,6 +774,21 @@ describe('Graph', () => {
       expect(svg).to.not.have.attr('style');
     });
   });
+  it('40: should add edge animation', () => {
+    renderGraph(
+      `
+      flowchart TD
+          A(["Start"]) L_A_B_0@--> B{"Decision"}
+          B --> C["Option A"] & D["Option B"]
+          style C stroke-width:4px,stroke-dasharray: 5
+          L_A_B_0@{ animation: slow } 
+          L_B_D_0@{ animation: fast }`,
+      { screenshot: false }
+    );
+    // Verify animation classes are applied to both edges
+    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
+    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
+  });
   it('58: handle styling with style expressions', () => {
     imgSnapshotTest(
       `
@@ -973,4 +988,19 @@ graph TD
       }
     );
   });
+
+  it('70: should render a subgraph with direction TD', () => {
+    imgSnapshotTest(
+      `
+      flowchart LR
+        subgraph A
+          direction TD
+          a --> b
+        end
+      `,
+      {
+        fontFamily: 'courier',
+      }
+    );
+  });
 });

cypress/platform/e2e.html

@@ -6,14 +6,6 @@
       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;

cypress/platform/yari.html

@@ -603,6 +603,10 @@
       </div>
       <div class="test">
         <pre class="mermaid">
+          ---
+            config:
+              theme: dark
+          ---
           classDiagram
             test ()--() test2
         </pre>

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

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

docs/syntax/classDiagram.md

@@ -21,7 +21,7 @@ title: Animal example
 classDiagram
     note "From Duck till Zebra"
     Animal <|-- Duck
-    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
+    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -50,7 +50,7 @@ title: Animal example
 classDiagram
     note "From Duck till Zebra"
     Animal <|-- Duck
-    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
+    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age

package.json

@@ -64,10 +64,10 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.55.2",
-    "@argos-ci/cypress": "^6.1.1",
+    "@argos-ci/cypress": "^6.1.3",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.7",
-    "@cspell/eslint-plugin": "^8.19.4",
+    "@cspell/eslint-plugin": "^9.2.2",
     "@cypress/code-coverage": "^3.14.6",
     "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.4",
@@ -95,16 +95,16 @@
     "esbuild": "^0.25.10",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-cypress": "^4.3.0",
+    "eslint-plugin-cypress": "^5.2.0",
     "eslint-plugin-html": "^8.1.3",
-    "eslint-plugin-jest": "^28.14.0",
+    "eslint-plugin-jest": "^29.0.1",
-    "eslint-plugin-jsdoc": "^50.8.0",
+    "eslint-plugin-jsdoc": "^61.1.5",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-tsdoc": "^0.4.0",
-    "eslint-plugin-unicorn": "^59.0.1",
+    "eslint-plugin-unicorn": "^61.0.2",
     "express": "^5.1.0",
     "globals": "^16.4.0",
     "globby": "^14.1.0",

packages/mermaid/src/diagrams/class/classDb.ts

@@ -627,7 +627,7 @@ export class ClassDB implements DiagramDB {
           padding: config.class!.padding ?? 16,
           // parent node must be one of [rect, roundedWithTitle, noteGroup, divider]
           shape: 'rect',
-          cssStyles: ['fill: none', 'stroke: black'],
+          cssStyles: [],
           look: config.look,
         };
         nodes.push(node);

packages/mermaid/src/diagrams/class/styles.js

@@ -13,6 +13,30 @@ const getStyles = (options) =>
 
 }
 
+  .cluster-label text {
+    fill: ${options.titleColor};
+  }
+  .cluster-label span {
+    color: ${options.titleColor};
+  }
+  .cluster-label span p {
+    background-color: transparent;
+  }
+
+  .cluster rect {
+    fill: ${options.clusterBkg};
+    stroke: ${options.clusterBorder};
+    stroke-width: 1px;
+  }
+
+  .cluster text {
+    fill: ${options.titleColor};
+  }
+
+  .cluster span {
+    color: ${options.titleColor};
+  }
+
 .nodeLabel, .edgeLabel {
   color: ${options.classText};
 }

packages/mermaid/src/diagrams/flowchart/parser/flow.jison

@@ -140,6 +140,7 @@ that id.
 .*direction\s+BT[^\n]*       return 'direction_bt';
 .*direction\s+RL[^\n]*       return 'direction_rl';
 .*direction\s+LR[^\n]*       return 'direction_lr';
+.*direction\s+TD[^\n]*       return 'direction_td';
 
 [^\s\"]+\@(?=[^\{\"])               { return 'LINK_ID'; }
 [0-9]+                       return 'NUM';
@@ -626,6 +627,8 @@ direction
     { $$={stmt:'dir', value:'RL'};}
     | direction_lr
     { $$={stmt:'dir', value:'LR'};}
+    | direction_td
+    { $$={stmt:'dir', value:'TD'};}
     ;
 
 %%

packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js

@@ -309,4 +309,21 @@ describe('when parsing subgraphs', function () {
     expect(subgraphA.nodes).toContain('a');
     expect(subgraphA.nodes).not.toContain('c');
   });
+  it('should correctly parse direction TD inside a subgraph', function () {
+    const res = flow.parser.parse(`
+      graph LR
+        subgraph WithTD
+          direction TD
+          A1 --> A2
+        end
+    `);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(1);
+    const subgraph = subgraphs[0];
+
+    expect(subgraph.dir).toBe('TD');
+    expect(subgraph.nodes).toContain('A1');
+    expect(subgraph.nodes).toContain('A2');
+  });
 });

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

@@ -1,222 +0,0 @@
-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,7 +7,6 @@ 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
@@ -72,28 +71,6 @@ 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/packet/renderer.ts

@@ -16,7 +16,7 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
   const svgWidth = bitWidth * bitsPerRow + 2;
   const svg: SVG = selectSvgElement(id);
 
-  svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`);
+  svg.attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
   configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth);
 
   for (const [word, packet] of words.entries()) {

packages/mermaid/src/diagrams/radar/renderer.ts

@@ -2,6 +2,7 @@ import type { Diagram } from '../../Diagram.js';
 import type { RadarDiagramConfig } from '../../config.type.js';
 import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { RadarDB, RadarAxis, RadarCurve } from './types.js';
 
 const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
@@ -53,11 +54,9 @@ const drawFrame = (svg: SVG, config: Required<RadarDiagramConfig>): SVGGroup =>
     x: config.marginLeft + config.width / 2,
     y: config.marginTop + config.height / 2,
   };
-  // Initialize the SVG
+  configureSvgSize(svg, totalHeight, totalWidth, config.useMaxWidth ?? true);
-  svg
+
-    .attr('viewbox', `0 0 ${totalWidth} ${totalHeight}`)
+  svg.attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`);
-    .attr('width', totalWidth)
-    .attr('height', totalHeight);
   // g element to center the radar chart
   return svg.append('g').attr('transform', `translate(${center.x}, ${center.y})`);
 };

packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -32,13 +32,14 @@
 <CONFIG>[^\}]+                                                  { return 'CONFIG_CONTENT'; }
 <CONFIG>\}                                                      { this.popState(); this.popState(); return 'CONFIG_END'; }
 <ID>[^\<->\->:\n,;@\s]+(?=\@\{)                                 { yytext = yytext.trim(); return 'ACTOR'; }
-<ID>[^\<->\->:\n,;@]+?([\-]*[^\<->\->:\n,;@]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
+<ID>[^<>:\n,;@\s]+(?=\s+as\s)                                   { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
+<ID>[^<>:\n,;@]+(?=\s*[\n;#]|$)                                 { yytext = yytext.trim(); this.popState(); return 'ACTOR'; }
+<ID>[^<>:\n,;@]*\<[^\n]*                                        { this.popState(); return 'INVALID'; }
 "box"															{ this.begin('LINE'); return 'box'; }
 "participant"                                                   { this.begin('ID'); return 'participant'; }
 "actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
 "create"                                                        return 'create';
 "destroy"                                                       { this.begin('ID'); return 'destroy'; }
-<ID>[^<\->\->:\n,;]+?([\-]*[^<\->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
 "loop"                                                          { this.begin('LINE'); return 'loop'; }
@@ -145,6 +146,7 @@ line
 	: SPACE statement { $$ = $2 }
 	| statement { $$ = $1 }
 	| NEWLINE { $$=[]; }
+	| INVALID { $$=[]; }
 	;
 
 box_section

packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js

@@ -2609,5 +2609,17 @@ Bob->>Alice:Got it!
       expect(actors.get('E').type).toBe('entity');
       expect(actors.get('E').description).toBe('E');
     });
+    it('should handle fail parsing when alias token causes conflicts in participant definition', async () => {
+      let error = false;
+      try {
+        await Diagram.fromText(`
+        sequenceDiagram
+        participant SAS MyServiceWithMoreThan20Chars <br> service decription
+       `);
+      } catch (e) {
+        error = true;
+      }
+      expect(error).toBe(true);
+    });
   });
 });

packages/mermaid/src/docs/syntax/classDiagram.md

@@ -15,7 +15,7 @@ title: Animal example
 classDiagram
     note "From Duck till Zebra"
     Animal <|-- Duck
-    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
+    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -605,6 +605,14 @@ export const insertEdge = function (
   const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
   let strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:'));
 
+  let animationClass = '';
+  if (edge.animate) {
+    animationClass = 'edge-animation-fast';
+  }
+  if (edge.animation) {
+    animationClass = 'edge-animation-' + edge.animation;
+  }
+
   let animatedEdge = false;
   if (edge.look === 'handDrawn') {
     const rc = rough.svg(elem);
@@ -620,7 +628,13 @@ export const insertEdge = function (
     svgPath = select(svgPathNode)
       .select('path')
       .attr('id', edge.id)
-      .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
+      .attr(
+        'class',
+        ' ' +
+          strokeClasses +
+          (edge.classes ? ' ' + edge.classes : '') +
+          (animationClass ? ' ' + animationClass : '')
+      )
       .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
     let d = svgPath.attr('d');
     svgPath.attr('d', d);
@@ -628,13 +642,6 @@ export const insertEdge = function (
   } else {
     const stylesFromClasses = edgeClassStyles.join(';');
     const styles = edgeStyles ? edgeStyles.reduce((acc, style) => acc + style + ';', '') : '';
-    let animationClass = '';
-    if (edge.animate) {
-      animationClass = ' edge-animation-fast';
-    }
-    if (edge.animation) {
-      animationClass = ' edge-animation-' + edge.animation;
-    }
 
     const pathStyle =
       (stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles) +
@@ -646,7 +653,10 @@ export const insertEdge = function (
       .attr('id', edge.id)
       .attr(
         'class',
-        ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
+        ' ' +
+          strokeClasses +
+          (edge.classes ? ' ' + edge.classes : '') +
+          (animationClass ? ' ' + animationClass : '')
       )
       .attr('style', pathStyle);
 

packages/mermaid/src/rendering-util/rendering-elements/markers.js

@@ -130,7 +130,6 @@ const lollipop = (elem, type, id) => {
     .attr('markerHeight', 240)
     .attr('orient', 'auto')
     .append('circle')
-    .attr('stroke', 'black')
     .attr('fill', 'transparent')
     .attr('cx', 7)
     .attr('cy', 7)
@@ -147,7 +146,6 @@ const lollipop = (elem, type, id) => {
     .attr('markerHeight', 240)
     .attr('orient', 'auto')
     .append('circle')
-    .attr('stroke', 'black')
     .attr('fill', 'transparent')
     .attr('cx', 7)
     .attr('cy', 7)

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

@@ -7,11 +7,6 @@ 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);
@@ -22,33 +17,19 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
     getNodeClasses(node)
   );
 
-  const baseWidth = bbox.width + 10 * halfPadding;
+  const w = bbox.width + 10 * halfPadding;
-  const baseHeight = bbox.height + 8 * halfPadding;
+  const h = bbox.height + 8 * halfPadding;
-
+  const r = 0.15 * w;
-  const iconConfig = getMindmapIconConfig('bang');
+  const { cssStyles } = node;
-  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(${dimensions.labelOffset.x}, ${dimensions.labelOffset.y})`);
+  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
 
-  const r = 0.15 * effectiveWidth;
+  let bangElem;
   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}
@@ -69,16 +50,13 @@ 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
+    bangElem.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
-      .attr('class', 'basic label-container')
-      .attr('style', handleUndefinedAttr(node.cssStyles));
   } else {
     bangElem = shapeSvg
       .insert('path', ':first-child')
@@ -90,10 +68,6 @@ 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,25 +14,9 @@ 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,11 +6,6 @@ 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);
@@ -22,26 +17,8 @@ export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>
     getNodeClasses(node)
   );
 
-  const baseWidth = bbox.width + 2 * halfPadding;
+  const w = bbox.width + 2 * halfPadding;
-  const baseHeight = bbox.height + 2 * halfPadding;
+  const h = 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;
@@ -84,13 +61,11 @@ 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,11 +3,6 @@ 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>,
@@ -22,38 +17,22 @@ export async function defaultMindmapNode<T extends SVGGraphicsElement>(
     getNodeClasses(node)
   );
 
-  const baseWidth = bbox.width + 8 * halfPadding;
+  const w = bbox.width + 8 * halfPadding;
-  const baseHeight = bbox.height + 2 * halfPadding;
+  const h = bbox.height + 2 * halfPadding;
+  const rd = 5;
 
-  const iconConfig = getMindmapIconConfig('default');
+  const rectPath = `
-  const dimensions = calculateMindmapDimensions(
+    M${-w / 2} ${h / 2 - rd}
-    node,
+    v${-h + 2 * rd}
-    bbox,
+    q0,-${rd} ${rd},-${rd}
-    baseWidth,
+    h${w - 2 * rd}
-    baseHeight,
+    q${rd},0 ${rd},${rd}
-    halfPadding,
+    v${h - 2 * rd}
-    iconConfig
+    q0,${rd} -${rd},${rd}
-  );
+    h${-w + 2 * rd}
-
+    q-${rd},0 -${rd},-${rd}
-  const w = dimensions.width;
+    Z
-  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')
@@ -70,12 +49,9 @@ 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,21 +15,11 @@ export async function drawRect<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-
+  // console.log('IPI labelStyles:', labelStyles);
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const { shapeSvg, bbox } = 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,22 +26,10 @@ 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);
@@ -86,6 +74,9 @@ 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,57 +1,13 @@
-import type { Node } from '../../types.js';
+import { circle } from './circle.js';
+import type { Node, MindmapOptions } 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 { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const options = {
-  const halfPadding = (node.padding ?? 0) / 2;
+    padding: node.padding ?? 0,
-
+  } as MindmapOptions;
-  const iconConfig = getMindmapIconConfig('circle');
+  return circle(parent, node, options);
-  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 type { D3Selection } from '../../../types.js';
 import rough from 'roughjs';
+import type { D3Selection } from '../../../types.js';
 
 /**
  * Generates evenly spaced points along an elliptical arc connecting two points.
@@ -91,20 +91,13 @@ export async function roundedRect<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const { shapeSvg, bbox } = 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,7 +84,6 @@ interface BaseNode {
   radius?: number;
   taper?: number;
   stroke?: string;
-  section?: number;
 }
 
 /**