Better support for unicode and cyrillic letters

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "authors": [
     "knsv <knut@sveido.com>"
   ],

dist/mermaid.full.js

@@ -665,13 +665,14 @@ var flow = require('./parser/flow');
 var utils = require('./utils');
 var seq = require('./sequenceRenderer');
 var he = require('he');
+//var dagreD3 = require('dagre-d3');
 
 /**
  * Function that adds the vertices found in the graph definition to the graph to be rendered.
  * @param vert Object containing the vertices.
  * @param g The graph that is to be drawn.
  */
-var addVertices = function (vert, g) {
+exports.addVertices = function (vert, g) {
     var keys = Object.keys(vert);
 
     var styleFromStyleArr = function(styleStr,arr){
@@ -753,7 +754,7 @@ var addVertices = function (vert, g) {
  * @param edges
  * @param g
  */
-var addEdges = function (edges, g) {
+exports.addEdges = function (edges, g) {
     var cnt=0;
     var aHead;
     edges.forEach(function (edge) {
@@ -838,8 +839,8 @@ var draw = function (text, id) {
         classes.default = {id:'default'};
         classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
     }
-    addVertices(vert, g);
+    exports.addVertices(vert, g);
-    addEdges(edges, g);
+    exports.addEdges(edges, g);
 
     // Create the renderer
     var render = new dagreD3.render();
@@ -939,6 +940,7 @@ var init = function () {
         cnt++;
 
         var txt = element.innerHTML;
+
         txt = txt.replace(/>/g,'>');
         txt = txt.replace(/</g,'&lt;');
         txt = he.decode(txt).trim();
@@ -966,7 +968,7 @@ exports.tester = function(){};
  * @returns {string}
  */
 exports.version = function(){
-    return '0.2.6';
+    return '0.2.9';
 };
 
 var equals = function (val, variable){
@@ -1941,7 +1943,7 @@ case 40:return 6;
 break;
 }
 },
-rules: [/^(?:style\b)/,/^(?:linkStyle\b)/,/^(?:classDef\b)/,/^(?:class\b)/,/^(?:click\b)/,/^(?:graph\b)/,/^(?:LR\b)/,/^(?:RL\b)/,/^(?:TB\b)/,/^(?:BT\b)/,/^(?:TD\b)/,/^(?:BR\b)/,/^(?:[0-9])/,/^(?:#)/,/^(?::)/,/^(?:;)/,/^(?:,)/,/^(?:=)/,/^(?:\*)/,/^(?:\.)/,/^(?:<)/,/^(?:>)/,/^(?:--[x])/,/^(?:-->)/,/^(?:--[o])/,/^(?:---)/,/^(?:-)/,/^(?:\+)/,/^(?:=)/,/^(?:[a-zåäöæøA-ZÅÄÖÆØ_])/,/^(?:\|)/,/^(?:\()/,/^(?:\))/,/^(?:\[)/,/^(?:\])/,/^(?:\{)/,/^(?:\})/,/^(?:")/,/^(?:\s)/,/^(?:\n)/,/^(?:$)/],
+rules: [/^(?:style\b)/,/^(?:linkStyle\b)/,/^(?:classDef\b)/,/^(?:class\b)/,/^(?:click\b)/,/^(?:graph\b)/,/^(?:LR\b)/,/^(?:RL\b)/,/^(?:TB\b)/,/^(?:BT\b)/,/^(?:TD\b)/,/^(?:BR\b)/,/^(?:[0-9])/,/^(?:#)/,/^(?::)/,/^(?:;)/,/^(?:,)/,/^(?:=)/,/^(?:\*)/,/^(?:\.)/,/^(?:<)/,/^(?:>)/,/^(?:--[x])/,/^(?:-->)/,/^(?:--[o])/,/^(?:---)/,/^(?:-)/,/^(?:\+)/,/^(?:=)/,/^(?:[a-zåäöæøA-ZÅÄÖÆØ_\u2000-\u206F\u2E00-\u2E7F\u0400-\u04FF])/,/^(?:\|)/,/^(?:\()/,/^(?:\))/,/^(?:\[)/,/^(?:\])/,/^(?:\{)/,/^(?:\})/,/^(?:")/,/^(?:\s)/,/^(?:\n)/,/^(?:$)/],
 conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"inclusive":true}}
 });
 return lexer;

dist/mermaid.slim.js

@@ -633,13 +633,14 @@ var flow = require('./parser/flow');
 var utils = require('./utils');
 var seq = require('./sequenceRenderer');
 var he = require('he');
+//var dagreD3 = require('dagre-d3');
 
 /**
  * Function that adds the vertices found in the graph definition to the graph to be rendered.
  * @param vert Object containing the vertices.
  * @param g The graph that is to be drawn.
  */
-var addVertices = function (vert, g) {
+exports.addVertices = function (vert, g) {
     var keys = Object.keys(vert);
 
     var styleFromStyleArr = function(styleStr,arr){
@@ -721,7 +722,7 @@ var addVertices = function (vert, g) {
  * @param edges
  * @param g
  */
-var addEdges = function (edges, g) {
+exports.addEdges = function (edges, g) {
     var cnt=0;
     var aHead;
     edges.forEach(function (edge) {
@@ -806,8 +807,8 @@ var draw = function (text, id) {
         classes.default = {id:'default'};
         classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
     }
-    addVertices(vert, g);
+    exports.addVertices(vert, g);
-    addEdges(edges, g);
+    exports.addEdges(edges, g);
 
     // Create the renderer
     var render = new dagreD3.render();
@@ -907,6 +908,7 @@ var init = function () {
         cnt++;
 
         var txt = element.innerHTML;
+
         txt = txt.replace(/>/g,'>');
         txt = txt.replace(/</g,'&lt;');
         txt = he.decode(txt).trim();
@@ -934,7 +936,7 @@ exports.tester = function(){};
  * @returns {string}
  */
 exports.version = function(){
-    return '0.2.6';
+    return '0.2.9';
 };
 
 var equals = function (val, variable){
@@ -1909,7 +1911,7 @@ case 40:return 6;
 break;
 }
 },
-rules: [/^(?:style\b)/,/^(?:linkStyle\b)/,/^(?:classDef\b)/,/^(?:class\b)/,/^(?:click\b)/,/^(?:graph\b)/,/^(?:LR\b)/,/^(?:RL\b)/,/^(?:TB\b)/,/^(?:BT\b)/,/^(?:TD\b)/,/^(?:BR\b)/,/^(?:[0-9])/,/^(?:#)/,/^(?::)/,/^(?:;)/,/^(?:,)/,/^(?:=)/,/^(?:\*)/,/^(?:\.)/,/^(?:<)/,/^(?:>)/,/^(?:--[x])/,/^(?:-->)/,/^(?:--[o])/,/^(?:---)/,/^(?:-)/,/^(?:\+)/,/^(?:=)/,/^(?:[a-zåäöæøA-ZÅÄÖÆØ_])/,/^(?:\|)/,/^(?:\()/,/^(?:\))/,/^(?:\[)/,/^(?:\])/,/^(?:\{)/,/^(?:\})/,/^(?:")/,/^(?:\s)/,/^(?:\n)/,/^(?:$)/],
+rules: [/^(?:style\b)/,/^(?:linkStyle\b)/,/^(?:classDef\b)/,/^(?:class\b)/,/^(?:click\b)/,/^(?:graph\b)/,/^(?:LR\b)/,/^(?:RL\b)/,/^(?:TB\b)/,/^(?:BT\b)/,/^(?:TD\b)/,/^(?:BR\b)/,/^(?:[0-9])/,/^(?:#)/,/^(?::)/,/^(?:;)/,/^(?:,)/,/^(?:=)/,/^(?:\*)/,/^(?:\.)/,/^(?:<)/,/^(?:>)/,/^(?:--[x])/,/^(?:-->)/,/^(?:--[o])/,/^(?:---)/,/^(?:-)/,/^(?:\+)/,/^(?:=)/,/^(?:[a-zåäöæøA-ZÅÄÖÆØ_\u2000-\u206F\u2E00-\u2E7F\u0400-\u04FF])/,/^(?:\|)/,/^(?:\()/,/^(?:\))/,/^(?:\[)/,/^(?:\])/,/^(?:\{)/,/^(?:\})/,/^(?:")/,/^(?:\s)/,/^(?:\n)/,/^(?:$)/],
 conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"inclusive":true}}
 });
 return lexer;

src/main.js

@@ -3,13 +3,14 @@ var flow = require('./parser/flow');
 var utils = require('./utils');
 var seq = require('./sequenceRenderer');
 var he = require('he');
+//var dagreD3 = require('dagre-d3');
 
 /**
  * Function that adds the vertices found in the graph definition to the graph to be rendered.
  * @param vert Object containing the vertices.
  * @param g The graph that is to be drawn.
  */
-var addVertices = function (vert, g) {
+exports.addVertices = function (vert, g) {
     var keys = Object.keys(vert);
 
     var styleFromStyleArr = function(styleStr,arr){
@@ -91,7 +92,7 @@ var addVertices = function (vert, g) {
  * @param edges
  * @param g
  */
-var addEdges = function (edges, g) {
+exports.addEdges = function (edges, g) {
     var cnt=0;
     var aHead;
     edges.forEach(function (edge) {
@@ -176,8 +177,8 @@ var draw = function (text, id) {
         classes.default = {id:'default'};
         classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
     }
-    addVertices(vert, g);
+    exports.addVertices(vert, g);
-    addEdges(edges, g);
+    exports.addEdges(edges, g);
 
     // Create the renderer
     var render = new dagreD3.render();
@@ -277,6 +278,7 @@ var init = function () {
         cnt++;
 
         var txt = element.innerHTML;
+
         txt = txt.replace(/>/g,'>');
         txt = txt.replace(/</g,'&lt;');
         txt = he.decode(txt).trim();
@@ -304,7 +306,7 @@ exports.tester = function(){};
  * @returns {string}
  */
 exports.version = function(){
-    return '0.2.6';
+    return '0.2.9';
 };
 
 var equals = function (val, variable){

src/main.spec.js

@@ -45,24 +45,102 @@ describe('when using main and ',function() {
 
     });
 
-    xdescribe('when calling addEdges ',function() {
+    describe('when calling addEdges ',function() {
         var main;
+        var graph = require('./graphDb');
+        var flow = require('./parser/flow');
+
         beforeEach(function () {
+            mermaid_config ={startOnLoad : false};
+            var MockBrowser = require('mock-browser').mocks.MockBrowser;
+            var mock = new MockBrowser();
+            flow.parser.yy =graph;
+            graph.clear();
+            document = mock.getDocument();
             main = rewire('./main');
         });
-        it('should have a version', function () {
+        it('it should handle edges with text', function () {
-            var edge = {start: 'start', end: 'end', type: 'arrow', text: 'test text'};
+            var res = flow.parser.parse('graph TD;A-->|text ex|B;');
-            var edges = [edge];
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
             var mockG = {
-                setEdge:function(start, end,options,name){}
+                setEdge:function(start, end,options,name){
+                    expect(start).toBe('A');
+                    expect(end).toBe('B');
+                    expect(options.arrowhead).toBe('vee');
+                    expect(options.label.match('text ex')).toBeTruthy();
+                }
             };
-            spyOn(mockG,'setEdge');
+
-            main.__set__('exports.apa',function(a,b){
+            main.addEdges(edges,mockG);
-                addEdges(a,b);
-            });
-            main.apa(edges,mockG);
-            expect(mockG.setEdge).toHaveBeenCalled();
         });
 
+        it('should handle edges without text', function () {
+            var res = flow.parser.parse('graph TD;A-->B;');
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+            var mockG = {
+                setEdge:function(start, end,options,name){
+                    expect(start).toBe('A');
+                    expect(end).toBe('B');
+                    expect(options.arrowhead).toBe('vee');
+                }
+            };
+
+            main.addEdges(edges,mockG);
+        });
+
+
+        it('should handle open-ended edges', function () {
+            var res = flow.parser.parse('graph TD;A---B;');
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+            var mockG = {
+                setEdge:function(start, end,options,name){
+                    expect(start).toBe('A');
+                    expect(end).toBe('B');
+                    expect(options.arrowhead).toBe('none');
+                }
+            };
+
+            main.addEdges(edges,mockG);
+        });
+
+        it('should handle edges with styles defined', function () {
+            var res = flow.parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;');
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+            var mockG = {
+                setEdge:function(start, end,options,name){
+                    expect(start).toBe('A');
+                    expect(end).toBe('B');
+                    expect(options.arrowhead).toBe('none');
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;');
+                }
+            };
+
+            main.addEdges(edges,mockG);
+        });
+        it('should handle edges with text and styles defined', function () {
+            var res = flow.parser.parse('graph TD;A---|the text|B; linkStyle 0 stroke:val1,stroke-width:val2;');
+            var vert = flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+            var mockG = {
+                setEdge:function(start, end,options,name){
+                    expect(start).toBe('A');
+                    expect(end).toBe('B');
+                    expect(options.arrowhead).toBe('none');
+                    expect(options.label.match('the text')).toBeTruthy();
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;');
+                }
+            };
+
+            main.addEdges(edges,mockG);
+        });
     });
 });

src/parser/flow.jison

@@ -33,7 +33,7 @@
 \-                    return 'MINUS';
 \+                    return 'PLUS';
 \=                    return 'EQUALS';
-[a-zåäöæøA-ZÅÄÖÆØ_]   return 'ALPHA';
+[a-zåäöæøA-ZÅÄÖÆØ_\u2000-\u206F\u2E00-\u2E7F\u0400-\u04FF]   return 'ALPHA';
 "|"                   return 'PIPE';
 "("                   return 'PS';
 ")"                   return 'PE';

src/parser/flow.js

@@ -733,7 +733,7 @@ case 40:return 6;
 break;
 }
 },
-rules: [/^(?:style\b)/,/^(?:linkStyle\b)/,/^(?:classDef\b)/,/^(?:class\b)/,/^(?:click\b)/,/^(?:graph\b)/,/^(?:LR\b)/,/^(?:RL\b)/,/^(?:TB\b)/,/^(?:BT\b)/,/^(?:TD\b)/,/^(?:BR\b)/,/^(?:[0-9])/,/^(?:#)/,/^(?::)/,/^(?:;)/,/^(?:,)/,/^(?:=)/,/^(?:\*)/,/^(?:\.)/,/^(?:<)/,/^(?:>)/,/^(?:--[x])/,/^(?:-->)/,/^(?:--[o])/,/^(?:---)/,/^(?:-)/,/^(?:\+)/,/^(?:=)/,/^(?:[a-zåäöæøA-ZÅÄÖÆØ_])/,/^(?:\|)/,/^(?:\()/,/^(?:\))/,/^(?:\[)/,/^(?:\])/,/^(?:\{)/,/^(?:\})/,/^(?:")/,/^(?:\s)/,/^(?:\n)/,/^(?:$)/],
+rules: [/^(?:style\b)/,/^(?:linkStyle\b)/,/^(?:classDef\b)/,/^(?:class\b)/,/^(?:click\b)/,/^(?:graph\b)/,/^(?:LR\b)/,/^(?:RL\b)/,/^(?:TB\b)/,/^(?:BT\b)/,/^(?:TD\b)/,/^(?:BR\b)/,/^(?:[0-9])/,/^(?:#)/,/^(?::)/,/^(?:;)/,/^(?:,)/,/^(?:=)/,/^(?:\*)/,/^(?:\.)/,/^(?:<)/,/^(?:>)/,/^(?:--[x])/,/^(?:-->)/,/^(?:--[o])/,/^(?:---)/,/^(?:-)/,/^(?:\+)/,/^(?:=)/,/^(?:[a-zåäöæøA-ZÅÄÖÆØ_\u2000-\u206F\u2E00-\u2E7F\u0400-\u04FF])/,/^(?:\|)/,/^(?:\()/,/^(?:\))/,/^(?:\[)/,/^(?:\])/,/^(?:\{)/,/^(?:\})/,/^(?:")/,/^(?:\s)/,/^(?:\n)/,/^(?:$)/],
 conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"inclusive":true}}
 });
 return lexer;

test/web.html

@@ -16,27 +16,9 @@
     </script>
 </head>
     <body>
-    <div class="mermaid2">
+    <div class="mermaid">
-    sequence TB
-        apa:Apanhoppar
-        bapa:Server
-        chimp:Chimpansenhoppar
-    </div>
-    <div class="mermaid2">
-        graph TB;A(Astrid <br> b)-->B[Irene];
-        A-->C[Christer];
-        B-->D[Micke];
-        B-->E[Maria];
-        E-->F[Hjalte];
-        E-->G[Embla];
-        E-->J[Vidar];
-        E-->H[Bjarke];
-        E-->I[Ingvild];
-        click A apa;
-    </div>
-    <div class="mermaid2">
         graph TD;
-        id1>This is the text in the box];
+        sq[Square shape]-->ci((Circle shape Начало));
     </div>
     <h1>Shapes</h1>
     <div class="mermaid">