fix:ComponentQueue_Ext throws lexical error

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

.changeset/ten-plums-bet.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Support ComponentQueue_Ext to prevent parsing error

docs/syntax/classDiagram.md

@@ -21,7 +21,7 @@ title: Animal example
 classDiagram
     note "From Duck till Zebra"
     Animal <|-- Duck
-    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan 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<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age

packages/mermaid/src/diagrams/c4/parser/c4Component.spec.js

@@ -0,0 +1,58 @@
+import c4Db from '../c4Db.js';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config.js';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe.each([
+  ['Component', 'component'],
+  ['ComponentDb', 'component_db'],
+  ['ComponentQueue', 'component_queue'],
+  ['Component_Ext', 'external_component'],
+  ['ComponentDb_Ext', 'external_component_db'],
+  ['ComponentQueue_Ext', 'external_component_queue'],
+])('parsing a C4 %s', function (macroName, elementName) {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Component correctly', function () {
+    c4.parser.parse(`C4Component
+title Component diagram for Internet Banking Component
+${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toMatchObject({
+      alias: 'ComponentAA',
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+      label: {
+        text: 'Internet Banking Component',
+      },
+      techn: {
+        text: 'Technology',
+      },
+      typeC4Shape: {
+        text: elementName,
+      },
+    });
+  });
+
+  it('should handle a trailing whitespaces after Component', function () {
+    const whitespace = ' ';
+    const rendered = c4.parser.parse(`C4Component${whitespace}
+title Component diagram for Internet Banking Component${whitespace}
+${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")${whitespace}`);
+
+    expect(rendered).toBe(true);
+  });
+});

packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison

@@ -158,10 +158,10 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 "UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';}
 "UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';}
 
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
 
 <attribute>",,"                           { return 'ATTRIBUTE_EMPTY';}
 <attribute>","                            { }

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

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

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

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<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age