Release 0.2.16

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "authors": [
     "knsv <[email protected]>"
   ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "Markdownish syntax for generating flowcharts",
   "main": "src/main.js",
   "scripts": {

src/diagrams/flowchart/parser/flow.jison

@@ -138,6 +138,7 @@ graphConfig
 
 statements
     : statement spaceListNewline statements
+    | statement statements
     | statement
     ;
 
@@ -157,27 +158,16 @@ spaceList
 
 statement
     : commentStatement NEWLINE
-    {$$='Comment';}
-    | verticeStatement SEMI
-    | verticeStatement NEWLINE
-    | verticeStatement EOF
-    | styleStatement SEMI
-    | styleStatement NEWLINE
-    | styleStatement EOF
-    | linkStyleStatement SEMI
-    | linkStyleStatement NEWLINE
-    | linkStyleStatement EOF
-    | classDefStatement SEMI
-    | classDefStatement NEWLINE
-    | classDefStatement EOF
-    | classStatement SEMI
-    | classStatement NEWLINE
-    | classStatement EOF
-    | clickStatement SEMI
-    | clickStatement NEWLINE
-    | clickStatement EOF
+    | verticeStatement separator
+    | styleStatement separator
+    | linkStyleStatement separator
+    | classDefStatement separator
+    | classStatement separator
+    | clickStatement separator
     ;
 
+separator: NEWLINE | SEMI | EOF ;
+
 verticeStatement:
      vertex link vertex
         { yy.addLink($1,$3,$2);$$ = 'oy'}

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

@@ -61,6 +61,21 @@ describe('when parsing ',function(){
         expect(edges[0].type).toBe('arrow');
         expect(edges[0].text).toBe('');
     });
+    it('should handle statements ending without semicolon',function(){
+        var res = flow.parser.parse('graph TD\nA-->B\nB-->C');
+
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(2);
+        expect(edges[1].start).toBe('B');
+        expect(edges[1].end).toBe('C');
+        expect(edges[0].type).toBe('arrow');
+        expect(edges[0].text).toBe('');
+    });
 
     it('should handle a comments',function(){
         var res = flow.parser.parse('graph TD;\n%% CComment\n A-->B;');

src/diagrams/sequenceDiagram/sequenceRenderer.js

@@ -13,18 +13,6 @@ sq.yy = require('./sequenceDb');
  * @param description The text in the box
  */
 var drawNote = function(elem, startX, verticalPos, msg){
-    var insertLinebreaks = function (d) {
-        var el = d3.select(this);
-        var words = d.split(' ');
-        el.text('');
-
-        for (var i = 0; i < words.length; i++) {
-            var tspan = el.append('tspan').text(words[i]);
-            if (i > 0)
-                tspan.attr('x', 0).attr('dy', '15');
-        }
-    };
-
     var g = elem.append("g");
     var rectElem = g.append("rect")
         .attr("x", startX + 25)
@@ -41,20 +29,32 @@ var drawNote = function(elem, startX, verticalPos, msg){
         .style("text-anchor", "start");
     msg.message.split('<br>').forEach(function(rowText){
         textElem.append("tspan")
-            .attr("x", startX + 35)
+            .attr("x", startX + 35 )
             .attr("dy", '1em')
             .text(rowText);
     });
 
     console.log('textElem.height');
     console.log(textElem[0][0].getBBox());
     rectElem.attr('height',textElem[0][0].getBBox().height+20);
-    //console.log(textElem.getBBox().height);
 
-        //.text(msg.message + '\n' + msg.message)
+    return verticalPos + textElem[0][0].getBBox().height - 10;
+};
 
 
-    return verticalPos + textElem[0][0].getBBox().height - 10;
+/**
+ * Setup arrow head and define the marker. The result is appended to the svg.
+ */
+var insertArrowHead = function(elem){
+    elem.append("defs").append("marker")
+        .attr("id", "arrowhead")
+        .attr("refX", 5) /*must be smarter way to calculate shift*/
+        .attr("refY", 2)
+        .attr("markerWidth", 6)
+        .attr("markerHeight", 4)
+        .attr("orient", "auto")
+        .append("path")
+        .attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
 };
 
 /**
@@ -73,6 +73,7 @@ module.exports.draw = function (text, id) {
     var height = 65;
     var yStartMargin = 10;
     var diagram = d3.select('#'+id);
+
     /**
      * Draws an actor in the diagram with the attaced line
      * @param center - The center of the the actor
@@ -106,21 +107,6 @@ module.exports.draw = function (text, id) {
         ;
     };
 
-    /**
-     * Setup arrow head and define the marker. The result is appended to the svg.
-     */
-    var insertArrowHead = function(elem){
-        elem.append("defs").append("marker")
-            .attr("id", "arrowhead")
-            .attr("refX", 5) /*must be smarter way to calculate shift*/
-            .attr("refY", 2)
-            .attr("markerWidth", 6)
-            .attr("markerHeight", 4)
-            .attr("orient", "auto")
-            .append("path")
-            .attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
-    };
-
     var drawMessage = function(elem, startx, stopx, verticalPos, txtCenter, msg){
         var g = elem.append("g");
         //Make an SVG Container
@@ -220,4 +206,5 @@ module.exports.draw = function (text, id) {
 
     diagram.attr("height", verticalPos + 40);
     diagram.attr("width", maxX );
+    diagram.attr("transform", 'translate(150 0)' );
 };

test/web.html

@@ -58,7 +58,7 @@ <h1>Sequence diagrams (experimental)</h1>
     <div class="mermaid">
         sequenceDiagram
         Alice->Bob: Hello Bob, how are you?
-        Note right of Bob: Bob thinks about <br/> things <br/> to think about
+        Note right of Alice: Bob thinks about <br/> things <br/> to think about
         Bob-->Alice: I am good thanks!
         Bob-->John the Long: How about you John?
         Bob-->Alice: Checking with John...

test/web_style.html

@@ -57,7 +57,7 @@ <h3>CSS in the page head:</h3>
     </pre>
     <h3>Graph definition</h3>
     <pre>
-    graph TD;
+    graph LR;
 
         noc[No class&lt;br />using default];
         cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
@@ -98,7 +98,7 @@ <h3>Graph definition</h3>
     </pre>
 
     <div class="mermaid">
-        graph TD;
+        graph LR;
 
         noc[No class<br />using default];
         cyr2((Class node-cyr-undefined<br />is undefined, using default));