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/gold-ducks-sort.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Proper separation between strings and markdown strings

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

cypress/integration/rendering/flowchart-v2.spec.js

@@ -1174,8 +1174,8 @@ end
     end
     githost["Github, Gitlab, BitBucket, etc."]
     githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["\`1.\`"]
+    a["1."]
-    b["\`- x\`"]
+    b["- x"]
       `;
 
     it('should render raw strings', () => {

cypress/integration/rendering/flowchart.spec.js

@@ -1003,49 +1003,4 @@ graph TD
       }
     );
   });
-  it('#5824: should be able to render string and markdown labels', () => {
-    imgSnapshotTest(
-      `
-flowchart TB
-    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
-    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
-    subgraph subgraph1["\`How to fix **fix**\`"]
-        broken --> B["B"]
-    end
-    githost["Github, Gitlab, BitBucket, etc."]
-    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["1."]
-    b["- x"]
-    `,
-      {
-        flowchart: { htmlLabels: true },
-        securityLevel: 'loose',
-      }
-    );
-  });
-  it('69: should render subgraphs with adhoc list headings', () => {
-    imgSnapshotTest(
-      `
-    graph TB
-      subgraph "1. first"
-        a1-->a2
-      end
-      subgraph 2. second
-        b1-->b2
-      end
-      `,
-      { fontFamily: 'courier' }
-    );
-  });
-  it('70: should render subgraphs with markdown headings', () => {
-    imgSnapshotTest(
-      `
-    graph TB
-      subgraph "\`**strong**\`"
-        a1-->a2
-      end
-      `,
-      { fontFamily: 'courier' }
-    );
-  });
 });

docs/config/setup/mermaid/interfaces/ParseOptions.md

@@ -10,7 +10,7 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
+Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L94)
+Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
 
 If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 The `parseError` function will not be called.

docs/config/setup/mermaid/interfaces/ParseResult.md

@@ -10,7 +10,7 @@
 
 # Interface: ParseResult
 
-Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L97)
+Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L105)
+Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
 
 The config passed as YAML frontmatter or directives
 
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L101)
+Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

docs/config/setup/mermaid/interfaces/RenderResult.md

@@ -10,7 +10,7 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L115)
+Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/me
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L133)
+Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
 
 Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L123)
+Defined in: [packages/mermaid/src/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.
 
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 > **svg**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L119)
+Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
 
 The svg code for the rendered graph.

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<br>can swim<br>can dive<br>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<br>can swim<br>can dive<br>can help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -85,17 +85,6 @@ export class FlowDB implements DiagramDB {
     return common.sanitizeText(txt, this.config);
   }
 
-  private sanitizeNodeLabelType(labelType?: string) {
-    switch (labelType) {
-      case 'markdown':
-      case 'string':
-      case 'text':
-        return labelType;
-      default:
-        return 'markdown';
-    }
-  }
-
   /**
    * Function to lookup domId from id in the graph definition.
    *
@@ -219,7 +208,6 @@ export class FlowDB implements DiagramDB {
 
       if (doc?.label) {
         vertex.text = doc?.label;
-        vertex.labelType = this.sanitizeNodeLabelType(doc?.labelType);
       }
       if (doc?.icon) {
         vertex.icon = doc?.icon;
@@ -279,7 +267,7 @@ export class FlowDB implements DiagramDB {
       if (edge.text.startsWith('"') && edge.text.endsWith('"')) {
         edge.text = edge.text.substring(1, edge.text.length - 1);
       }
-      edge.labelType = this.sanitizeNodeLabelType(linkTextObj.type);
+      edge.labelType = linkTextObj.type;
     }
 
     if (type !== undefined) {
@@ -714,7 +702,7 @@ You have to call mermaid.initialize.`
       title: title.trim(),
       classes: [],
       dir,
-      labelType: this.sanitizeNodeLabelType(_title?.type),
+      labelType: _title.type,
     };
 
     log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);
@@ -1024,7 +1012,6 @@ You have to call mermaid.initialize.`
       const baseNode = {
         id: vertex.id,
         label: vertex.text,
-        labelType: vertex.labelType,
         labelStyle: '',
         parentId,
         padding: config.flowchart?.padding || 8,
@@ -1101,7 +1088,6 @@ You have to call mermaid.initialize.`
         id: subGraph.id,
         label: subGraph.title,
         labelStyle: '',
-        labelType: subGraph.labelType,
         parentId: parentDB.get(subGraph.id),
         padding: 8,
         cssCompiledStyles: this.getCompiledStyles(subGraph.classes),
@@ -1133,7 +1119,6 @@ You have to call mermaid.initialize.`
         end: rawEdge.end,
         type: rawEdge.type ?? 'normal',
         label: rawEdge.text,
-        labelType: rawEdge.labelType,
         labelpos: 'c',
         thickness: rawEdge.stroke,
         minlen: rawEdge.length,

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.jison

@@ -152,17 +152,29 @@ that id.
 ","                          return 'COMMA';
 "*"                          return 'MULT';
 
-<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'; }
+<INITIAL>\s*[xo<]?\-\-+[-xo>](?=[A-Z])                    { return 'LINK'; }
-<edgeText>[^-]|\-(?!\-)+                           return 'EDGE_TEXT';
+<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,thickEdgeText>\s*[xo<]?\=\=+[=xo>]\s+            { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\=\=\s*                           { this.pushState("thickEdgeText"); return 'START_LINK'; }
+<INITIAL>\s*[xo<]?\=\=+[=xo>](?=[A-Z])                    { return 'LINK'; }
-<thickEdgeText>[^=]|\=(?!=)                         return 'EDGE_TEXT';
+<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,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?\s+         { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\.\s*                            { this.pushState("dottedEdgeText"); return 'START_LINK'; }
+<INITIAL>\s*[xo<]?\-?\.+\-[xo>]?(?=[A-Z])                  { return 'LINK'; }
-<dottedEdgeText>[^\.]|\.(?!-)                        return 'EDGE_TEXT';
+<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/flowchart/types.ts

@@ -29,7 +29,7 @@ export interface FlowVertex {
   domId: string;
   haveCallback?: boolean;
   id: string;
-  labelType: 'markdown' | 'string' | 'text';
+  labelType: 'text';
   link?: string;
   linkTarget?: string;
   props?: any;
@@ -62,7 +62,7 @@ export interface FlowEdge {
   style?: string[];
   length?: number;
   text: string;
-  labelType: 'markdown' | 'string' | 'text';
+  labelType: 'text';
   classes: string[];
   id?: string;
   animation?: 'fast' | 'slow';

packages/mermaid/src/diagrams/kanban/kanbanDb.ts

@@ -62,7 +62,6 @@ const getData = function () {
     const node = {
       id: section.id,
       label: sanitizeText(section.label ?? '', conf),
-      labelType: 'markdown',
       isGroup: true,
       ticket: section.ticket,
       shape: 'kanbanSection',
@@ -77,7 +76,6 @@ const getData = function () {
         id: item.id,
         parentId: section.id,
         label: sanitizeText(item.label ?? '', conf),
-        labelType: 'markdown',
         isGroup: false,
         ticket: item?.ticket,
         priority: item?.priority,

packages/mermaid/src/diagrams/mindmap/mindmapDb.ts

@@ -260,7 +260,6 @@ export class MindmapDB {
       id: node.id.toString(),
       domId: 'node_' + node.id.toString(),
       label: node.descr,
-      labelType: 'markdown',
       isGroup: false,
       shape: getShapeFromType(node.type),
       width: node.width,

packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts

@@ -16,7 +16,6 @@ export interface MindmapNode {
   x?: number;
   y?: number;
   isRoot?: boolean;
-  labelType?: string;
 }
 
 export type FilledMindMapNode = RequiredDeep<MindmapNode>;

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

@@ -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<br>can swim<br>can dive<br>can help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -30,17 +30,11 @@ const rect = async (parent, node) => {
   // Create the label and insert it after the rect
   const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
 
-  let text;
+  const text = await createText(labelEl, node.label, {
-  if (node.labelType === 'markdown') {
+    style: node.labelStyle,
-    text = await createText(labelEl, node.label, {
+    useHtmlLabels,
-      style: node.labelStyle,
+    isNode: true,
-      useHtmlLabels,
+  });
-      isNode: true,
-    });
-  } else {
-    const labelElement = await createLabel(node.label, node.labelStyle, false, true);
-    text = labelEl.node()?.appendChild(labelElement);
-  }
 
   // Get the size of the label
   let bbox = text.getBBox();

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -29,7 +29,7 @@ import {
 import rough from 'roughjs';
 import createLabel from './createLabel.js';
 import { addEdgeMarkers } from './edgeMarker.ts';
-import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';
+import { isLabelStyle, styles2String } from './shapes/handDrawnShapeStyles.js';
 
 export const edgeLabels = new Map();
 export const terminalLabels = new Map();
@@ -47,16 +47,14 @@ export const getLabelStyles = (styleArray) => {
 export const insertEdgeLabel = async (elem, edge) => {
   let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
 
-  const labelElement =
+  const { labelStyles } = styles2String(edge);
-    edge.labelType === 'markdown'
+  edge.labelStyle = labelStyles;
-      ? await createText(elem, edge.label, {
+  const labelElement = await createText(elem, edge.label, {
-          style: getLabelStyles(edge.labelStyle),
+    style: edge.labelStyle,
-          useHtmlLabels,
+    useHtmlLabels,
-          addSvgBackground: true,
+    addSvgBackground: true,
-          isNode: false,
+    isNode: false,
-        })
+  });
-      : await createLabel(edge.label, getLabelStyles(edge.labelStyle), undefined, false);
-
   log.info('abc82', edge, edge.labelType);
 
   // Create outer g, edgeLabel, this will be positioned after graph layout

packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts

@@ -1,4 +1,3 @@
-import createLabel from '../createLabel.js';
 import { createText } from '../../createText.js';
 import type { Node } from '../../types.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
@@ -14,7 +13,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
   _classes?: string
 ) => {
   let cssClasses;
-  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
+  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.htmlLabels);
   if (!_classes) {
     cssClasses = 'node default';
   } else {
@@ -41,26 +40,14 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
     label = typeof node.label === 'string' ? node.label : node.label[0];
   }
 
-  let text;
+  const text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
-  if (node.labelType === 'markdown') {
+    useHtmlLabels,
-    text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
+    width: node.width || getConfig().flowchart?.wrappingWidth,
-      useHtmlLabels,
+    // @ts-expect-error -- This is currently not used. Should this be `classes` instead?
-      width: node.width || getConfig().flowchart?.wrappingWidth,
+    cssClasses: 'markdown-node-label',
-      // @ts-expect-error -- This is currently not used. Should this be `classes` instead?
+    style: node.labelStyle,
-      cssClasses: 'markdown-node-label',
+    addSvgBackground: !!node.icon || !!node.img,
-      style: node.labelStyle,
+  });
-      addSvgBackground: !!node.icon || !!node.img,
-    });
-  } else {
-    const labelElement = await createLabel(
-      sanitizeText(decodeEntities(label), getConfig()),
-      node.labelStyle,
-      false,
-      true
-    );
-    text = labelEl.node()?.appendChild(labelElement);
-  }
-
   // Get the size of the label
   let bbox = text.getBBox();
   const halfPadding = (node?.padding ?? 0) / 2;

packages/mermaid/src/types.ts

@@ -1,7 +1,6 @@
 export interface NodeMetaData {
   shape?: string;
   label?: string;
-  labelType?: string;
   icon?: string;
   form?: string;
   pos?: 't' | 'b';