Fix flowchart arrow parsing to support lowercase, digits, and edge text

- Added lookahead patterns for arrows followed by lowercase letters (fixes #2492)
- Added lookahead patterns for arrows followed by digits (fixes Sample 4 & 5)
- Preserved edge text functionality with pipe delimiter lookahead
- Applied fix to all arrow types: solid (--), thick (==), dotted (-.-)
- Added comprehensive test coverage (21 tests total)

.changeset/chilly-words-march.md

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

.changeset/eager-pigs-help.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Handle backslash parsing in math formulas within new flowchart shape syntax

CHANGELOG.md

@@ -1 +1 @@
-./packages/mermaid/CHANGELOG.md
+./packages/mermaid/CHANGELOG.md

CONTRIBUTING.md

@@ -1 +1 @@
-./packages/mermaid/src/docs/community/contributing.md
+./packages/mermaid/src/docs/community/contributing.md

cypress/helpers/util.ts

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

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

@@ -266,4 +266,156 @@ 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

@@ -0,0 +1,129 @@
+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-node-data.spec.js

@@ -144,18 +144,6 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[0].shape).toEqual('rounded');
     expect(data4Layout.nodes[0].label).toEqual('DD');
   });
-  it('should handle mathematical formulas with backslashes in quoted strings', function () {
-    /* eslint-disable no-useless-escape */
-    const res = flow.parser.parse(`flowchart RL
-    H@{ shape: rect, label: "$$\sin x$$"}`);
-    /* eslint-enable no-useless-escape */
-
-    const data4Layout = flow.parser.yy.getData();
-
-    expect(data4Layout.nodes.length).toBe(1);
-    expect(data4Layout.nodes[0].shape).toEqual('rect');
-    expect(data4Layout.nodes[0].label).toEqual('$$sin x$$');
-  });
   it('should be possible to link to a node with more data', function () {
     const res = flow.parser.parse(`flowchart TB
       A --> D@{

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

@@ -53,7 +53,6 @@ accDescr\s*"{"\s*                               { this.begin("acc_descr_multilin
                                                     // console.log('shapeData', yytext);
                                                     const re = /\n\s*/g;
                                                     yytext = yytext.replace(re,"<br/>");
-                                                    yytext = yytext.replace(/\\/g, "\\\\");
                                                     return 'SHAPE_DATA'}
 <shapeData>[^}^"]+                                {
                                                     // console.log('shapeData', yytext);
@@ -153,17 +152,29 @@ that id.
 ","                          return 'COMMA';
 "*"                          return 'MULT';
 
-<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,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>\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<]?\=\=\s*                           { this.pushState("thickEdgeText"); return 'START_LINK'; }
-<thickEdgeText>[^=]|\=(?!=)                         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>\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<]?\-\.\s*                            { this.pushState("dottedEdgeText"); return 'START_LINK'; }
-<dottedEdgeText>[^\.]|\.(?!-)                        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>\s*[xo<]?\-\.\s*                               { this.pushState("dottedEdgeText"); return 'START_LINK'; }
+<dottedEdgeText>[^\.]|\.(?!-)                           return 'EDGE_TEXT';
 
 
 <*>\s*\~\~[\~]+\s*              return 'LINK';

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
-  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})`);
 };