From 7def6eecbf3d7f17d8ad2f00f6e393d43473c6b6 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Mon, 13 Oct 2025 18:15:38 +0530 Subject: [PATCH 1/3] fix: correct viewBox casing in radar and packet diagram on-behalf-of: @Mermaid-Chart --- packages/mermaid/src/diagrams/packet/renderer.ts | 2 +- packages/mermaid/src/diagrams/radar/renderer.ts | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 25445a228..95226cf12 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/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()) { diff --git a/packages/mermaid/src/diagrams/radar/renderer.ts b/packages/mermaid/src/diagrams/radar/renderer.ts index 7324a3a44..247ded66d 100644 --- a/packages/mermaid/src/diagrams/radar/renderer.ts +++ b/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): SVGGroup => x: config.marginLeft + config.width / 2, y: config.marginTop + config.height / 2, }; - // Initialize the SVG - svg - .attr('viewbox', `0 0 ${totalWidth} ${totalHeight}`) - .attr('width', totalWidth) - .attr('height', totalHeight); + configureSvgSize(svg, totalHeight, totalWidth, config.useMaxWidth ?? true); + + svg.attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`); // g element to center the radar chart return svg.append('g').attr('transform', `translate(${center.x}, ${center.y})`); }; From 60f633101cd2e55ee80ad2250ae57d4c970430e5 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Mon, 13 Oct 2025 19:14:22 +0530 Subject: [PATCH 2/3] chore: added changeset on-behalf-of: @Mermaid-Chart --- .changeset/chilly-words-march.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chilly-words-march.md diff --git a/.changeset/chilly-words-march.md b/.changeset/chilly-words-march.md new file mode 100644 index 000000000..54c0b4ebf --- /dev/null +++ b/.changeset/chilly-words-march.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Correct viewBox casing and make SVGs responsive From 76e17ffd203939e2fee6e84d1dc389967b3b47e5 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 15 Oct 2025 18:56:49 +0530 Subject: [PATCH 3/3] fix: add validation to ensure correct casing of 'viewBox' in all rendering tests on-behalf-of: @Mermaid-Chart --- cypress/helpers/util.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index ab4bbef64..035526a40 100644 --- a/cypress/helpers/util.ts +++ b/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);