diff --git a/.changeset/ten-plums-bet.md b/.changeset/ten-plums-bet.md new file mode 100644 index 000000000..f00a41090 --- /dev/null +++ b/.changeset/ten-plums-bet.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Support ComponentQueue_Ext to prevent parsing error diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Component.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Component.spec.js new file mode 100644 index 000000000..70d93d8be --- /dev/null +++ b/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); + }); +}); diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison index 63856f044..f0ce80d33 100644 --- a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison +++ b/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';} -<> return "EOF_IN_STRUCT"; -[(][ ]*[,] { this.begin("attribute"); return "ATTRIBUTE_EMPTY";} -[(] { this.begin("attribute"); } -[)] { this.popState();this.popState();} +<> return "EOF_IN_STRUCT"; +[(][ ]*[,] { this.begin("attribute"); return "ATTRIBUTE_EMPTY";} +[(] { this.begin("attribute"); } +[)] { this.popState();this.popState();} ",," { return 'ATTRIBUTE_EMPTY';} "," { }