diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 19dc312d76..4729537ccc 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -428,4 +428,29 @@ describe('Flowcart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+  it('17: Chaining of nodes', () => {
+    imgSnapshotTest(
+      `graph LR
+        a --> b --> c
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+  it('18: Multiple nodes and chaining in one statement', () => {
+    imgSnapshotTest(
+      `graph LR
+        a --> b c--> d
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+  it('19: Multiple nodes and chaining in one statement', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[ h ] -- hello --> B[" test "]:::exClass C --> D;
+      classDef exClass background:#bbb,border:1px solid red;
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 9e5267768b..d2e48875cf 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -5,7 +5,7 @@
       rel="stylesheet"
     />
     <style>
-      body {background: white}
+      body {background: black}
       h1 { color: white;}
       .arrowheadPath {fill: red;}
 
@@ -17,26 +17,24 @@
   <body>
     <h1>info below</h1>
     <div style="display: flex;width: 100%; height: 100%">
-      <div class="mermaid" style="width: 100%; height: 100%">gantt
-        dateFormat  YYYY-MM-DD
-        axisFormat  %d/%m
-        title Adding GANTT diagram to mermaid
-        excludes weekdays 2014-01-10
-
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
-
-
+      <div class="mermaid" style="width: 100%; height: 100%">
+        graph TB
+          A --> B
+          A ==> C
+          A .-> D
+          A === E
+          A -.- F
+          D -- Hello --> a
+          D-- text including R TD space --xb
       </div>
 </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        // theme: 'dark',
+        theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 3,
+        logLevel: 0,
         flowchart: { curve: 'linear', "htmlLabels": false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index a0162b3c9e..11e7ebf6cb 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -102,7 +102,7 @@ export const addVertex = function(_id, text, type, style, classes) {
  * @param type
  * @param linktext
  */
-export const addLink = function(_start, _end, type, linktext) {
+export const addSingleLink = function(_start, _end, type, linktext) {
   let start = _start;
   let end = _end;
   if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
@@ -127,6 +127,14 @@ export const addLink = function(_start, _end, type, linktext) {
   }
   edges.push(edge);
 };
+export const addLink = function(_start, _end, type, linktext) {
+  let i, j;
+  for (i = 0; i < _start.length; i++) {
+    for (j = 0; j < _end.length; j++) {
+      addSingleLink(_start[i], _end[j], type, linktext);
+    }
+  }
+};
 
 /**
  * Updates a link's line interpolation algorithm
@@ -501,6 +509,130 @@ export const firstGraph = () => {
   return false;
 };
 
+const destructStartLink = _str => {
+  const str = _str.trim();
+
+  switch (str) {
+    case '<--':
+      return { type: 'arrow', stroke: 'normal' };
+    case 'x--':
+      return { type: 'arrow_cross', stroke: 'normal' };
+    case 'o--':
+      return { type: 'arrow_circle', stroke: 'normal' };
+    case '<-.':
+      return { type: 'arrow', stroke: 'dotted' };
+    case 'x-.':
+      return { type: 'arrow_cross', stroke: 'dotted' };
+    case 'o-.':
+      return { type: 'arrow_circle', stroke: 'dotted' };
+    case '<==':
+      return { type: 'arrow', stroke: 'thick' };
+    case 'x==':
+      return { type: 'arrow_cross', stroke: 'thick' };
+    case 'o==':
+      return { type: 'arrow_circle', stroke: 'thick' };
+    case '--':
+      return { type: 'arrow_open', stroke: 'normal' };
+    case '==':
+      return { type: 'arrow_open', stroke: 'thick' };
+    case '-.':
+      return { type: 'arrow_open', stroke: 'dotted' };
+  }
+};
+
+const destructEndLink = _str => {
+  const str = _str.trim();
+
+  switch (str) {
+    case '--x':
+      return { type: 'arrow_cross', stroke: 'normal' };
+    case '-->':
+      return { type: 'arrow', stroke: 'normal' };
+    case '<-->':
+      return { type: 'double_arrow_point', stroke: 'normal' };
+    case 'x--x':
+      return { type: 'double_arrow_cross', stroke: 'normal' };
+    case 'o--o':
+      return { type: 'double_arrow_circle', stroke: 'normal' };
+    case 'o.-o':
+      return { type: 'double_arrow_circle', stroke: 'dotted' };
+    case '<==>':
+      return { type: 'double_arrow_point', stroke: 'thick' };
+    case 'o==o':
+      return { type: 'double_arrow_circle', stroke: 'thick' };
+    case 'x==x':
+      return { type: 'double_arrow_cross', stroke: 'thick' };
+    case 'x.-x':
+      return { type: 'double_arrow_cross', stroke: 'dotted' };
+    case 'x-.-x':
+      return { type: 'double_arrow_cross', stroke: 'dotted' };
+    case '<.->':
+      return { type: 'double_arrow_point', stroke: 'dotted' };
+    case '<-.->':
+      return { type: 'double_arrow_point', stroke: 'dotted' };
+    case 'o-.-o':
+      return { type: 'double_arrow_circle', stroke: 'dotted' };
+    case '--o':
+      return { type: 'arrow_circle', stroke: 'normal' };
+    case '---':
+      return { type: 'arrow_open', stroke: 'normal' };
+    case '-.-x':
+      return { type: 'arrow_cross', stroke: 'dotted' };
+    case '-.->':
+      return { type: 'arrow', stroke: 'dotted' };
+    case '-.-o':
+      return { type: 'arrow_circle', stroke: 'dotted' };
+    case '-.-':
+      return { type: 'arrow_open', stroke: 'dotted' };
+    case '.-x':
+      return { type: 'arrow_cross', stroke: 'dotted' };
+    case '.->':
+      return { type: 'arrow', stroke: 'dotted' };
+    case '.-o':
+      return { type: 'arrow_circle', stroke: 'dotted' };
+    case '.-':
+      return { type: 'arrow_open', stroke: 'dotted' };
+    case '==x':
+      return { type: 'arrow_cross', stroke: 'thick' };
+    case '==>':
+      return { type: 'arrow', stroke: 'thick' };
+    case '==o':
+      return { type: 'arrow_circle', stroke: 'thick' };
+    case '===':
+      return { type: 'arrow_open', stroke: 'thick' };
+  }
+};
+
+const destructLink = (_str, _startStr) => {
+  const info = destructEndLink(_str);
+  let startInfo;
+  if (_startStr) {
+    startInfo = destructStartLink(_startStr);
+    console.log(startInfo, info);
+    if (startInfo.stroke !== info.stroke) {
+      return { type: 'INVALID', stroke: 'INVALID' };
+    }
+
+    if (startInfo.type === 'arrow_open') {
+      // -- xyz -->  - take arrow type form ending
+      startInfo.type = info.type;
+    } else {
+      // x-- xyz -->  - not supported
+      if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' };
+
+      startInfo.type = 'double_' + startInfo.type;
+    }
+
+    if (startInfo.type === 'double_arrow') {
+      startInfo.type = 'double_arrow_point';
+    }
+
+    return startInfo;
+  }
+
+  return info;
+};
+
 export default {
   addVertex,
   addLink,
@@ -523,6 +655,7 @@ export default {
   getDepthFirstPos,
   indexNodes,
   getSubGraphs,
+  destructLink,
   lex: {
     firstGraph
   }
diff --git a/src/diagrams/flowchart/parser/flow-edges.spec.js b/src/diagrams/flowchart/parser/flow-edges.spec.js
index 87bf7730d4..111dee9e08 100644
--- a/src/diagrams/flowchart/parser/flow-edges.spec.js
+++ b/src/diagrams/flowchart/parser/flow-edges.spec.js
@@ -87,7 +87,7 @@ describe('[Edges] when parsing', () => {
       expect(edges[0].text).toBe('');
     });
 
-    it('should handle double edged nodes with text on thick arrows', function() {
+    it('should handle double edged nodes with text on thick arrows XYZ1', function() {
       const res = flow.parser.parse('graph TD;\nA x== text ==x B;');
 
       const vert = flow.parser.yy.getVertices();
diff --git a/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/src/diagrams/flowchart/parser/flow-singlenode.spec.js
index ba9f239257..15f7cc1694 100644
--- a/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -22,6 +22,16 @@ describe('[Singlenodes] when parsing', () => {
     expect(edges.length).toBe(0);
     expect(vert['A'].styles.length).toBe(0);
   });
+  it('should handle a single node with white space after it (SN1)', function() {
+    // Silly but syntactically correct
+    const res = flow.parser.parse('graph TD;A ;');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges.length).toBe(0);
+    expect(vert['A'].styles.length).toBe(0);
+  });
 
   it('should handle a single square node', function() {
     // Silly but syntactically correct
diff --git a/src/diagrams/flowchart/parser/flow-text.spec.js b/src/diagrams/flowchart/parser/flow-text.spec.js
index 518aa37105..29979ce54d 100644
--- a/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -182,7 +182,7 @@ describe('[Text] when parsing', () => {
 
       expect(edges[0].stroke).toBe('normal');
     });
-    it('it should handle dotted text on lines', function() {
+    it('it should handle dotted text on lines (TD3)', function() {
       const res = flow.parser.parse('graph TD;A-. test text with == .->B;');
 
       const vert = flow.parser.yy.getVertices();
@@ -265,7 +265,7 @@ describe('[Text] when parsing', () => {
       expect(edges[0].text).toBe('text including URL space');
     });
 
-    it('should handle space and dir (TD)', function() {
+    it('should handle space and dir (TD2)', function() {
       const res = flow.parser.parse('graph TD;A-- text including R TD space --xB;');
 
       const vert = flow.parser.yy.getVertices();
diff --git a/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js b/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
index db8cfadfe7..4436cb4d64 100644
--- a/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
+++ b/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
@@ -34,4 +34,179 @@ describe('when parsing flowcharts', function() {
     expect(edges[1].type).toBe('arrow');
     expect(edges[1].text).toBe('');
   });
+  it('should handle chaining of vertices', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A B --> C;
+    `);
+
+    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['C'].id).toBe('C');
+    expect(edges.length).toBe(2);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('C');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('');
+    expect(edges[1].start).toBe('B');
+    expect(edges[1].end).toBe('C');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+  });
+  it('should multiple vertices in link statement in the begining', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A-->B C;
+    `);
+
+    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['C'].id).toBe('C');
+    expect(edges.length).toBe(2);
+    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].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+  });
+  it('should multiple vertices in link statement at the end', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A B--> C D;
+    `);
+
+    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['C'].id).toBe('C');
+    expect(vert['D'].id).toBe('D');
+    expect(edges.length).toBe(4);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('C');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('');
+    expect(edges[1].start).toBe('A');
+    expect(edges[1].end).toBe('D');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+    expect(edges[2].start).toBe('B');
+    expect(edges[2].end).toBe('C');
+    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].text).toBe('');
+    expect(edges[3].start).toBe('B');
+    expect(edges[3].end).toBe('D');
+    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].text).toBe('');
+  });
+  it('should handle chaining of vertices at both ends at once', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A B--> C D;
+    `);
+
+    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['C'].id).toBe('C');
+    expect(vert['D'].id).toBe('D');
+    expect(edges.length).toBe(4);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('C');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('');
+    expect(edges[1].start).toBe('A');
+    expect(edges[1].end).toBe('D');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+    expect(edges[2].start).toBe('B');
+    expect(edges[2].end).toBe('C');
+    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].text).toBe('');
+    expect(edges[3].start).toBe('B');
+    expect(edges[3].end).toBe('D');
+    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].text).toBe('');
+  });
+  it('should handle chaining and multiple nodes in in link statement', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A --> B C --> D;
+    `);
+
+    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['C'].id).toBe('C');
+    expect(vert['D'].id).toBe('D');
+    expect(edges.length).toBe(4);
+    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].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+    expect(edges[2].start).toBe('B');
+    expect(edges[2].end).toBe('D');
+    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].type).toBe('arrow');
+    expect(edges[3].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;
+      classDef exClass background:#bbb,border:1px solid red;
+    `);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    const classes = flow.parser.yy.getClasses();
+
+    expect(classes['exClass'].styles.length).toBe(2);
+    expect(classes['exClass'].styles[0]).toBe('background:#bbb');
+    expect(classes['exClass'].styles[1]).toBe('border:1px solid red');
+    expect(vert['A'].id).toBe('A');
+    expect(vert['B'].id).toBe('B');
+    expect(vert['B'].classes[0]).toBe('exClass');
+    expect(vert['C'].id).toBe('C');
+    expect(vert['D'].id).toBe('D');
+    expect(edges.length).toBe(4);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('B');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('hello');
+    expect(edges[1].start).toBe('A');
+    expect(edges[1].end).toBe('C');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('hello');
+    expect(edges[2].start).toBe('B');
+    expect(edges[2].end).toBe('D');
+    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].type).toBe('arrow');
+    expect(edges[3].text).toBe('');
+  });
 });
diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison
index ec67972cfc..eebea9628f 100644
--- a/src/diagrams/flowchart/parser/flow.jison
+++ b/src/diagrams/flowchart/parser/flow.jison
@@ -8,6 +8,7 @@
 %lex
 %x string
 %x dir
+%x vertex
 %%
 \%\%[^\n]*\n*           /* do nothing */
 ["]                     this.begin("string");
@@ -40,46 +41,46 @@
 ";"                   return 'SEMI';
 ","                   return 'COMMA';
 "*"                   return 'MULT';
-\s*\-\-[x]\s*            return 'ARROW_CROSS';
-\s*\-\-\>\s*             return 'ARROW_POINT';
-\s*\<\-\-\>\s*           return 'DOUBLE_ARROW_POINT';
-\s*[x]\-\-[x]\s*         return 'DOUBLE_ARROW_CROSS';
-\s*[o]\-\-[o]\s*         return 'DOUBLE_ARROW_CIRCLE';
-\s*[o]\.\-[o]\s*         return 'DOUBLE_DOTTED_ARROW_CIRCLE';
-\s*\<\=\=\>\s*           return 'DOUBLE_THICK_ARROW_POINT';
-\s*[o]\=\=[o]\s*         return 'DOUBLE_THICK_ARROW_CIRCLE';
-\s*[x]\=\=[x]\s*         return 'DOUBLE_THICK_ARROW_CROSS';
-\s*[x].\-[x]\s*          return 'DOUBLE_DOTTED_ARROW_CROSS';
-\s*[x]\-\.\-[x]\s*       return 'DOUBLE_DOTTED_ARROW_CROSS';
-\s*\<\.\-\>\s*           return 'DOUBLE_DOTTED_ARROW_POINT';
-\s*\<\-\.\-\>\s*         return 'DOUBLE_DOTTED_ARROW_POINT';
-\s*[o]\-\.\-[o]\s*       return 'DOUBLE_DOTTED_ARROW_CIRCLE';
-\s*\-\-[o]\s*            return 'ARROW_CIRCLE';
-\s*\-\-\-\s*             return 'ARROW_OPEN';
-\s*\-\.\-[x]\s*          return 'DOTTED_ARROW_CROSS';
-\s*\-\.\-\>\s*           return 'DOTTED_ARROW_POINT';
-\s*\-\.\-[o]\s*          return 'DOTTED_ARROW_CIRCLE';
-\s*\-\.\-\s*             return 'DOTTED_ARROW_OPEN';
-\s*.\-[x]\s*             return 'DOTTED_ARROW_CROSS';
-\s*\.\-\>\s*             return 'DOTTED_ARROW_POINT';
-\s*\.\-[o]\s*            return 'DOTTED_ARROW_CIRCLE';
-\s*\.\-\s*               return 'DOTTED_ARROW_OPEN';
-\s*\=\=[x]\s*            return 'THICK_ARROW_CROSS';
-\s*\=\=\>\s*             return 'THICK_ARROW_POINT';
-\s*\=\=[o]\s*            return 'THICK_ARROW_CIRCLE';
-\s*\=\=[\=]\s*           return 'THICK_ARROW_OPEN';
-\s*\<\-\-\s*             return 'START_DOUBLE_ARROW_POINT';
-\s*[x]\-\-\s*            return 'START_DOUBLE_ARROW_CROSS';
-\s*[o]\-\-\s*            return 'START_DOUBLE_ARROW_CIRCLE';
-\s*\<\-\.\s*             return 'START_DOUBLE_DOTTED_ARROW_POINT';
-\s*[x]\-\.\s*            return 'START_DOUBLE_DOTTED_ARROW_CROSS';
-\s*[o]\-\.\s*            return 'START_DOUBLE_DOTTED_ARROW_CIRCLE';
-\s*\<\=\=\s*             return 'START_DOUBLE_THICK_ARROW_POINT';
-\s*[x]\=\=\s*            return 'START_DOUBLE_THICK_ARROW_CROSS';
-\s*[o]\=\=\s*            return 'START_DOUBLE_THICK_ARROW_CIRCLE';
-\s*\-\-\s*               return '--';
-\s*\-\.\s*               return '-.';
-\s*\=\=\s*               return '==';
+\s*\-\-[x]\s*            return 'LINK';
+\s*\-\-\>\s*             return 'LINK';
+\s*\<\-\-\>\s*           return 'LINK';
+\s*[x]\-\-[x]\s*         return 'LINK';
+\s*[o]\-\-[o]\s*         return 'LINK';
+\s*[o]\.\-[o]\s*         return 'LINK';
+\s*\<\=\=\>\s*           return 'LINK';
+\s*[o]\=\=[o]\s*         return 'LINK';
+\s*[x]\=\=[x]\s*         return 'LINK';
+\s*[x].\-[x]\s*          return 'LINK';
+\s*[x]\-\.\-[x]\s*       return 'LINK';
+\s*\<\.\-\>\s*           return 'LINK';
+\s*\<\-\.\-\>\s*         return 'LINK';
+\s*[o]\-\.\-[o]\s*       return 'LINK';
+\s*\-\-[o]\s*            return 'LINK';
+\s*\-\-\-\s*             return 'LINK';
+\s*\-\.\-[x]\s*          return 'LINK';
+\s*\-\.\-\>\s*           return 'LINK';
+\s*\-\.\-[o]\s*          return 'LINK';
+\s*\-\.\-\s*             return 'LINK';
+\s*.\-[x]\s*             return 'LINK';
+\s*\.\-\>\s*             return 'LINK';
+\s*\.\-[o]\s*            return 'LINK';
+\s*\.\-\s*               return 'LINK';
+\s*\=\=[x]\s*            return 'LINK';
+\s*\=\=\>\s*             return 'LINK';
+\s*\=\=[o]\s*            return 'LINK';
+\s*\=\=[\=]\s*           return 'LINK';
+\s*\<\-\-\s*             return 'START_LINK';
+\s*[x]\-\-\s*            return 'START_LINK';
+\s*[o]\-\-\s*            return 'START_LINK';
+\s*\<\-\.\s*             return 'START_LINK';
+\s*[x]\-\.\s*            return 'START_LINK';
+\s*[o]\-\.\s*            return 'START_LINK';
+\s*\<\=\=\s*             return 'START_LINK';
+\s*[x]\=\=\s*            return 'START_LINK';
+\s*[o]\=\=\s*            return 'START_LINK';
+\s*\-\-\s*               return 'START_LINK';
+\s*\-\.\s*               return 'START_LINK';
+\s*\=\=\s*               return 'START_LINK';
 "(-"                  return '(-';
 "-)"                  return '-)';
 "(["                  return 'STADIUMSTART';
@@ -94,6 +95,7 @@
 "<"                   return 'TAGSTART';
 ">"                   return 'TAGEND';
 "^"                   return 'UP';
+"\|"                   return 'SEP';
 "v"                   return 'DOWN';
 [A-Za-z]+             return 'ALPHA';
 "\\]"                 return 'TRAPEND';
@@ -247,7 +249,7 @@ spaceList
 
 statement
     : verticeStatement separator
-    { $$=$1}
+    { /* console.warn('finat vs', $1.nodes); */ $$=$1.nodes}
     | styleStatement separator
     {$$=[];}
     | linkStyleStatement separator
@@ -285,72 +287,49 @@ separator: NEWLINE | SEMI | EOF ;
 //         {$$ = [$1];yy.setClass($1,$3)}
 //    ;
 
-verticeStatement: verticeStatement link node { yy.addLink($1[0],$3[0],$2); $$ = $3.concat($1) }
-    |node { $$ = $1 }
+
+verticeStatement: verticeStatement link node
+        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
+    |  verticeStatement link node spaceList
+        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
+    |node spaceList {/*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
+    |node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
     ;
 
 node: vertex
-        { $$ = [$1];}
+        { /* console.warn('nod', $1); */ $$ = [$1];}
+    | node spaceList vertex
+        { $$ = [$1[0], $3]; /*console.warn('pip', $1, $3, $$);*/ }
     | vertex STYLE_SEPARATOR idString
         {$$ = [$1];yy.setClass($1,$3)}
     ;
 
 vertex:  idString SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'square');}
-    |  idString SQS text SQE spaceList
-        {$$ = $1;yy.addVertex($1,$3,'square');}
     | idString PS PS text PE PE
         {$$ = $1;yy.addVertex($1,$4,'circle');}
-    | idString PS PS text PE PE spaceList
-        {$$ = $1;yy.addVertex($1,$4,'circle');}
     | idString '(-' text '-)'
         {$$ = $1;yy.addVertex($1,$3,'ellipse');}
-    | idString '(-' text '-)' spaceList
-        {$$ = $1;yy.addVertex($1,$3,'ellipse');}
     | idString STADIUMSTART text STADIUMEND
         {$$ = $1;yy.addVertex($1,$3,'stadium');}
-    | idString STADIUMSTART text STADIUMEND spaceList
-        {$$ = $1;yy.addVertex($1,$3,'stadium');}
     | idString PS text PE
         {$$ = $1;yy.addVertex($1,$3,'round');}
-    | idString PS text PE spaceList
-        {$$ = $1;yy.addVertex($1,$3,'round');}
     | idString DIAMOND_START text DIAMOND_STOP
         {$$ = $1;yy.addVertex($1,$3,'diamond');}
-    | idString DIAMOND_START text DIAMOND_STOP spaceList
-        {$$ = $1;yy.addVertex($1,$3,'diamond');}
     | idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP
         {$$ = $1;yy.addVertex($1,$4,'hexagon');}
-    | idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP spaceList
-        {$$ = $1;yy.addVertex($1,$4,'hexagon');}
     | idString TAGEND text SQE
         {$$ = $1;yy.addVertex($1,$3,'odd');}
-    | idString TAGEND text SQE spaceList
-        {$$ = $1;yy.addVertex($1,$3,'odd');}
     | idString TRAPSTART text TRAPEND
         {$$ = $1;yy.addVertex($1,$3,'trapezoid');}
-    | idString TRAPSTART text TRAPEND spaceList
-        {$$ = $1;yy.addVertex($1,$3,'trapezoid');}
     | idString INVTRAPSTART text INVTRAPEND
         {$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
-    | idString INVTRAPSTART text INVTRAPEND spaceList
-        {$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
     | idString TRAPSTART text INVTRAPEND
         {$$ = $1;yy.addVertex($1,$3,'lean_right');}
-    | idString TRAPSTART text INVTRAPEND spaceList
-        {$$ = $1;yy.addVertex($1,$3,'lean_right');}
     | idString INVTRAPSTART text TRAPEND
         {$$ = $1;yy.addVertex($1,$3,'lean_left');}
-    | idString INVTRAPSTART text TRAPEND spaceList
-        {$$ = $1;yy.addVertex($1,$3,'lean_left');}
-/*  | idString SQS text TAGSTART
-        {$$ = $1;yy.addVertex($1,$3,'odd_right');}
-    | idString SQS text TAGSTART spaceList
-        {$$ = $1;yy.addVertex($1,$3,'odd_right');} */
     | idString
-        {$$ = $1;yy.addVertex($1);}
-    | idString spaceList
-        {$$ = $1;yy.addVertex($1);}
+        { /*console.warn('h: ', $1);*/$$ = $1;yy.addVertex($1);}
     ;
 
 
@@ -363,92 +342,12 @@ link: linkStatement arrowText
     {$1.text = $2;$$ = $1;}
     | linkStatement
     {$$ = $1;}
-    | '--' text ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"normal","text":$2};}
-    | 'START_DOUBLE_ARROW_POINT' text ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"normal","text":$2};}
-    | '--' text ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"normal","text":$2};}
-    | 'START_DOUBLE_ARROW_CIRCLE' text ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"normal","text":$2};}
-    | '--' text ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"normal","text":$2};}
-    | 'START_DOUBLE_ARROW_CROSS' text ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"normal","text":$2};}
-    | '--' text ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"normal","text":$2};}
-    | '-.' text DOTTED_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"dotted","text":$2};}
-    | 'START_DOUBLE_DOTTED_ARROW_POINT' text DOTTED_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"dotted","text":$2};}
-    | '-.' text DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"dotted","text":$2};}
-    | 'START_DOUBLE_DOTTED_ARROW_CIRCLE' text DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"dotted","text":$2};}
-    | '-.' text DOTTED_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"dotted","text":$2};}
-    | 'START_DOUBLE_DOTTED_ARROW_CROSS' text DOTTED_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"dotted","text":$2};}
-    | '-.' text DOTTED_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"dotted","text":$2};}
-    | '==' text THICK_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"thick","text":$2};}
-    | 'START_DOUBLE_THICK_ARROW_POINT' text THICK_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"thick","text":$2};}
-    | '==' text THICK_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"thick","text":$2};}
-    | 'START_DOUBLE_THICK_ARROW_CIRCLE' text THICK_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"thick","text":$2};}
-    | '==' text THICK_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"thick","text":$2};}
-    | 'START_DOUBLE_THICK_ARROW_CROSS' text THICK_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"thick","text":$2};}
-    | '==' text THICK_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"thick","text":$2};}
+    | START_LINK text LINK
+        {var inf = yy.destructLink($3, $1); $$ = {"type":inf.type,"stroke":inf.stroke,"text":$2};}
     ;
 
-linkStatement: ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"normal"};}
-    | DOUBLE_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"normal"};}
-    | ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"normal"};}
-    | DOUBLE_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"normal"};}
-    | ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"normal"};}
-    | DOUBLE_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"normal"};}
-    | ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"normal"};}
-    | DOTTED_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"dotted"};}
-    | DOUBLE_DOTTED_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"dotted"};}
-    | DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"dotted"};}
-    | DOUBLE_DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"dotted"};}
-    | DOTTED_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"dotted"};}
-    | DOUBLE_DOTTED_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"dotted"};}
-    | DOTTED_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"dotted"};}
-    | THICK_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"thick"};}
-    | DOUBLE_THICK_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"thick"};}
-    | THICK_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"thick"};}
-    | DOUBLE_THICK_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"thick"};}
-    | THICK_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"thick"};}
-    | DOUBLE_THICK_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"thick"};}
-    | THICK_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"thick"};}
+linkStatement: LINK
+        {var inf = yy.destructLink($1);$$ = {"type":inf.type,"stroke":inf.stroke};}
         ;
 
 arrowText:
@@ -536,7 +435,7 @@ styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT |
 
 /* Token lists */
 
-textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFAULT;
+textToken      : textNoTagsToken | TAGSTART | TAGEND | START_LINK | PCT | DEFAULT;
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
 
diff --git a/src/diagrams/flowchart/parser/subgraph.spec.js b/src/diagrams/flowchart/parser/subgraph.spec.js
index f08c6459eb..afe6c6d431 100644
--- a/src/diagrams/flowchart/parser/subgraph.spec.js
+++ b/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -16,6 +16,7 @@ describe('when parsing subgraphs', function() {
     const subgraphs = flow.parser.yy.getSubGraphs();
     expect(subgraphs.length).toBe(1);
     const subgraph = subgraphs[0];
+
     expect(subgraph.nodes.length).toBe(2);
     expect(subgraph.nodes[0]).toBe('a2');
     expect(subgraph.nodes[1]).toBe('a1');
@@ -191,6 +192,15 @@ describe('when parsing subgraphs', function() {
     expect(edges[0].type).toBe('arrow');
   });
 
+  it('should handle subgraphs3', function() {
+    const res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle   \n\n    c-->d \nend\n');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges[0].type).toBe('arrow');
+  });
+
   it('should handle nested subgraphs', function() {
     const str =
       'graph TD\n' +
@@ -218,6 +228,14 @@ describe('when parsing subgraphs', function() {
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
 
+    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 vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
     expect(edges[0].type).toBe('arrow');
   });
 });
diff --git a/src/diagrams/pie/parser/pie.jison b/src/diagrams/pie/parser/pie.jison
index be6fcf2148..2cc4045ff5 100644
--- a/src/diagrams/pie/parser/pie.jison
+++ b/src/diagrams/pie/parser/pie.jison
@@ -49,7 +49,7 @@ line
 
 statement
 	:  STR VALUE {
-		console.log('str:'+$1+' value: '+$2)
+		/*console.log('str:'+$1+' value: '+$2)*/
 		yy.addSection($1,yy.cleanupValue($2));  }
 	| title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
 	;
diff --git a/src/mermaid.js b/src/mermaid.js
index 76b644ef28..08bf9af191 100644
--- a/src/mermaid.js
+++ b/src/mermaid.js
@@ -116,7 +116,6 @@ const init = function() {
 };
 
 const initialize = function(config) {
-  logger.debug('Initializing mermaid ');
   if (typeof config.mermaid !== 'undefined') {
     if (typeof config.mermaid.startOnLoad !== 'undefined') {
       mermaid.startOnLoad = config.mermaid.startOnLoad;
@@ -126,6 +125,7 @@ const initialize = function(config) {
     }
   }
   mermaidAPI.initialize(config);
+  logger.debug('Initializing mermaid ');
 };
 
 /**
diff --git a/src/themes/gantt.scss b/src/themes/gantt.scss
index 06d533ec43..5fb4bb991e 100644
--- a/src/themes/gantt.scss
+++ b/src/themes/gantt.scss
@@ -54,7 +54,7 @@
 
 .grid .tick {
   stroke: $gridColor;
-  opacity: 0.3;
+  opacity: 0.8;
   shape-rendering: crispEdges;
   text {
     font-family: 'trebuchet ms', verdana, arial;
