marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-30 13:46:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update class diagrams to handle comments

Browse Source 
updated regex in parser to correctly handle comments in class diagrams.  Also updated flowchart parser to remove unused elements for comments, as well as modifying the regex to match
This commit is contained in:
Justin Greywolf
2019-11-26 11:18:32 -08:00
parent b57492c1c6
commit 753bd7e1d9
6 changed files with 163 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
cypress/integration/rendering/classDiagram.spec.js
View File

@@ -2,7 +2,7 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('Class diagram', () => {
it('should render a simple class diagram', () => {
it('1: should render a simple class diagram', () => {
imgSnapshotTest(
`
classDiagram
@@ -33,7 +33,8 @@ describe('Class diagram', () => {
);
cy.get('svg');
});
it('should render a simple class diagrams with cardinality', () => {
it('2: should render a simple class diagrams with cardinality', () => {
imgSnapshotTest(
`
classDiagram
@@ -132,4 +133,34 @@ describe('Class diagram', () => {
);
cy.get('svg');
});
it('4: should render a simple class diagram with comments', () => {
imgSnapshotTest(
`
classDiagram
%% this is a comment
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
{}
);
cy.get('svg');
});
});

19
cypress/integration/rendering/flowchart.spec.js
View File

@@ -14,6 +14,7 @@ describe('Flowcart', () => {
{ flowchart: { htmlLabels: false } }
);
});
it('2: should render a simple flowchart with htmlLabels', () => {
imgSnapshotTest(
`graph TD
@@ -26,6 +27,7 @@ describe('Flowcart', () => {
{ flowchart: { htmlLabels: true } }
);
});
it('3: should render a simple flowchart with line breaks', () => {
imgSnapshotTest(
`
@@ -99,6 +101,7 @@ describe('Flowcart', () => {
{}
);
});
it('6: should render a flowchart full of icons', () => {
imgSnapshotTest(
`
@@ -178,6 +181,7 @@ describe('Flowcart', () => {
{}
);
});
it('8: should render subgraphs', () => {
imgSnapshotTest(
`
@@ -356,6 +360,7 @@ describe('Flowcart', () => {
}
);
});
it('13: should render hexagons', () => {
imgSnapshotTest(
`
@@ -377,4 +382,18 @@ describe('Flowcart', () => {
}
);
});
it('14: should render a simple flowchart with comments', () => {
imgSnapshotTest(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
%% this is a comment
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { htmlLabels: false } }
);
});
});

200
src/diagrams/class/classDiagram.spec.js
View File

@@ -19,6 +19,7 @@ describe('class diagram, ', function () {
parser.parse(str);
});
it('should handle relation definition of different types and directions', function () {
const str =
'classDiagram\n' +
@@ -76,6 +77,7 @@ describe('class diagram, ', function () {
parser.parse(str);
});
it('should handle parsing of method statements grouped by brackets', function () {
const str =
'classDiagram\n' +
@@ -124,9 +126,106 @@ describe('class diagram, ', function () {
parser.parse(str);
});
it('should handle a comment', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'%% Comment\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
describe('when fetching data from an classDiagram graph it', function () {
it('should handle comments at the start', function () {
const str =
'%% Comment\n' +
'classDiagram\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
it('should handle comments at the end', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'\n}' +
'%% Comment\n';
parser.parse(str);
});
it('should handle comments at the end no trailing newline', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}\n' +
'%% Comment';
parser.parse(str);
});
it('should handle a comment with multiple line feeds', function () {
const str =
'classDiagram\n\n\n' +
'%% Comment\n\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
it('should handle a comment with mermaid class diagram code in them', function () {
const str =
'classDiagram\n' +
'%% Comment Class01 <|-- Class02\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
it('should handle a comment inside brackets', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'%% Comment Class01 <|-- Class02\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
});
describe('when fetching data from a classDiagram graph it', function () {
beforeEach(function () {
parser.yy = classDb;
parser.yy.clear();
@@ -144,6 +243,7 @@ describe('class diagram, ', function () {
expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
});
it('should handle relation definitions AGGREGATION and dotted line', function () {
const str = 'classDiagram\n' + 'Class01 o.. Class02';
@@ -157,6 +257,7 @@ describe('class diagram, ', function () {
expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.DOTTED_LINE);
});
it('should handle relation definitions COMPOSITION on both sides', function () {
const str = 'classDiagram\n' + 'Class01 *--* Class02';
@@ -170,6 +271,7 @@ describe('class diagram, ', function () {
expect(relations[0].relation.type2).toBe(classDb.relationType.COMPOSITION);
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
});
it('should handle relation definitions no types', function () {
const str = 'classDiagram\n' + 'Class01 -- Class02';
@@ -183,6 +285,7 @@ describe('class diagram, ', function () {
expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
});
it('should handle relation definitions with type only on right side', function () {
const str = 'classDiagram\n' + 'Class01 --|> Class02';
@@ -297,100 +400,5 @@ describe('class diagram, ', function () {
expect(testClass.methods[0]).toBe('test()');
expect(testClass.methods[1]).toBe('foo()');
});
it('should handle a comment', function () {
const str =
'classDiagram\n' +
'%% Comment \n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
// it('should handle comments at the start', function () {
// const str =
// '%% Comment\n' +
// 'class Class1 {\n' +
// 'int : test\n' +
// 'string : foo\n' +
// 'test()\n' +
// 'foo()\n' +
// '}';
// parser.parse(str);
// });
// it('should handle comments at the end', function () {
// const str =
// 'classDiagram\n' +
// 'class Class1 {\n' +
// 'int : test\n' +
// 'string : foo\n' +
// 'test()\n' +
// 'foo()\n' +
// '\n}' +
// '%% Comment\n';
// parser.parse(str);
// });
// it('should handle comments at the end no trailing newline', function () {
// const str =
// 'class Class1 {\n' +
// 'int : test\n' +
// 'string : foo\n' +
// 'test()\n' +
// 'foo()\n' +
// '}\n' +
// '%% Comment';
// parser.parse(str);
// });
// it('should handle comments at the end many trailing newlines', function () {
// const str =
// 'classDiagram\n' +
// '%% Comment\n\n\n\n\n' +
// 'class Class1 {\n' +
// 'int : test\n' +
// 'string : foo\n' +
// 'test()\n' +
// 'foo()\n' +
// '}';
// parser.parse(str);
// });
// it('should handle a comment with blank rows in-between', function () {
// const str =
// 'classDiagram\n\n\n' +
// '%% Comment\n\n' +
// 'class Class1 {\n' +
// 'int : test\n' +
// 'string : foo\n' +
// 'test()\n' +
// 'foo()\n' +
// '}';
// parser.parse(str);
// });
// it('should handle a comment with mermaid class diagram code in them', function () {
// const str =
// 'classDiagram\n' +
// '%% Comment Class01 <|-- Class02\n' +
// 'class Class1 {\n' +
// 'int : test\n' +
// 'string : foo\n' +
// 'test()\n' +
// 'foo()\n' +
// '}';
// parser.parse(str);
//});
});
});

2
src/diagrams/class/parser/classDiagram.jison
View File

@@ -9,7 +9,7 @@
%x string struct
%%
\%\%[^\n]* /* do nothing */
\%\%[^\n]*\n* /* do nothing */
\n+ return 'NEWLINE';
\s+ /* skip whitespace */
"classDiagram" return 'CLASS_DIAGRAM';

10
src/diagrams/flowchart/parser/flow-comments.spec.js
View File

@@ -12,8 +12,8 @@ describe('[Comments] when parsing', () => {
flow.parser.yy.clear();
});
it('should handle a comments', function() {
const res = flow.parser.parse('graph TD;\n%% CComment\n A-->B;');
it('should handle comments', function() {
const res = flow.parser.parse('graph TD;\n%% Comment\n A-->B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
@@ -43,7 +43,7 @@ describe('[Comments] when parsing', () => {
});
it('should handle comments at the end', function() {
const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the find\n');
const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the end\n');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
@@ -117,7 +117,7 @@ describe('[Comments] when parsing', () => {
expect(edges[0].text).toBe('');
});
it('should handle a comments with blank rows in-between', function() {
it('should handle a comment with blank rows in-between', function() {
const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B;');
const vert = flow.parser.yy.getVertices();
@@ -132,7 +132,7 @@ describe('[Comments] when parsing', () => {
expect(edges[0].text).toBe('');
});
it('should handle a comments mermaid flowchart code in them', function() {
it('should handle a comment with mermaid flowchart code in them', function() {
const res = flow.parser.parse(
'graph TD;\n\n\n %% Test od>Odd shape]-->|Two line<br>edge comment|ro;\n A-->B;'
);

2
src/diagrams/flowchart/parser/flow.jison
View File

@@ -9,7 +9,7 @@
%x string
%x dir
%%
\%\%[^\n]* /* do nothing */
\%\%[^\n]*\n* /* do nothing */
["] this.begin("string");
<string>["] this.popState();
<string>[^"]* return "STR";