Merge pull request #1168 from mermaid-js/feature/834_linking_to_multi…

…ple_nodes #834 Using & as a separator for the multiple nodes
mermaid-js · Jan 2, 2020 · 851d2f2 · 851d2f2
2 parents 7bd1408 + 4e6aad5
commit 851d2f2
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 22 deletions.
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
@@ -439,15 +439,15 @@ describe('Flowchart', () => {
   it('19: Multiple nodes and chaining in one statement', () => {
     imgSnapshotTest(
       `graph LR
-        a --> b c--> d
+        a --> b & c--> d
       `,
       { flowchart: { htmlLabels: false } }
     );
   });
   it('20: Multiple nodes and chaining in one statement', () => {
     imgSnapshotTest(
       `graph TD
-      A[ h ] -- hello --> B[" test "]:::exClass C --> D;
+      A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
       classDef exClass background:#bbb,border:1px solid red;
       `,
       { flowchart: { htmlLabels: false } }

diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
@@ -608,7 +608,7 @@ const destructLink = (_str, _startStr) => {
   let startInfo;
   if (_startStr) {
     startInfo = destructStartLink(_startStr);
-    console.log(startInfo, info);
+
     if (startInfo.stroke !== info.stroke) {
       return { type: 'INVALID', stroke: 'INVALID' };
     }

diff --git a/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js b/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
@@ -37,7 +37,7 @@ describe('when parsing flowcharts', function() {
   it('should handle chaining of vertices', function() {
     const res = flow.parser.parse(`
     graph TD
-      A B --> C;
+      A & B --> C;
     `);
 
     const vert = flow.parser.yy.getVertices();
@@ -59,7 +59,7 @@ describe('when parsing flowcharts', function() {
   it('should multiple vertices in link statement in the begining', function() {
     const res = flow.parser.parse(`
     graph TD
-      A-->B C;
+      A-->B & C;
     `);
 
     const vert = flow.parser.yy.getVertices();
@@ -81,7 +81,7 @@ describe('when parsing flowcharts', function() {
   it('should multiple vertices in link statement at the end', function() {
     const res = flow.parser.parse(`
     graph TD
-      A B--> C D;
+      A & B--> C & D;
     `);
 
     const vert = flow.parser.yy.getVertices();
@@ -112,7 +112,7 @@ describe('when parsing flowcharts', function() {
   it('should handle chaining of vertices at both ends at once', function() {
     const res = flow.parser.parse(`
     graph TD
-      A B--> C D;
+      A & B--> C & D;
     `);
 
     const vert = flow.parser.yy.getVertices();
@@ -140,41 +140,50 @@ describe('when parsing flowcharts', function() {
     expect(edges[3].type).toBe('arrow');
     expect(edges[3].text).toBe('');
   });
-  it('should handle chaining and multiple nodes in in link statement', function() {
+  it('should handle chaining and multiple nodes in in link statement FVC ', function() {
     const res = flow.parser.parse(`
     graph TD
-      A --> B C --> D;
+      A --> B & B2 & C --> D2;
     `);
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
 
     expect(vert['A'].id).toBe('A');
     expect(vert['B'].id).toBe('B');
+    expect(vert['B2'].id).toBe('B2');
     expect(vert['C'].id).toBe('C');
-    expect(vert['D'].id).toBe('D');
-    expect(edges.length).toBe(4);
+    expect(vert['D2'].id).toBe('D2');
+    expect(edges.length).toBe(6);
     expect(edges[0].start).toBe('A');
     expect(edges[0].end).toBe('B');
     expect(edges[0].type).toBe('arrow');
     expect(edges[0].text).toBe('');
     expect(edges[1].start).toBe('A');
-    expect(edges[1].end).toBe('C');
+    expect(edges[1].end).toBe('B2');
     expect(edges[1].type).toBe('arrow');
     expect(edges[1].text).toBe('');
-    expect(edges[2].start).toBe('B');
-    expect(edges[2].end).toBe('D');
+    expect(edges[2].start).toBe('A');
+    expect(edges[2].end).toBe('C');
     expect(edges[2].type).toBe('arrow');
     expect(edges[2].text).toBe('');
-    expect(edges[3].start).toBe('C');
-    expect(edges[3].end).toBe('D');
+    expect(edges[3].start).toBe('B');
+    expect(edges[3].end).toBe('D2');
     expect(edges[3].type).toBe('arrow');
     expect(edges[3].text).toBe('');
+    expect(edges[4].start).toBe('B2');
+    expect(edges[4].end).toBe('D2');
+    expect(edges[4].type).toBe('arrow');
+    expect(edges[4].text).toBe('');
+    expect(edges[5].start).toBe('C');
+    expect(edges[5].end).toBe('D2');
+    expect(edges[5].type).toBe('arrow');
+    expect(edges[5].text).toBe('');
   });
   it('should handle chaining and multiple nodes in in link statement with extra info in statements', function() {
     const res = flow.parser.parse(`
     graph TD
-      A[ h ] -- hello --> B[" test "]:::exClass C --> D;
+      A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
       classDef exClass background:#bbb,border:1px solid red;
     `);
 

diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison
@@ -38,6 +38,7 @@
 \#                    return 'BRKT';
 ":::"                 return 'STYLE_SEPARATOR';
 ":"                   return 'COLON';
+"&"                   return 'AMP';
 ";"                   return 'SEMI';
 ","                   return 'COMMA';
 "*"                   return 'MULT';
@@ -300,8 +301,8 @@ verticeStatement: verticeStatement link node
 
 node: vertex
         { /* console.warn('nod', $1); */ $$ = [$1];}
-    | node spaceList vertex
-        { $$ = [$1[0], $3]; /*console.warn('pip', $1, $3, $$);*/ }
+    | node spaceList AMP spaceList vertex
+        { $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
     | vertex STYLE_SEPARATOR idString
         {$$ = [$1];yy.setClass($1,$3)}
     ;
@@ -468,9 +469,9 @@ alphaNumStatement
         {$$='-';}
     ;
 
-alphaNumToken  : PUNCTUATION | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
+alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
 
-idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION;
+idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;
 
 graphCodeTokens: STADIUMSTART | STADIUMEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
 %%
diff --git a/src/diagrams/flowchart/parser/subgraph.spec.js b/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -231,7 +231,7 @@ describe('when parsing subgraphs', function() {
     expect(edges[0].type).toBe('arrow');
   });
   it('should handle subgraphs with multi node statements in it', function() {
-    const res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\na b --> c e\n end;');
+    const res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\na & b --> c & e\n end;');
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();