fix: add validation to ensure correct casing of 'viewBox' in all rendering tests

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

.changeset/chilly-words-march.md

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

cypress/helpers/util.ts

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

@@ -702,7 +702,6 @@ classDiagram
 It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
 You would define these actions on a separate line after all classes have been declared.
-If you have classes defined within a namespace, you can also add interaction definitions within the namespace definition, after the class(es) is defined
 
 ```
 action className "reference" "tooltip"

packages/mermaid/src/diagrams/class/classDiagram.spec.ts

@@ -88,50 +88,6 @@ describe('given a basic class diagram, ', function () {
       expect(relations[0].title).toBe('generates');
     });
 
-    it('should handle link statements within namespaces', function () {
-      spyOn(classDb, 'setLink');
-      const str = `classDiagram
-        namespace MyNamespace {
-          class UserService {
-            +createUser()
-            +deleteUser()
-          }
-          
-          class PaymentService {
-            +processPayment()
-            +refund()
-          }
-          
-          link UserService "https://example.com/user-service"
-          link PaymentService "https://example.com/payment-service" "Payment Service Documentation"
-        }`;
-
-      parser.parse(str);
-
-      // Verify setLink was called for both classes
-      expect(classDb.setLink).toHaveBeenCalledWith(
-        'UserService',
-        'https://example.com/user-service'
-      );
-      expect(classDb.setLink).toHaveBeenCalledWith(
-        'PaymentService',
-        'https://example.com/payment-service'
-      );
-
-      // Verify the classes have the correct links and are in the namespace
-      const userService = classDb.getClass('UserService');
-      const paymentService = classDb.getClass('PaymentService');
-
-      expect(userService.parent).toBe('MyNamespace');
-      expect(userService.link).toBe('https://example.com/user-service');
-      expect(userService.cssClasses).toBe('default clickable');
-
-      expect(paymentService.parent).toBe('MyNamespace');
-      expect(paymentService.link).toBe('https://example.com/payment-service');
-      expect(paymentService.tooltip).toBe('Payment Service Documentation');
-      expect(paymentService.cssClasses).toBe('default clickable');
-    });
-
     it('should handle accTitle and accDescr', function () {
       const str = `classDiagram
             accTitle: My Title

packages/mermaid/src/diagrams/class/parser/classDiagram.jison

@@ -275,25 +275,14 @@ statement
     ;
 
 namespaceStatement
-    : namespaceIdentifier STRUCT_START namespaceBodyStatements STRUCT_STOP          { yy.addClassesToNamespace($1, $3); }
+    : namespaceIdentifier STRUCT_START classStatements STRUCT_STOP          { yy.addClassesToNamespace($1, $3); }
-    | namespaceIdentifier STRUCT_START NEWLINE namespaceBodyStatements STRUCT_STOP  { yy.addClassesToNamespace($1, $4); }
+    | namespaceIdentifier STRUCT_START NEWLINE classStatements STRUCT_STOP  { yy.addClassesToNamespace($1, $4); }
     ;
 
 namespaceIdentifier
     : NAMESPACE namespaceName { $$=$2; yy.addNamespace($2); }
     ;
 
-namespaceBodyStatements
-    : namespaceBodyStatement                                        { $$=[$1].filter(s => s !== null); }
-    | namespaceBodyStatement NEWLINE                                { $$=[$1].filter(s => s !== null); }
-    | namespaceBodyStatement NEWLINE namespaceBodyStatements        { var filtered = [$1].filter(s => s !== null); $3.unshift(...filtered); $$=$3; }
-    ;
-
-namespaceBodyStatement
-    : classStatement                { $$=$1; }
-    | clickStatement               { $$=null; /* clickStatements don't return class names, but are processed for side effects */ }
-    ;
-
 classStatements
     : classStatement                            {$$=[$1]}
     | classStatement NEWLINE                    {$$=[$1]}

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/docs/syntax/classDiagram.md

@@ -452,7 +452,6 @@ classDiagram
 It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
 You would define these actions on a separate line after all classes have been declared.
-If you have classes defined within a namespace, you can also add interaction definitions within the namespace definition, after the class(es) is defined
 
 ```
 action className "reference" "tooltip"