GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1089 from jgreywolf/1073-CommentsInClassDiagrams

Browse Source 
Bug/1073 Comments in class diagrams
This commit is contained in:
Knut Sveidqvist 2019-12-01 00:39:33 +01:00 committed by GitHub
commit 71c531240f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 187 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.vscode/settings.json vendored
View File

@ -1,8 +0,0 @@
{
"typescript.format.enable": false,
"typescript.reportStyleChecksAsWarnings": false,
"typescript.validate.enable": false,
"javascript.validate.enable": false,
"editor.formatOnSave": false,
"editor.snippetSuggestions": "top"
}

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

23
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(
`
@ -190,7 +194,7 @@ describe('Flowcart', () => {
);
});
it('9: should render subgraphs with a title startign with a digit', () => {
it('9: should render subgraphs with a title starting with a digit', () => {
imgSnapshotTest(
`
graph TB
@ -237,7 +241,7 @@ describe('Flowcart', () => {
);
});
it('11: should render a flowchart with ling sames and class definitoins', () => {
it('11: should render a flowchart with long names and class definitions', () => {
imgSnapshotTest(
`graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@ -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 } }
);
});
});

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

@ -2,13 +2,13 @@
import { parser } from './parser/classDiagram';
import classDb from './classDb';
describe('class diagram, ', function() {
describe('when parsing an info graph it', function() {
beforeEach(function() {
describe('class diagram, ', function () {
describe('when parsing an info graph it', function () {
beforeEach(function () {
parser.yy = classDb;
});
it('should handle relation definitions', function() {
it('should handle relation definitions', function () {
const str =
'classDiagram\n' +
'Class01 <|-- Class02\n' +
@ -19,7 +19,8 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle relation definition of different types and directions', function() {
it('should handle relation definition of different types and directions', function () {
const str =
'classDiagram\n' +
'Class11 <|.. Class12\n' +
@ -31,7 +32,7 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle cardinality and labels', function() {
it('should handle cardinality and labels', function () {
const str =
'classDiagram\n' +
'Class01 "1" *-- "many" Class02 : contains\n' +
@ -66,7 +67,7 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle method statements', function() {
it('should handle method statements', function () {
const str =
'classDiagram\n' +
'Object <|-- ArrayList\n' +
@ -76,7 +77,8 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle parsing of method statements grouped by brackets', function() {
it('should handle parsing of method statements grouped by brackets', function () {
const str =
'classDiagram\n' +
'class Dummy_Class {\n' +
@ -92,7 +94,7 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle parsing of separators', function() {
it('should handle parsing of separators', function () {
const str =
'classDiagram\n' +
'class Foo1 {\n' +
@ -124,14 +126,111 @@ 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);
});
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 an classDiagram graph it', function() {
beforeEach(function() {
describe('when fetching data from a classDiagram graph it', function () {
beforeEach(function () {
parser.yy = classDb;
parser.yy.clear();
});
it('should handle relation definitions EXTENSION', function() {
it('should handle relation definitions EXTENSION', function () {
const str = 'classDiagram\n' + 'Class01 <|-- Class02';
parser.parse(str);
@ -144,7 +243,8 @@ 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() {
it('should handle relation definitions AGGREGATION and dotted line', function () {
const str = 'classDiagram\n' + 'Class01 o.. Class02';
parser.parse(str);
@ -157,7 +257,8 @@ 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() {
it('should handle relation definitions COMPOSITION on both sides', function () {
const str = 'classDiagram\n' + 'Class01 *--* Class02';
parser.parse(str);
@ -170,7 +271,8 @@ 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() {
it('should handle relation definitions no types', function () {
const str = 'classDiagram\n' + 'Class01 -- Class02';
parser.parse(str);
@ -183,7 +285,8 @@ 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() {
it('should handle relation definitions with type only on right side', function () {
const str = 'classDiagram\n' + 'Class01 --|> Class02';
parser.parse(str);
@ -197,7 +300,7 @@ describe('class diagram, ', function() {
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
});
it('should handle multiple classes and relation definitions', function() {
it('should handle multiple classes and relation definitions', function () {
const str =
'classDiagram\n' +
'Class01 <|-- Class02\n' +
@ -223,7 +326,7 @@ describe('class diagram, ', function() {
expect(relations[3].relation.lineType).toBe(classDb.lineType.DOTTED_LINE);
});
it('should handle class annotations', function() {
it('should handle class annotations', function () {
const str = 'classDiagram\n' + 'class Class1\n' + '<<interface>> Class1';
parser.parse(str);
@ -234,7 +337,7 @@ describe('class diagram, ', function() {
expect(testClass.annotations[0]).toBe('interface');
});
it('should handle class annotations with members and methods', function() {
it('should handle class annotations with members and methods', function () {
const str =
'classDiagram\n' +
'class Class1\n' +
@ -250,7 +353,7 @@ describe('class diagram, ', function() {
expect(testClass.annotations[0]).toBe('interface');
});
it('should handle class annotations in brackets', function() {
it('should handle class annotations in brackets', function () {
const str = 'classDiagram\n' + 'class Class1 {\n' + '<<interface>>\n' + '}';
parser.parse(str);
@ -261,7 +364,7 @@ describe('class diagram, ', function() {
expect(testClass.annotations[0]).toBe('interface');
});
it('should handle class annotations in brackets with members and methods', function() {
it('should handle class annotations in brackets with members and methods', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
@ -278,7 +381,7 @@ describe('class diagram, ', function() {
expect(testClass.annotations[0]).toBe('interface');
});
it('should add bracket members in right order', function() {
it('should add bracket members in right order', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +

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

12
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();
@ -27,7 +27,7 @@ describe('[Comments] when parsing', () => {
expect(edges[0].text).toBe('');
});
it('should handle comments a at the start', function() {
it('should handle comments at the start', function() {
const res = flow.parser.parse('%% Comment\ngraph TD;\n A-->B;');
const vert = flow.parser.yy.getVertices();
@ -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;'
);

13
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";
@ -460,13 +460,6 @@ text: textToken
commentText: commentToken
{$$=$1;}
| commentText commentToken
{$$=$1+''+$2;}
;
keywords
: STYLE | LINKSTYLE | CLASSDEF | CLASS | CLICK | GRAPH | DIR | subgraph | end | DOWN | UP;
@ -516,8 +509,6 @@ linkStyleStatement
{$$ = $1;yy.updateLinkInterpolate($3,$7);}
;
commentStatement: PCT PCT commentText;
numList: NUM
{$$ = [$1]}
| numList COMMA NUM
@ -539,8 +530,6 @@ styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT |
/* Token lists */
commentToken : textToken | graphCodeTokens ;
textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' | PCT | DEFAULT;
textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;