* Support for comments pointed out in issue #47

src/main.js

@@ -32,6 +32,10 @@ exports.addVertices = function (vert, g) {
 
         var i;
 
+        /**
+         * Variable for storing the extracted style for the vertice
+         * @type {string}
+         */
         var style = '';
         var classes = graph.getClasses();
         // Check if class is defined for the node
@@ -89,8 +93,8 @@ exports.addVertices = function (vert, g) {
 
 /**
  * Add edges to graph based on parsed graph defninition
- * @param edges
- * @param g
+ * @param {Object} edges The edges to add to the graph
+ * @param {Object} g The graph object
  */
 exports.addEdges = function (edges, g) {
     var cnt=0;
@@ -272,7 +276,17 @@ var draw = function (text, id,isDot) {
 };
 
 /**
- * Go through the document and find the chart definitions in there and render the charts
+ * Function that goes through the document to find the chart definitions in there and render them.
+ *
+ * The function tags the processed attributes with the attribute data-processed and ignores found elements with the
+ * attribute already set. This way the init function can be triggered several times.
+ *
+ * ```
+ * graph LR;
+ *  a(Find elements)-->b{Processed};
+ *  b-->|Yes|c(Leave element);
+ *  c-->|No |d(Transform);
+ * ```
  */
 var init = function () {
     var arr = document.querySelectorAll('.mermaid');
@@ -322,8 +336,8 @@ var init = function () {
 exports.tester = function(){};
 
 /**
- * Version management
- * @returns {string}
+ * Function returning version information
+ * @returns {string} A string containing the version info
  */
 exports.version = function(){
     return require('../package.json').version;

src/main.spec.js

@@ -36,7 +36,6 @@ describe('when using main and ',function() {
         it('should start something with a mermaid document', function () {
             mermaid_config ={startOnLoad : false};
             main = rewire('./main');
-            console.log('here');
             document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>';
             spyOn(utils,'detectType');
             mermaid.init();

src/parser/flow.jison

@@ -32,6 +32,7 @@
 \-\-\-                return 'ARROW_OPEN';
 \-                    return 'MINUS';
 \+                    return 'PLUS';
+\%                    return 'PCT';
 \=                    return 'EQUALS';
 [\u0021-\u0027\u002A-\u002E\u003F\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
@@ -103,9 +104,8 @@
 "{"                   return 'DIAMOND_START'
 "}"                   return 'DIAMOND_STOP'
 "\""                  return 'QUOTE';
-\s                    return 'SPACE';
 \n                    return 'NEWLINE';
-
+\s                    return 'SPACE';
 <<EOF>>               return 'EOF';
 
 /lex
@@ -120,7 +120,7 @@
 
 expressions
     : graphConfig statements EOF
-    | graphConfig spaceList statements EOF
+    | graphConfig spaceListNewline statements EOF
         {$$=$1;}
     ;
 
@@ -130,17 +130,27 @@ graphConfig
     ;
 
 statements
-    : statement spaceList statements
+    : statement spaceListNewline statements
     | statement
     ;
 
+
+spaceListNewline
+    : spaceList
+    | NEWLINE spaceListNewline
+    | NEWLINE
+    ;
+
+
 spaceList
     : SPACE spaceList
     | SPACE
     ;
 
 statement
-    : verticeStatement SEMI
+    : commentStatement NEWLINE
+    {$$='Comment';}
+    | verticeStatement SEMI
     | styleStatement SEMI
     | linkStyleStatement SEMI
     | classDefStatement SEMI
@@ -202,7 +212,6 @@ alphaNumToken
         {$$ = $1;}
     | DOT
         {$$ = $1;}
-
     | BRKT
         {$$ = '<br>';}
     ;
@@ -325,7 +334,10 @@ linkStyleStatement:
     LINKSTYLE SPACE NUM SPACE stylesOpt
           {$$ = $1;yy.updateLink($3,$5);}
     ;
-
+commentStatement:
+    PCT PCT text
+          {$$ = $1;}
+    ;
 stylesOpt: style
         {$$ = [$1]}
     | stylesOpt COMMA style

src/parser/flow.spec.js

@@ -30,6 +30,38 @@ describe('when parsing ',function(){
         expect(edges[0].text).toBe('');
     });
 
+    it('should handle a comments',function(){
+        var res = flow.parser.parse('graph TD;\n%% CComment\n A-->B;');
+
+
+        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(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe('arrow');
+        expect(edges[0].text).toBe('');
+    });
+
+    it('should handle a comments with blank rows in-between',function(){
+        var res = flow.parser.parse('graph TD;\n\n\n %% CComment\n A-->B;');
+
+
+        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(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe('arrow');
+        expect(edges[0].text).toBe('');
+    });
+
     it('should handle open ended edges',function(){
         var res = flow.parser.parse('graph TD;A---B;');
 

src/utils.js

@@ -1,7 +1,13 @@
 /**
  * Created by knut on 14-11-23.
  */
-module.exports.detectType = function(text){
+/**
+ * Detects the type of the graph text.
+ * @param {string} text The text defining the graph
+ * @param {string} text The second text defining the graph
+ * @returns {string} A graph definition key
+ */
+module.exports.detectType = function(text,a){
     if(text.match(/^\s*sequenceDiagram/)){
         console.log('Detected sequenceDiagram syntax');
         return "sequenceDiagram";