From 3c7fd9561767ee6375e5b9cb7f727d71ad6da51c Mon Sep 17 00:00:00 2001 From: yari-dewalt Date: Mon, 4 Nov 2024 10:15:51 -0800 Subject: [PATCH 01/16] Remove black stroke from lollipops so it matches edge paths --- cypress/platform/yari.html | 4 ++++ .../mermaid/src/rendering-util/rendering-elements/markers.js | 2 -- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/cypress/platform/yari.html b/cypress/platform/yari.html index 501541c3b..ed3dac504 100644 --- a/cypress/platform/yari.html +++ b/cypress/platform/yari.html @@ -603,6 +603,10 @@ 
+          ---
+            config:
+              theme: dark
+          ---
           classDiagram
             test ()--() test2
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js index b2592e20e..d54356a6c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js +++ b/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) From 4ff2ae9f4ec7616770f818e5b00aa48cf877e074 Mon Sep 17 00:00:00 2001 From: yari-dewalt Date: Wed, 6 Nov 2024 09:00:21 -0800 Subject: [PATCH 02/16] Add styles for clusters and remove hard-coded styling for namespace nodes --- .../mermaid/src/diagrams/class/classDb.ts | 2 +- packages/mermaid/src/diagrams/class/styles.js | 24 +++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index 569943736..168d89023 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -593,7 +593,7 @@ export const getData = () => { 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); diff --git a/packages/mermaid/src/diagrams/class/styles.js b/packages/mermaid/src/diagrams/class/styles.js index 4a888a265..0fad0258f 100644 --- a/packages/mermaid/src/diagrams/class/styles.js +++ b/packages/mermaid/src/diagrams/class/styles.js @@ -11,6 +11,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}; } From 47297f7c26953c8f341adf2a5dd1596c1fd779d6 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 26 Feb 2025 17:49:51 +0000 Subject: [PATCH 03/16] [autofix.ci] apply automated fixes --- packages/mermaid/src/diagrams/class/classDb.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index 7b4ae566e..b73241ffe 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -520,7 +520,7 @@ export class ClassDB implements DiagramDB { public setDirection(dir: string) { this.direction = dir; } - + /** * Function called by parser when a namespace definition has been found. * From 18703782ee9497673ab1c223ba069b83f2eafa80 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 11 Aug 2025 15:52:49 +0530 Subject: [PATCH 04/16] Fixed edge animation for hand drawn shapes --- .../rendering/flowchart-handDrawn.spec.js | 15 ++++++++++++++ .../integration/rendering/flowchart.spec.js | 12 +++++++++++ .../rendering-elements/edges.js | 20 +++++++++++-------- 3 files changed, 39 insertions(+), 8 deletions(-) diff --git a/cypress/integration/rendering/flowchart-handDrawn.spec.js b/cypress/integration/rendering/flowchart-handDrawn.spec.js index 49c55c628..e5a188a7b 100644 --- a/cypress/integration/rendering/flowchart-handDrawn.spec.js +++ b/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' } + ); + 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'); + }); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 40713ac4e..6a655096b 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -774,6 +774,18 @@ 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 }`); + // 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( ` diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index db48e313c..f3b029d5e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -565,6 +565,14 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod const edgeStyles = Array.isArray(edge.style) ? 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; + } + if (edge.look === 'handDrawn') { const rc = rough.svg(elem); Object.assign([], lineData); @@ -579,7 +587,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod svgPath = select(svgPathNode) .select('path') .attr('id', edge.id) - .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')) + .attr( + 'class', + ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '') + ) .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : ''); let d = svgPath.attr('d'); svgPath.attr('d', d); @@ -587,13 +598,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod } 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; svgPath = elem From 32723b2de13474d7d13e9292e6f801e9874936ab Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 11 Aug 2025 15:59:07 +0530 Subject: [PATCH 05/16] Added change set --- .changeset/brave-memes-flash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/brave-memes-flash.md diff --git a/.changeset/brave-memes-flash.md b/.changeset/brave-memes-flash.md new file mode 100644 index 000000000..f127dd97e --- /dev/null +++ b/.changeset/brave-memes-flash.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +Fix: Support edge animation in hand drawn look From e6fb4a84da34a03e8a95e21d5f7d61036f650ad7 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 11 Aug 2025 16:32:03 +0530 Subject: [PATCH 06/16] code refactor --- .changeset/brave-memes-flash.md | 2 +- .../src/rendering-util/rendering-elements/edges.js | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/.changeset/brave-memes-flash.md b/.changeset/brave-memes-flash.md index f127dd97e..720cd7202 100644 --- a/.changeset/brave-memes-flash.md +++ b/.changeset/brave-memes-flash.md @@ -2,4 +2,4 @@ 'mermaid': patch --- -Fix: Support edge animation in hand drawn look +fix: Support edge animation in hand drawn look diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index f3b029d5e..77947a114 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -567,10 +567,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod let animationClass = ''; if (edge.animate) { - animationClass = ' edge-animation-fast'; + animationClass = 'edge-animation-fast'; } if (edge.animation) { - animationClass = ' edge-animation-' + edge.animation; + animationClass = 'edge-animation-' + edge.animation; } if (edge.look === 'handDrawn') { @@ -589,7 +589,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod .attr('id', edge.id) .attr( 'class', - ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '') + ' ' + + strokeClasses + + (edge.classes ? ' ' + edge.classes : '') + + (animationClass ? ' ' + animationClass : '') ) .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : ''); let d = svgPath.attr('d'); @@ -606,7 +609,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod .attr('id', edge.id) .attr( 'class', - ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '') + ' ' + + strokeClasses + + (edge.classes ? ' ' + edge.classes : '') + + (animationClass ? ' ' + animationClass : '') ) .attr('style', pathStyle); strokeColor = pathStyle.match(/stroke:([^;]+)/)?.[1]; From 56cc12690f4369eea69d76182e510b1523ecb540 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Fri, 5 Sep 2025 12:47:07 +0530 Subject: [PATCH 07/16] Added option to skip screenshot for cypress tests --- cypress/helpers/util.ts | 7 +++++-- cypress/integration/rendering/flowchart-handDrawn.spec.js | 2 +- cypress/integration/rendering/flowchart.spec.js | 7 +++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index 81b7036af..79be26dd9 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -6,6 +6,7 @@ interface CypressConfig { listUrl?: boolean; listId?: string; name?: string; + screenshot?: boolean; } type CypressMermaidConfig = MermaidConfig & CypressConfig; @@ -92,7 +93,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, '-'); @@ -105,7 +106,9 @@ export const openURLAndVerifyRendering = ( cy.get('svg').should(validation); } - verifyScreenshot(name); + if (screenshot) { + verifyScreenshot(name); + } }; export const verifyScreenshot = (name: string): void => { diff --git a/cypress/integration/rendering/flowchart-handDrawn.spec.js b/cypress/integration/rendering/flowchart-handDrawn.spec.js index e5a188a7b..d3ca1d1f1 100644 --- a/cypress/integration/rendering/flowchart-handDrawn.spec.js +++ b/cypress/integration/rendering/flowchart-handDrawn.spec.js @@ -1039,7 +1039,7 @@ graph TD style C stroke-width:4px,stroke-dasharray: 5 L_A_B_0@{ animation: slow } L_B_D_0@{ animation: fast }`, - { look: 'handDrawn' } + { 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'); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 6a655096b..8e4adb30d 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -775,13 +775,16 @@ describe('Graph', () => { }); }); it('40: should add edge animation', () => { - renderGraph(` + 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 }`); + 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'); From 1a9d45abf0a991c40985021e8b523c32b46dd897 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 24 Sep 2025 12:22:31 +0530 Subject: [PATCH 08/16] fix: allow direction TD inside subgraphs on-behalf-of: @Mermaid-Chart --- .changeset/busy-mirrors-try.md | 5 +++++ cypress/integration/rendering/flowchart.spec.js | 15 +++++++++++++++ .../src/diagrams/flowchart/parser/flow.jison | 3 +++ .../diagrams/flowchart/parser/subgraph.spec.js | 17 +++++++++++++++++ 4 files changed, 40 insertions(+) create mode 100644 .changeset/busy-mirrors-try.md diff --git a/.changeset/busy-mirrors-try.md b/.changeset/busy-mirrors-try.md new file mode 100644 index 000000000..7e5d3b632 --- /dev/null +++ b/.changeset/busy-mirrors-try.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Resolved parsing error where direction TD was not recognized within subgraphs diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 40713ac4e..6e19da973 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -973,4 +973,19 @@ graph TD } ); }); + + it('70: should render a subgraph with direction TD', () => { + imgSnapshotTest( + ` + flowchart LR + subgraph A + direction TD + a --> b + end + `, + { + fontFamily: 'courier', + } + ); + }); }); diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison index 7b2f4386a..7340cf8d3 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison +++ b/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'};} ; %% diff --git a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js index 9339a6e2c..1273c4d7f 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js +++ b/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'); + }); }); From 6d0650918f6825d0ff09f15940dd300cc5198c7c Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 8 Oct 2025 13:09:30 +0530 Subject: [PATCH 09/16] fix: handle participant names with spaces correctly in sequenceDiagram on-behalf-of: @Mermaid-Chart --- .../diagrams/sequence/parser/sequenceDiagram.jison | 8 +++++--- .../src/diagrams/sequence/sequenceDiagram.spec.js | 12 ++++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison index f1364895b..e932f604f 100644 --- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -32,13 +32,14 @@ [^\}]+ { return 'CONFIG_CONTENT'; } \} { this.popState(); this.popState(); return 'CONFIG_END'; } [^\<->\->:\n,;@\s]+(?=\@\{) { yytext = yytext.trim(); return 'ACTOR'; } -[^\<->\->:\n,;@]+?([\-]*[^\<->\->:\n,;@]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } +[^<>:\n,;@]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } +[^<>:\n,;@]+(?=\s*[\n;#]|$) { yytext = yytext.trim(); this.popState(); return 'ACTOR'; } +[^<>:\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'; } -[^<\->\->:\n,;]+?([\-]*[^<\->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } "as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; } (?:) { 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 @@ -411,4 +413,4 @@ text2 : TXT {$$ = yy.parseMessage($1.trim().substring(1)) } ; -%% +%% \ No newline at end of file diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js index 5f4e06dcd..cabcd7db5 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/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
service decription + `); + } catch (e) { + error = true; + } + expect(error).toBe(true); + }); }); }); From fa15ce8502d2f1d72787998d9d944c5a98b992dd Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 8 Oct 2025 13:23:28 +0530 Subject: [PATCH 10/16] chore: added changeset on-behalf-of: @Mermaid-Chart --- .changeset/curly-apes-prove.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curly-apes-prove.md diff --git a/.changeset/curly-apes-prove.md b/.changeset/curly-apes-prove.md new file mode 100644 index 000000000..2acf3d1a3 --- /dev/null +++ b/.changeset/curly-apes-prove.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Improve participant parsing and prevent recursive loops on invalid syntax From 69b338d8af4fcfb22add30aca747f1aed3486554 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Thu, 9 Oct 2025 11:37:05 +0530 Subject: [PATCH 11/16] fix: formatting issues Co-authored-by: omkarht --- .../src/diagrams/sequence/parser/sequenceDiagram.jison | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison index e932f604f..cfc108b24 100644 --- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -32,9 +32,9 @@ [^\}]+ { return 'CONFIG_CONTENT'; } \} { this.popState(); this.popState(); return 'CONFIG_END'; } [^\<->\->:\n,;@\s]+(?=\@\{) { yytext = yytext.trim(); return 'ACTOR'; } -[^<>:\n,;@]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } -[^<>:\n,;@]+(?=\s*[\n;#]|$) { yytext = yytext.trim(); this.popState(); return 'ACTOR'; } -[^<>:\n,;@]*\<[^\n]* { this.popState(); return 'INVALID'; } +[^<>:\n,;@]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } +[^<>:\n,;@]+(?=\s*[\n;#]|$) { yytext = yytext.trim(); this.popState(); return 'ACTOR'; } +[^<>:\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'; } From 6fecb985e8654bafd8073075f3a9382cbd29f10b Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Thu, 9 Oct 2025 11:50:44 +0530 Subject: [PATCH 12/16] fix: failing argos on-behalf-of: @Mermaid-Chart --- .../mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison index cfc108b24..214189a5b 100644 --- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -32,7 +32,7 @@ [^\}]+ { return 'CONFIG_CONTENT'; } \} { this.popState(); this.popState(); return 'CONFIG_END'; } [^\<->\->:\n,;@\s]+(?=\@\{) { yytext = yytext.trim(); return 'ACTOR'; } -[^<>:\n,;@]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } +[^<>:\n,;@\s]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } [^<>:\n,;@]+(?=\s*[\n;#]|$) { yytext = yytext.trim(); this.popState(); return 'ACTOR'; } [^<>:\n,;@]*\<[^\n]* { this.popState(); return 'INVALID'; } "box" { this.begin('LINE'); return 'box'; } From ac411a7d7e028729f374c62ada72e9989396c985 Mon Sep 17 00:00:00 2001 From: Antonio Spadaro <9268789+ilovelinux@users.noreply.github.com> Date: Sat, 11 Oct 2025 22:53:58 +0200 Subject: [PATCH 13/16] Fix class diagram example --- docs/syntax/classDiagram.md | 4 ++-- packages/mermaid/src/docs/syntax/classDiagram.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md index 2067cc97c..ffef1e5c3 100644 --- a/docs/syntax/classDiagram.md +++ b/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
can swim
can dive
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
can swim
can dive
can help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md index 7ef81b96f..ed69bd223 100644 --- a/packages/mermaid/src/docs/syntax/classDiagram.md +++ b/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
can swim
can dive
can help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age From 7def6eecbf3d7f17d8ad2f00f6e393d43473c6b6 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Mon, 13 Oct 2025 18:15:38 +0530 Subject: [PATCH 14/16] 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 15/16] 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 16/16] 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);