diff --git a/.changeset/clean-wolves-turn.md b/.changeset/clean-wolves-turn.md new file mode 100644 index 000000000..7a44c1c16 --- /dev/null +++ b/.changeset/clean-wolves-turn.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Render newlines as spaces in class diagrams diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index bd2a96b34..6cea402f8 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -524,5 +524,18 @@ describe('Class diagram', () => { `, {} ); + it('should handle an empty class body with empty braces', () => { + imgSnapshotTest( + ` classDiagram + class FooBase~T~ {} + class Bar { + +Zip + +Zap() + } + FooBase <|-- Ba + `, + { flowchart: { defaultRenderer: 'elk' } } + ); + }); }); }); diff --git a/docs/config/faq.md b/docs/config/faq.md index db775e438..6d27b658e 100644 --- a/docs/config/faq.md +++ b/docs/config/faq.md @@ -6,7 +6,7 @@ # Frequently Asked Questions -1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/556#issuecomment-363182217) +1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/1433#issuecomment-1991554712) 2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785) 3. [How to fix tooltip misplacement issue?](https://github.com/mermaid-js/mermaid/issues/542#issuecomment-3343564621) 4. [How to specify gantt diagram xAxis format?](https://github.com/mermaid-js/mermaid/issues/269#issuecomment-373229136) diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index 7c88f2e41..aa5e514e0 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -1070,6 +1070,14 @@ describe('given a class diagram with members and methods ', function () { parser.parse(str); }); + it('should handle an empty class body with {}', function () { + const str = 'classDiagram\nclass EmptyClass {}'; + parser.parse(str); + const actual = parser.yy.getClass('EmptyClass'); + expect(actual.label).toBe('EmptyClass'); + expect(actual.members.length).toBe(0); + expect(actual.methods.length).toBe(0); + }); }); }); diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index 0f971c8b9..9a1f991a7 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -293,6 +293,7 @@ classStatement : classIdentifier | classIdentifier STYLE_SEPARATOR alphaNumToken {yy.setCssClass($1, $3);} | classIdentifier STRUCT_START members STRUCT_STOP {yy.addMembers($1,$3);} + | classIdentifier STRUCT_START STRUCT_STOP {} | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);} ; @@ -301,8 +302,15 @@ classIdentifier | CLASS className classLabel {$$=$2; yy.addClass($2);yy.setClassLabel($2, $3);} ; + +emptyBody + : + | SPACE emptyBody + | NEWLINE emptyBody + ; + annotationStatement - :ANNOTATION_START alphaNumToken ANNOTATION_END className { yy.addAnnotation($4,$2); } + : ANNOTATION_START alphaNumToken ANNOTATION_END className { yy.addAnnotation($4,$2); } ; members diff --git a/packages/mermaid/src/docs/config/faq.md b/packages/mermaid/src/docs/config/faq.md index 6d1261fc1..4acf0c3d3 100644 --- a/packages/mermaid/src/docs/config/faq.md +++ b/packages/mermaid/src/docs/config/faq.md @@ -1,6 +1,6 @@ # Frequently Asked Questions -1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/556#issuecomment-363182217) +1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/1433#issuecomment-1991554712) 1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785) 1. [How to fix tooltip misplacement issue?](https://github.com/mermaid-js/mermaid/issues/542#issuecomment-3343564621) 1. [How to specify gantt diagram xAxis format?](https://github.com/mermaid-js/mermaid/issues/269#issuecomment-373229136)