chore(deps): update eslint

.changeset/brave-baths-behave.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Prevent HTML tags from being escaped in sandbox label rendering

.changeset/ten-plums-bet.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Support ComponentQueue_Ext to prevent parsing error

.changeset/tricky-lions-behave.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Correct tooltip placement to appear near hovered element

cypress/helpers/util.ts

@@ -98,21 +98,12 @@ export const openURLAndVerifyRendering = (
 
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+  // cspell:ignore viewbox
+  cy.get('svg').should('not.have.attr', 'viewbox');
 
-  // Handle sandbox mode where SVG is inside an iframe
-  if (options.securityLevel === 'sandbox') {
-    cy.get('iframe').should('be.visible');
-    if (validation) {
-      cy.get('iframe').should(validation);
-    }
-  } else {
-    cy.get('svg').should('be.visible');
-    // cspell:ignore viewbox
-    cy.get('svg').should('not.have.attr', 'viewbox');
-
-    if (validation) {
-      cy.get('svg').should(validation);
-    }
+  if (validation) {
+    cy.get('svg').should(validation);
   }
 
   if (screenshot) {

cypress/integration/rendering/c4.spec.js

@@ -114,28 +114,4 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('C4.6 should render C4Context diagram with ComponentQueue_Ext', () => {
-    imgSnapshotTest(
-      `
-      C4Context
-      title System Context diagram with ComponentQueue_Ext
-
-      Enterprise_Boundary(b0, "BankBoundary0") {
-          Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-
-          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-          Enterprise_Boundary(b1, "BankBoundary") {
-            ComponentQueue_Ext(msgQueue, "Message Queue", "RabbitMQ", "External message queue system for processing banking transactions")
-            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-          }
-        }
-
-      BiRel(customerA, SystemAA, "Uses")
-      Rel(SystemAA, msgQueue, "Sends messages to")
-      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-      `,
-      {}
-    );
-  });
 });

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

@@ -79,18 +79,6 @@ describe('Flowchart v2', () => {
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('6a: should render complex HTML in labels with sandbox security', () => {
-    imgSnapshotTest(
-      `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]
-      `,
-      { securityLevel: 'sandbox', flowchart: { htmlLabels: true } }
-    );
-  });
   it('7: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
       `flowchart TD

package.json

@@ -63,13 +63,13 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.56.3",
-    "@argos-ci/cypress": "^6.2.1",
+    "@applitools/eyes-cypress": "^3.55.4",
+    "@argos-ci/cypress": "^6.1.5",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.7",
     "@cspell/eslint-plugin": "^9.3.0",
     "@cypress/code-coverage": "^3.14.7",
-    "@eslint/js": "^9.26.0",
+    "@eslint/js": "^9.39.1",
     "@rollup/plugin-typescript": "^12.1.4",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.5",
@@ -77,7 +77,7 @@
     "@types/jsdom": "^21.1.7",
     "@types/lodash": "^4.17.20",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.19.0",
+    "@types/node": "^22.18.13",
     "@types/rollup-plugin-visualizer": "^5.0.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/spy": "^3.2.4",
@@ -88,12 +88,12 @@
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cspell": "^9.3.0",
+    "cspell": "^9.2.2",
     "cypress": "^14.5.4",
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.25",
     "esbuild": "^0.25.12",
-    "eslint": "^9.26.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-cypress": "^5.2.0",
     "eslint-plugin-html": "^8.1.3",
@@ -126,8 +126,8 @@
     "tslib": "^2.8.1",
     "tsx": "^4.20.6",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.8",
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.0.7",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.2.4"
   },

packages/mermaid/package.json

@@ -78,7 +78,7 @@
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.13",
     "dayjs": "^1.11.19",
-    "dompurify": "^3.3.0",
+    "dompurify": "^3.2.7",
     "katex": "^0.16.25",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",

packages/mermaid/src/diagrams/c4/parser/c4Component.spec.js

@@ -1,58 +0,0 @@
-import c4Db from '../c4Db.js';
-import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config.js';
-
-setConfig({
-  securityLevel: 'strict',
-});
-
-describe.each([
-  ['Component', 'component'],
-  ['ComponentDb', 'component_db'],
-  ['ComponentQueue', 'component_queue'],
-  ['Component_Ext', 'external_component'],
-  ['ComponentDb_Ext', 'external_component_db'],
-  ['ComponentQueue_Ext', 'external_component_queue'],
-])('parsing a C4 %s', function (macroName, elementName) {
-  beforeEach(function () {
-    c4.parser.yy = c4Db;
-    c4.parser.yy.clear();
-  });
-
-  it('should parse a C4 diagram with one Component correctly', function () {
-    c4.parser.parse(`C4Component
-title Component diagram for Internet Banking Component
-${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")`);
-
-    const yy = c4.parser.yy;
-
-    const shapes = yy.getC4ShapeArray();
-    expect(shapes.length).toBe(1);
-    const onlyShape = shapes[0];
-
-    expect(onlyShape).toMatchObject({
-      alias: 'ComponentAA',
-      descr: {
-        text: 'Allows customers to view information about their bank accounts, and make payments.',
-      },
-      label: {
-        text: 'Internet Banking Component',
-      },
-      techn: {
-        text: 'Technology',
-      },
-      typeC4Shape: {
-        text: elementName,
-      },
-    });
-  });
-
-  it('should handle a trailing whitespaces after Component', function () {
-    const whitespace = ' ';
-    const rendered = c4.parser.parse(`C4Component${whitespace}
-title Component diagram for Internet Banking Component${whitespace}
-${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")${whitespace}`);
-
-    expect(rendered).toBe(true);
-  });
-});

packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison

@@ -158,10 +158,10 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 "UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';}
 "UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';}
 
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
 
 <attribute>",,"                           { return 'ATTRIBUTE_EMPTY';}
 <attribute>","                            { }

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

@@ -1,4 +1,4 @@
-import { select } from 'd3';
+import { select, type Selection } from 'd3';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import common from '../common/common.js';
@@ -12,7 +12,6 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
-import { createTooltip } from '../common/svgDrawCommon.js';
 import { ClassMember } from './classTypes.js';
 import type {
   ClassRelation,
@@ -27,7 +26,6 @@ import type {
 } from './classTypes.js';
 import type { Node, Edge } from '../../rendering-util/types.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
-import DOMPurify from 'dompurify';
 
 const MERMAID_DOM_ID_PREFIX = 'classId-';
 let classCounter = 0;
@@ -485,45 +483,43 @@ export class ClassDB implements DiagramDB {
     LOLLIPOP: 4,
   };
 
-  // Utility function to escape HTML meta-characters
-  private escapeHtml(str: string): string {
-    return str
-      .replace(/&/g, '&')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#39;');
-  }
-
   private readonly setupToolTips = (element: Element) => {
-    const tooltipElem = createTooltip();
+    let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
+      select('.mermaidTooltip');
+    // @ts-expect-error - Incorrect types
+    if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
+      tooltipElem = select('body')
+        .append('div')
+        .attr('class', 'mermaidTooltip')
+        .style('opacity', 0);
+    }
 
     const svg = select(element).select('svg');
 
-    const nodes = svg.selectAll('g').filter(function () {
-      return select(this).attr('title') !== null;
-    });
-
+    const nodes = svg.selectAll('g.node');
     nodes
       .on('mouseover', (event: MouseEvent) => {
         const el = select(event.currentTarget as HTMLElement);
         const title = el.attr('title');
-        if (!title) {
+        // Don't try to draw a tooltip if no data is provided
+        if (title === null) {
           return;
         }
+        // @ts-ignore - getBoundingClientRect is not part of the d3 type definition
+        const rect = this.getBoundingClientRect();
 
-        const rect = (event.currentTarget as Element).getBoundingClientRect();
         tooltipElem.transition().duration(200).style('opacity', '.9');
         tooltipElem
-          .html(DOMPurify.sanitize(title))
-          .style('left', `${window.scrollX + rect.left + rect.width / 2}px`)
-          .style('top', `${window.scrollY + rect.bottom + 4}px`);
-
+          .text(el.attr('title'))
+          .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
+          .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
+        tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
         el.classed('hover', true);
       })
       .on('mouseout', (event: MouseEvent) => {
         tooltipElem.transition().duration(500).style('opacity', 0);
-        select(event.currentTarget as HTMLElement).classed('hover', false);
+        const el = select(event.currentTarget as HTMLElement);
+        el.classed('hover', false);
       });
   };
 

packages/mermaid/src/diagrams/common/common.spec.ts

@@ -70,31 +70,6 @@ describe('Sanitize text', () => {
     });
     expect(result).not.toContain('javascript:alert(1)');
   });
-
-  it('should allow HTML tags in sandbox mode', () => {
-    const htmlStr = '<p>This is a <strong>bold</strong> text</p>';
-    const result = sanitizeText(htmlStr, {
-      securityLevel: 'sandbox',
-      flowchart: { htmlLabels: true },
-    });
-    expect(result).toContain('<p>');
-    expect(result).toContain('<strong>');
-    expect(result).toContain('</strong>');
-    expect(result).toContain('</p>');
-  });
-
-  it('should remove script tags in sandbox mode', () => {
-    const maliciousStr = '<p>Hello <script>alert(1)</script> world</p>';
-    const result = sanitizeText(maliciousStr, {
-      securityLevel: 'sandbox',
-      flowchart: { htmlLabels: true },
-    });
-    expect(result).not.toContain('<script>');
-    expect(result).not.toContain('alert(1)');
-    expect(result).toContain('<p>');
-    expect(result).toContain('Hello');
-    expect(result).toContain('world');
-  });
 });
 
 describe('generic parser', () => {

packages/mermaid/src/diagrams/common/common.ts

@@ -66,7 +66,7 @@ export const removeScript = (txt: string): string => {
 const sanitizeMore = (text: string, config: MermaidConfig) => {
   if (config.flowchart?.htmlLabels !== false) {
     const level = config.securityLevel;
-    if (level === 'antiscript' || level === 'strict' || level === 'sandbox') {
+    if (level === 'antiscript' || level === 'strict') {
       text = removeScript(text);
     } else if (level !== 'loose') {
       text = breakToPlaceholder(text);

packages/mermaid/src/diagrams/common/svgDrawCommon.ts

@@ -1,5 +1,4 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import { select } from 'd3';
 import type { SVG, SVGGroup } from '../../diagram-api/types.js';
 import { lineBreakRegex } from './common.js';
 import type {
@@ -136,24 +135,3 @@ export const getTextObj = (): TextObject => {
   };
   return testObject;
 };
-
-export const createTooltip = () => {
-  let tooltipElem = select<HTMLDivElement, unknown>('.mermaidTooltip');
-  if (tooltipElem.empty()) {
-    tooltipElem = select('body')
-      .append('div')
-      .attr('class', 'mermaidTooltip')
-      .style('opacity', 0)
-      .style('position', 'absolute')
-      .style('text-align', 'center')
-      .style('max-width', '200px')
-      .style('padding', '2px')
-      .style('font-size', '12px')
-      .style('background', '#ffffde')
-      .style('border', '1px solid #333')
-      .style('border-radius', '2px')
-      .style('pointer-events', 'none')
-      .style('z-index', '100');
-  }
-  return tooltipElem;
-};

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -17,7 +17,6 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
-import { createTooltip } from '../common/svgDrawCommon.js';
 import type {
   FlowClass,
   FlowEdge,
@@ -27,7 +26,7 @@ import type {
   FlowVertex,
   FlowVertexTypeParam,
 } from './types.js';
-import DOMPurify from 'dompurify';
+
 interface LinkData {
   id: string;
 }
@@ -575,7 +574,15 @@ You have to call mermaid.initialize.`
   }
 
   private setupToolTips(element: Element) {
-    const tooltipElem = createTooltip();
+    let tooltipElem = select('.mermaidTooltip');
+    // @ts-ignore TODO: fix this
+    if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
+      // @ts-ignore TODO: fix this
+      tooltipElem = select('body')
+        .append('div')
+        .attr('class', 'mermaidTooltip')
+        .style('opacity', 0);
+    }
 
     const svg = select(element).select('svg');
 
@@ -596,7 +603,7 @@ You have to call mermaid.initialize.`
           .text(el.attr('title'))
           .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
           .style('top', window.scrollY + rect.bottom + 'px');
-        tooltipElem.html(DOMPurify.sanitize(title));
+        tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
         el.classed('hover', true);
       })
       .on('mouseout', (e: MouseEvent) => {

packages/mermaid/src/docs/package.json

@@ -21,19 +21,19 @@
     "font-awesome": "^4.7.0",
     "jiti": "^2.4.2",
     "mermaid": "workspace:^",
-    "vue": "^3.5.24"
+    "vue": "^3.5.23"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.14",
-    "@unocss/reset": "^66.5.5",
+    "@unocss/reset": "^66.5.4",
     "@vite-pwa/vitepress": "^1.0.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "fast-glob": "^3.3.3",
     "https-localhost": "^4.7.1",
     "pathe": "^2.0.3",
-    "unocss": "^66.5.5",
+    "unocss": "^66.5.4",
     "unplugin-vue-components": "^28.8.0",
-    "vite": "^7.0.8",
+    "vite": "^7.0.7",
     "vite-plugin-pwa": "^1.0.3",
     "vitepress": "1.6.4",
     "workbox-window": "^7.3.0"