Added notation for dotted links as described in issue #26 and support for thicker links

src/diagrams/flowchart/flowRenderer.js

@@ -109,16 +109,34 @@ exports.addEdges = function (edges, g) {
         }
 
         var style = '';
+
+
+
         if(typeof edge.style !== 'undefined'){
             edge.style.forEach(function(s){
                 style = style + s +';';
             });
         }
+        else{
+            switch(edge.stroke){
+                case 'normal':
+                    style = 'stroke: #333; stroke-width: 1.5px;fill:none';
+                    break;
+                case 'dotted':
+                    style = 'stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;';
+                    break;
+                case 'thick':
+                    style = 'stroke: #333; stroke-width: 3.5px;fill:none';
+                    break;
+            }
+
+
+        }
 
         // Add the edge to the graph
         if (typeof edge.text === 'undefined') {
             if(typeof edge.style === 'undefined'){
-                g.setEdge(edge.start, edge.end,{ style: "stroke: #333; stroke-width: 1.5px;fill:none", arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
+                g.setEdge(edge.start, edge.end,{ style: style, arrowhead: aHead},cnt);
             }else{
                 g.setEdge(edge.start, edge.end, {
                     style: style, arrowheadStyle: "fill: #333", arrowhead: aHead
@@ -129,7 +147,7 @@ exports.addEdges = function (edges, g) {
         else {
 
             if(typeof edge.style === 'undefined'){
-                g.setEdge(edge.start, edge.end,{labelType: "html",style: "stroke: #333; stroke-width: 1.5px;fill:none", labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
+                g.setEdge(edge.start, edge.end,{labelType: "html",style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
             }else{
                 g.setEdge(edge.start, edge.end, {
                     labelType: "html",style: style, arrowheadStyle: "fill: #333", label: edge.text, arrowhead: aHead

src/diagrams/flowchart/graphDb.js

@@ -64,6 +64,7 @@ exports.addLink = function (start, end, type, linktext) {
 
     if (typeof type !== 'undefined') {
         edge.type = type.type;
+        edge.stroke = type.stroke;
     }
     edges.push(edge);
 };

src/diagrams/flowchart/parser/flow.jison

@@ -18,14 +18,12 @@
 "BT"                  return 'DIR';
 "TD"                  return 'DIR';
 "BR"                  return 'DIR';
-[0-9]                 return 'NUM';
+[0-9]+                 return 'NUM';
 \#                    return 'BRKT';
 ":"                   return 'COLON';
 ";"                   return 'SEMI';
 ","                   return 'COMMA';
-"="                   return 'EQUALS';
 "*"                   return 'MULT';
-"."                   return 'DOT';
 "<"                   return 'TAGSTART';
 ">"                   return 'TAGEND';
 "^"                   return 'UP';
@@ -34,10 +32,26 @@
 \-\-\>                return 'ARROW_POINT';
 \-\-[o]               return 'ARROW_CIRCLE';
 \-\-\-                return 'ARROW_OPEN';
+\-\.\-[x]             return 'DOTTED_ARROW_CROSS';
+\-\.\-\>              return 'DOTTED_ARROW_POINT';
+\-\.\-[o]             return 'DOTTED_ARROW_CIRCLE';
+\-\.\-                return 'DOTTED_ARROW_OPEN';
+.\-[x]                return 'DOTTED_ARROW_CROSS';
+\.\-\>                return 'DOTTED_ARROW_POINT';
+\.\-[o]               return 'DOTTED_ARROW_CIRCLE';
+\.\-                  return 'DOTTED_ARROW_OPEN';
+\=\=[x]               return 'THICK_ARROW_CROSS';
+\=\=\>                return 'THICK_ARROW_POINT';
+\=\=[o]               return 'THICK_ARROW_CIRCLE';
+\=\=[\=]              return 'THICK_ARROW_OPEN';
 \-\-                  return '--';
+\-\.                  return '-.';
+\=\=                  return '==';
 \-                    return 'MINUS';
+"."                   return 'DOT';
 \+                    return 'PLUS';
 \%                    return 'PCT';
+"="                   return 'EQUALS';
 \=                    return 'EQUALS';
 [\u0021-\u0027\u002A-\u002E\u003F\u0041-\u005A\u005C\u005F-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
@@ -227,8 +241,6 @@ vertex:  alphaNum SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'odd');}
     | alphaNum TAGEND text SQE SPACE
         {$$ = $1;yy.addVertex($1,$3,'odd');}
-    | alphaNum TAGSTART text TAGEND
-        {$$ = $1;yy.addVertex($1,$3,'diamond');}
     | alphaNum
         {$$ = $1;yy.addVertex($1);}
     | alphaNum SPACE
@@ -238,7 +250,7 @@ vertex:  alphaNum SQS text SQE
 alphaNum
     : alphaNumStatement
     {$$=$1;}
-    | alphaNumStatement alphaNum
+    | alphaNum alphaNumStatement
     {$$=$1+''+$2;}
     ;
 
@@ -262,16 +274,40 @@ link: linkStatement arrowText
     {$5.text = $3;$$ = $5;}
     | '--' SPACE text SPACE linkStatement SPACE
     {$5.text = $3;$$ = $5;}
+    | '-.' SPACE text SPACE linkStatement
+    {$5.text = $3;$$ = $5;}
+    | '-.' SPACE text SPACE linkStatement SPACE
+    {$5.text = $3;$$ = $5;}
+    | '==' SPACE text SPACE linkStatement
+    {$5.text = $3;$$ = $5;}
+    | '==' SPACE text SPACE linkStatement SPACE
+    {$5.text = $3;$$ = $5;}
     ;
 
 linkStatement: ARROW_POINT
-        {$$ = {"type":"arrow"};}
+        {$$ = {"type":"arrow","stroke":"normal"};}
     | ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle"};}
+        {$$ = {"type":"arrow_circle","stroke":"normal"};}
     | ARROW_CROSS
-        {$$ = {"type":"arrow_cross"};}
+        {$$ = {"type":"arrow_cross","stroke":"normal"};}
     | ARROW_OPEN
-        {$$ = {"type":"arrow_open"};}
+        {$$ = {"type":"arrow_open","stroke":"normal"};}
+    | DOTTED_ARROW_POINT
+        {$$ = {"type":"arrow","stroke":"dotted"};}
+    | DOTTED_ARROW_CIRCLE
+        {$$ = {"type":"arrow_circle","stroke":"dotted"};}
+    | DOTTED_ARROW_CROSS
+        {$$ = {"type":"arrow_cross","stroke":"dotted"};}
+    | DOTTED_ARROW_OPEN
+        {$$ = {"type":"arrow_open","stroke":"dotted"};}
+    | THICK_ARROW_POINT
+        {$$ = {"type":"arrow","stroke":"thick"};}
+    | THICK_ARROW_CIRCLE
+        {$$ = {"type":"arrow_circle","stroke":"thick"};}
+    | THICK_ARROW_CROSS
+        {$$ = {"type":"arrow_cross","stroke":"thick"};}
+    | THICK_ARROW_OPEN
+        {$$ = {"type":"arrow_open","stroke":"thick"};}
         ;
 
 arrowText:
@@ -347,7 +383,7 @@ styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT |
 
 commentToken   : textToken | graphCodeTokens ;
 
-textToken      : textNoTagsToken | TAGSTART | TAGEND ;
+textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' ;
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
 

src/diagrams/flowchart/parser/flow.spec.js

@@ -308,6 +308,28 @@ describe('when parsing ',function(){
         expect(edges[0].type).toBe('arrow');
     });
 
+    it('should handle style definitons with more then 1 digit in a row',function(){
+        var res = flow.parser.parse('graph TD\n' +
+        'A-->B1\n' +
+        'A-->B2\n' +
+        'A-->B3\n' +
+        'A-->B4\n' +
+        'A-->B5\n' +
+        'A-->B6\n' +
+        'A-->B7\n' +
+        'A-->B8\n' +
+        'A-->B9\n' +
+        'A-->B10\n' +
+        'A-->B11\n' +
+        'linkStyle 10 stroke-width:1px;');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+
+        expect(edges[0].type).toBe('arrow');
+    });
+
     describe("it should handle text on edges",function(){
         it('it should handle text without space',function(){
             var res = flow.parser.parse('graph TD;A--x|textNoSpace|B;');
@@ -405,6 +427,61 @@ describe('when parsing ',function(){
 
     });
 
+    describe("it should handle new line type notation",function() {
+        it('it should handle regular lines', function () {
+            var res = flow.parser.parse('graph TD;A-->B;');
+
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+            expect(edges[0].stroke).toBe('normal');
+        });
+        it('it should handle dotted lines', function () {
+            var res = flow.parser.parse('graph TD;A-.->B;');
+
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+
+            expect(edges[0].stroke).toBe('dotted');
+        });
+        it('it should handle dotted lines', function () {
+            var res = flow.parser.parse('graph TD;A==>B;');
+
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+
+            expect(edges[0].stroke).toBe('thick');
+        });
+        it('it should handle text on lines', function () {
+            var res = flow.parser.parse('graph TD;A-- test text with == -->B;');
+
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+
+            expect(edges[0].stroke).toBe('normal');
+        });
+        it('it should handle text on lines', function () {
+            var res = flow.parser.parse('graph TD;A-. test text with == .->B;');
+
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+
+            expect(edges[0].stroke).toBe('dotted');
+        });
+        it('it should handle text on lines', function () {
+            var res = flow.parser.parse('graph TD;A== test text with -- ==>B;');
+
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+
+            expect(edges[0].stroke).toBe('thick');
+        });
+    });
 
     describe("it should handle text on edges using the new notation",function(){
         it('it should handle text without space',function(){

test/web.html

@@ -41,9 +41,9 @@
     <h1>Sub graphs</h1>
     <div class="mermaid">graph TB
         subgraph
-            sq[Square shape] --> ci((Circle shape))
+            sq[Square shape] -.-> ci((Circle shape))
-            od>Odd shape]-- Two line<br>edge comment --> ro
+            od>Odd shape]-. Two line<br>edge comment .-> ro
-            di{Diamond with <br/> line break} --> ro(Rounded<br>square<br>shape)
+            di{Diamond with <br/> line break} ==> ro(Rounded<br>square<br>shape)
             di-->ro2(Rounded square shape)
         end