fix:ComponentQueue_Ext throws lexical error

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

.changeset/chilly-words-march.md

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

.changeset/ten-plums-bet.md

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

cypress/helpers/util.ts

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

docs/syntax/classDiagram.md

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

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

@@ -0,0 +1,58 @@
+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,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();}
+<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();}
 
 <attribute>",,"                           { return 'ATTRIBUTE_EMPTY';}
 <attribute>","                            { }

packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js

@@ -266,156 +266,4 @@ describe('[Arrows] when parsing', () => {
       });
     });
   });
-
-  describe('Issue #2492: Node names starting with o/x should not be consumed by arrow markers', () => {
-    it('should handle node names starting with "o" after plain arrows', function () {
-      const res = flow.parser.parse('graph TD;\ndev---ops;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('dev').id).toBe('dev');
-      expect(vert.get('ops').id).toBe('ops');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('dev');
-      expect(edges[0].end).toBe('ops');
-      expect(edges[0].type).toBe('arrow_open');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should handle node names starting with "x" after plain arrows', function () {
-      const res = flow.parser.parse('graph TD;\ndev---xerxes;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('dev').id).toBe('dev');
-      expect(vert.get('xerxes').id).toBe('xerxes');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('dev');
-      expect(edges[0].end).toBe('xerxes');
-      expect(edges[0].type).toBe('arrow_open');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should still support circle arrows with spaces', function () {
-      const res = flow.parser.parse('graph TD;\nA --o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('A').id).toBe('A');
-      expect(vert.get('B').id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('arrow_circle');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should still support cross arrows with spaces', function () {
-      const res = flow.parser.parse('graph TD;\nC --x D;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('C').id).toBe('C');
-      expect(vert.get('D').id).toBe('D');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('C');
-      expect(edges[0].end).toBe('D');
-      expect(edges[0].type).toBe('arrow_cross');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should support circle arrows to uppercase nodes without spaces', function () {
-      const res = flow.parser.parse('graph TD;\nA--oB;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('A').id).toBe('A');
-      expect(vert.get('B').id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('arrow_circle');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should support cross arrows to uppercase nodes without spaces', function () {
-      const res = flow.parser.parse('graph TD;\nA--xBar;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('A').id).toBe('A');
-      expect(vert.get('Bar').id).toBe('Bar');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('Bar');
-      expect(edges[0].type).toBe('arrow_cross');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should handle thick arrows with lowercase node names starting with "o"', function () {
-      const res = flow.parser.parse('graph TD;\nalpha===omega;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('alpha').id).toBe('alpha');
-      expect(vert.get('omega').id).toBe('omega');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('alpha');
-      expect(edges[0].end).toBe('omega');
-      expect(edges[0].type).toBe('arrow_open');
-      expect(edges[0].stroke).toBe('thick');
-    });
-
-    it('should handle dotted arrows with lowercase node names starting with "o"', function () {
-      const res = flow.parser.parse('graph TD;\nfoo-.-opus;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('foo').id).toBe('foo');
-      expect(vert.get('opus').id).toBe('opus');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('foo');
-      expect(edges[0].end).toBe('opus');
-      expect(edges[0].type).toBe('arrow_open');
-      expect(edges[0].stroke).toBe('dotted');
-    });
-
-    it('should still support dotted circle arrows with spaces', function () {
-      const res = flow.parser.parse('graph TD;\nB -.-o C;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('B').id).toBe('B');
-      expect(vert.get('C').id).toBe('C');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('B');
-      expect(edges[0].end).toBe('C');
-      expect(edges[0].type).toBe('arrow_circle');
-      expect(edges[0].stroke).toBe('dotted');
-    });
-
-    it('should still support thick cross arrows with spaces', function () {
-      const res = flow.parser.parse('graph TD;\nC ==x D;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('C').id).toBe('C');
-      expect(vert.get('D').id).toBe('D');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('C');
-      expect(edges[0].end).toBe('D');
-      expect(edges[0].type).toBe('arrow_cross');
-      expect(edges[0].stroke).toBe('thick');
-    });
-  });
 });

packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.ts

@@ -1,129 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import flow from './flowParser.js';
-import { FlowDB } from '../flowDb.js';
-
-describe('Flowchart arrow parsing - Issue #2492', () => {
-  let flowDb: FlowDB;
-
-  beforeEach(() => {
-    flowDb = new FlowDB();
-    flow.parser.yy = flowDb;
-    flowDb.clear();
-  });
-
-  describe('Solid arrows with markers', () => {
-    it('should parse --> followed by uppercase node', () => {
-      const diagram = 'graph TD\nA-->B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --> followed by lowercase node', () => {
-      const diagram = 'graph TD\nA-->b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --> followed by space', () => {
-      const diagram = 'graph TD\nA--> B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --- followed by uppercase node (issue #2492)', () => {
-      const diagram = 'graph TD\ndev---Ops';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --- followed by lowercase node (issue #2492)', () => {
-      const diagram = 'graph TD\ndev---ops';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --o followed by uppercase node', () => {
-      const diagram = 'graph TD\nA--oB';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --o followed by lowercase node', () => {
-      const diagram = 'graph TD\nA--ob';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --x followed by uppercase node', () => {
-      const diagram = 'graph TD\nA--xBar';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --x followed by lowercase node', () => {
-      const diagram = 'graph TD\nA--xbar';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-
-  describe('Thick arrows with markers', () => {
-    it('should parse ==> followed by uppercase node', () => {
-      const diagram = 'graph TD\nA==>B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse ==> followed by lowercase node', () => {
-      const diagram = 'graph TD\nA==>b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse === followed by lowercase node', () => {
-      const diagram = 'graph TD\nA===b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-
-  describe('Dotted arrows with markers', () => {
-    it('should parse -.-> followed by uppercase node', () => {
-      const diagram = 'graph TD\nA-.->B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse -.-> followed by lowercase node', () => {
-      const diagram = 'graph TD\nA-.->b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse -.- followed by lowercase node', () => {
-      const diagram = 'graph TD\nA-.-b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-
-  describe('Arrows with edge text', () => {
-    it('should parse arrow with edge text followed by uppercase node', () => {
-      const diagram = 'graph TD\nA-->|text|B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse arrow with edge text followed by lowercase node', () => {
-      const diagram = 'graph TD\nA-->|text|b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse multiple arrows with edge text (regression test)', () => {
-      const diagram = 'graph TD\nA-->|Get money|B\nB-->C\nC-->|One|D\nC-->|Two|E';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-
-  describe('Arrows followed by digits', () => {
-    it('should parse --> followed by digit', () => {
-      const diagram = 'graph LR\n47-->48';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --> followed by node starting with digit', () => {
-      const diagram = 'graph LR\nA-->48(Node)';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse complex diagram with digit node IDs (Sample 4)', () => {
-      const diagram =
-        'graph LR\n47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)\n37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-});

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

@@ -152,27 +152,15 @@ that id.
 ","                          return 'COMMA';
 "*"                          return 'MULT';
 
-<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>]\s+                 { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\-+[-xo>](?=[A-Z])                    { return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\-+[-xo>](?=[a-z])                    { return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\-+[-xo>](?=[0-9])                    { return 'LINK'; }
-<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>](?=\s*\|)           { this.popState(); return 'LINK'; }
+<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>]\s*          { this.popState(); return 'LINK'; }
 <INITIAL>\s*[xo<]?\-\-\s*                          { this.pushState("edgeText"); return 'START_LINK'; }
 <edgeText>[^-]|\-(?!\-)+                           return 'EDGE_TEXT';
 
-<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>]\s+            { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\=\=+[=xo>](?=[A-Z])                    { return 'LINK'; }
-<INITIAL>\s*[xo<]?\=\=+[=xo>](?=[a-z])                    { return 'LINK'; }
-<INITIAL>\s*[xo<]?\=\=+[=xo>](?=[0-9])                    { return 'LINK'; }
-<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>](?=\s*\|)      { this.popState(); return 'LINK'; }
+<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>]\s*      { this.popState(); return 'LINK'; }
 <INITIAL>\s*[xo<]?\=\=\s*                           { this.pushState("thickEdgeText"); return 'START_LINK'; }
 <thickEdgeText>[^=]|\=(?!=)                         return 'EDGE_TEXT';
 
-<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?\s+         { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\-?\.+\-[xo>]?(?=[A-Z])                  { return 'LINK'; }
-<INITIAL>\s*[xo<]?\-?\.+\-[xo>]?(?=[a-z])                  { return 'LINK'; }
-<INITIAL>\s*[xo<]?\-?\.+\-[xo>]?(?=[0-9])                  { return 'LINK'; }
-<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?(?=\s*\|)   { this.popState(); return 'LINK'; }
+<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?\s*   { this.popState(); return 'LINK'; }
 <INITIAL>\s*[xo<]?\-\.\s*                            { this.pushState("dottedEdgeText"); return 'START_LINK'; }
 <dottedEdgeText>[^\.]|\.(?!-)                        return 'EDGE_TEXT';
 

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,7 +2,6 @@ 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) => {
@@ -54,9 +53,11 @@ const drawFrame = (svg: SVG, config: Required<RadarDiagramConfig>): SVGGroup =>
     x: config.marginLeft + config.width / 2,
     y: config.marginTop + config.height / 2,
   };
-  configureSvgSize(svg, totalHeight, totalWidth, config.useMaxWidth ?? true);
-
-  svg.attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`);
+  // Initialize the SVG
+  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/docs/syntax/classDiagram.md

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