mermaid - npm Package Compare versions

Comparing version 0.5.3 to 0.5.4

build/content/flowchart.md

@@ -397,2 +397,30 @@ ---
 
+## Basic support for fontawesome
+
+It is possible to add icons from fontawesome. In order to do so, you need to add the fontwesome as described in the instructions at 
+[the fontawesome web site](https://fortawesome.github.io/Font-Awesome/).
+
+The icons are acessed via the syntax fa:#icon class name#.
+
+The example code below
+```
+graph TD
+    B["fa:fa-twitter for peace"]
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner);
+    B-->E(A fa:fa-camera-retro perhaps?);
+```
+
+Would render the graph below:
+
+```mermaid
+graph TD
+    B["fa:fa-twitter for peace"]
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner);
+    B-->E(A fa:fa-camera-retro perhaps?);
+```
+
+<aside class="success">Support for fontawesome has been comitted to the  master branch and will be included in 0.5.3</aside>
+
 ## Graph declarations with spaces between vertices and link and without semicolon
@@ -399,0 +427,0 @@

build/content/mermaidCLI.md

@@ -28,2 +28,3 @@ ---
   -v --verbose         Show logging
+  -w --width           width of the generated png (number)
   --version            Print version and quit
@@ -33,3 +34,4 @@ ```
 ```
-mermaid testGraph.mmd 
+mermaid testGraph.mmd
+mermaid testGraph.mmd -w 980
 ```
@@ -36,0 +38,0 @@

conf/karma.conf.js

@@ -12,3 +12,3 @@ // Karma configuration
         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['jasmine'],
+        frameworks: ['browserify', 'jasmine'],
 
@@ -21,2 +21,5 @@
 
+        preprocessors: {
+            '../src/**/*.js': [ 'babel','browserify' ]
+        },
 
@@ -26,3 +29,9 @@ // list of files to exclude
 
-
+        "babelPreprocessor": {
+            // options go here
+        },
+        browserify: {
+            debug: true,
+            //transform: [ 'brfs' ]
+        },
         // preprocess matching files before serving them to the browser
@@ -29,0 +38,0 @@ // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor

docs/content/flowchart.md

@@ -397,2 +397,30 @@ ---
 
+## Basic support for fontawesome
+
+It is possible to add icons from fontawesome. In order to do so, you need to add the fontwesome as described in the instructions at 
+[the fontawesome web site](https://fortawesome.github.io/Font-Awesome/).
+
+The icons are acessed via the syntax fa:#icon class name#.
+
+The example code below
+```
+graph TD
+    B["fa:fa-twitter for peace"]
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner);
+    B-->E(A fa:fa-camera-retro perhaps?);
+```
+
+Would render the graph below:
+
+```mermaid
+graph TD
+    B["fa:fa-twitter for peace"]
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner);
+    B-->E(A fa:fa-camera-retro perhaps?);
+```
+
+<aside class="success">Support for fontawesome has been comitted to the  master branch and will be included in 0.5.3</aside>
+
 ## Graph declarations with spaces between vertices and link and without semicolon
@@ -399,0 +427,0 @@

docs/content/mermaidCLI.md

@@ -28,2 +28,3 @@ ---
   -v --verbose         Show logging
+  -w --width           width of the generated png (number)
   --version            Print version and quit
@@ -33,3 +34,4 @@ ```
 ```
-mermaid testGraph.mmd 
+mermaid testGraph.mmd
+mermaid testGraph.mmd -w 980
 ```
@@ -36,0 +38,0 @@

lib/cli.js

@@ -30,2 +30,3 @@ var fs = require('fs')
         , css: 't'
+        , width: 'w'
       }
@@ -54,2 +55,3 @@ , 'boolean': ['help', 'png', 'svg']
     , "  -v --verbose         Show logging"
+    , "  -w --width           width of the generated png (number)"
     , "  --version            Print version and quit"
@@ -102,7 +104,4 @@ ]
 
-
     if (options.ganttConfig) {
-        console.log('Got conf1'+options.ganttConfig);
       options.ganttConfig = checkConfig(options.ganttConfig)
-      console.log('Got conf'+options.ganttConfig);
     }
@@ -120,2 +119,7 @@
 
+    // set svg/png flags appropriately
+    if(!options.width){
+      options.width = 1200;
+    }
+
     this.checkPhantom = createCheckPhantom(options.phantomPath)
@@ -122,0 +126,0 @@

lib/index.js

@@ -25,2 +25,3 @@ var os = require('os')
         , options.verbose
+        , options.width
       ]
@@ -27,0 +28,0 @@

lib/phantomscript.js

@@ -33,4 +33,10 @@ /**
 var page = webpage.create()
-  , files = phantom.args.slice(7, phantom.args.length)
-  , options = {
+  , files = phantom.args.slice(8, phantom.args.length)
+  , width = phantom.args[7]
+
+if(typeof width === 'undefined'){
+  width = 1200;
+}
+
+var options = {
         outputDir: phantom.args[0]
@@ -43,2 +49,3 @@ , png: phantom.args[1] === 'true' ? true : false
       , verbose: phantom.args[6] === 'true' ? true : false
+      , width: width
     }
@@ -85,3 +92,4 @@ , log = logger(options.verbose)
     ganttConfig    : options.ganttConfig,
-    sequenceConfig : options.sequenceConfig
+    sequenceConfig : options.sequenceConfig,
+    confWidth      : options.width
   })
@@ -219,2 +227,3 @@ oDOM = oParser.parseFromString(svgContent, "text/xml")
     , height
+    , confWidth = data.confWidth
 
@@ -235,3 +244,4 @@ toRemove = document.getElementsByClassName('mermaid')
   mermaid.initialize({
-    sequenceDiagram:{useMaxWidth:false}
+    sequenceDiagram:{useMaxWidth:false},
+    flowchart:{useMaxWidth:false}
   });
@@ -264,3 +274,4 @@
 
-
+  //console.log(document.head.innerHTML);
+  //console.log(document.body.innerHTML);
   mermaid.init();
@@ -274,6 +285,8 @@
 
+  var scalefactor = confWidth/(width-8);
+
   // resizing the body to fit the svg
   document.body.setAttribute(
     'style'
-    , 'width: ' + width + '; height: ' + height + ';'
+    , 'width: ' + (confWidth-8) + '; height: ' + (height*scalefactor) + ';'
   )
@@ -283,3 +296,3 @@ // resizing the svg via css for consistent display
     'style'
-    , 'width: ' + width + '; height: ' + height + ';'
+    , 'width: ' + (confWidth-8) + '; height: ' + (height*scalefactor) + ';'
   )
@@ -290,7 +303,7 @@
     'width'
-    , width
+    , confWidth
   )
   svg.setAttribute(
     'height'
-    , height
+    , height*scalefactor
   )
@@ -297,0 +310,0 @@

package.json

 {
   "name": "mermaid",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.",
@@ -17,5 +17,14 @@ "main": "src/mermaid.js",
   "scripts": {
-    "watch": "watchify src/mermaid.js -o dist/mermaid.js",
+    "live": "live-server ./test/examples",
+    "lint": "node node_modules/eslint/bin/eslint.js src",
+    "watch": "source  ./scripts/watch.sh",
     "doc": "rm -r build;rm -r dist/www;gulp vartree;cp dist/www/all.html ../mermaid-pages/index.html;cp dist/mermaid.js ../mermaid-pages/javascripts/lib;cp dist/mermaid.forest.css ../mermaid-pages/stylesheets",
-    "test": "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
+    "tape": "node node_modules/.bin/tape test/cli_test-*.js",
+    "jasmine": "node node_modules/jasmine-es6/bin/jasmine.js",
+    "test": "npm run dist && npm run jasmine && npm run tape",
+    "dist-slim-mermaid": "node node_modules/browserify/bin/cmd.js src/mermaid.js  -t babelify  -s mermaid    -o dist/mermaid.slim.js    -x d3   && cat dist/mermaid.slim.js    | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaid.slim.min.js",
+    "dist-slim-mermaidAPI": "node node_modules/browserify/bin/cmd.js src/mermaidAPI.js -t babelify -s mermaidAPI -o dist/mermaidAPI.slim.js -x d3 && cat dist/mermaidAPI.slim.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaidAPI.slim.min.js",
+    "dist-mermaid": "node node_modules/browserify/bin/cmd.js src/mermaid.js  -t babelify  -s mermaid    -o dist/mermaid.js         && cat dist/mermaid.js         | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaid.min.js",
+    "dist-mermaidAPI": "node node_modules/browserify/bin/cmd.js src/mermaidAPI.js -t babelify -s mermaidAPI -o dist/mermaidAPI.js      && cat dist/mermaidAPI.js      | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaidAPI.min.js",
+    "dist": "npm run dist-slim-mermaid;npm run dist-slim-mermaidAPI; npm run dist-mermaid;npm run dist-mermaidAPI"
   },
@@ -30,3 +39,3 @@ "repository": {
     "chalk": "^0.5.1",
-    "d3": "~3.4.13",
+    "d3": "~3.5.6",
     "dagre-d3": "~0.4.8",
@@ -42,14 +51,15 @@ "he": "^0.5.0",
     "async": "^0.9.0",
+    "babel-eslint": "^4.1.3",
+    "babelify": "^6.3.0",
     "browserify": "~6.2.0",
     "clone": "^0.2.0",
     "codeclimate-test-reporter": "0.0.4",
-    "connect-livereload": "^0.5.3",
-    "d3": "~3.4.13",
     "dateformat": "^1.0.11",
     "dox": "^0.8.0",
+    "eslint": "^1.6.0",
+    "eslint-watch": "^2.1.2",
     "event-stream": "^3.2.0",
-    "express": "^4.12.4",
     "foundation": "^4.2.1-1",
     "front-matter": "^0.2.0",
-    "gulp": "~3.8.9",
+    "gulp": "~3.9.0",
     "gulp-bower": "0.0.10",
@@ -68,3 +78,3 @@ "gulp-browserify": "^0.5.0",
     "gulp-istanbul": "^0.4.0",
-    "gulp-jasmine": "~1.0.1",
+    "gulp-jasmine": "~2.1.0",
     "gulp-jison": "~1.2.0",
@@ -82,27 +92,14 @@ "gulp-jshint": "^1.9.0",
     "gulp-vartree": "^2.0.1",
-    "he": "^0.5.0",
     "hogan.js": "^3.0.2",
-    "jasmine": "~2.0.1",
+    "jasmine": "2.3.2",
+    "jasmine-es6": "0.0.18",
     "jison": "~0.4.15",
-    "jshint-stylish": "^1.0.0",
-    "karma": "~0.12.20",
-    "karma-chrome-launcher": "~0.1.5",
-    "karma-jasmine": "~0.2.1",
-    "karma-requirejs": "~0.2.2",
-    "lodash": "^2.4.1",
-    "lodash._escapestringchar": "^2.4.1",
-    "lodash._objecttypes": "^2.4.1",
-    "lodash._reinterpolate": "^2.4.1",
-    "lodash._reunescapedhtml": "^2.4.1",
-    "lodash.defaults": "^2.4.1",
-    "lodash.templatesettings": "^2.4.1",
-    "lodash.values": "^2.4.1",
+    "jsdom": "^6.5.1",
+    "jshint-stylish": "^2.0.1",
     "map-stream": "0.0.6",
     "marked": "^0.3.2",
-    "mock-browser": "^0.90.27",
+    "mock-browser": "^0.91.34",
     "path": "^0.4.9",
-    "phantomjs": "^1.9.17",
+    "phantomjs": "^1.9.18",
     "proxyquire": "^1.3.1",
-    "readable-stream": "^2.0.2",
-    "replacestream": "^4.0.0",
     "require-dir": "^0.3.0",
@@ -112,3 +109,3 @@ "rewire": "^2.1.3",
     "tape": "^3.0.3",
-    "tiny-lr": "^0.1.6",
+    "uglifyjs": "^2.4.10",
     "vinyl-source-stream": "^1.1.0",
@@ -115,0 +112,0 @@ "watchify": "^3.2.2"

src/d3.js

@@ -7,3 +7,3 @@ /* global window */
   try {
-    d3 = require("d3");
+    d3 = require('d3');
   } catch (e) {
@@ -219,3 +219,3 @@ //log.debug('Exception ... but ok');
                 foreign_object
-                    .attr("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Extensibility")
+                    .attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
                     .attr('x', bounds.x)
@@ -222,0 +222,0 @@ .attr('y', bounds.y)

src/diagrams/example/example.spec.js

@@ -5,10 +5,6 @@ /**
 describe('when parsing an info graph it',function() {
-    var parseError;
+    var ex;
     beforeEach(function () {
         ex = require('./parser/example').parser;
         ex.yy = require('./exampleDb');
-        parseError = function(err, hash) {
-            log.debug('Syntax error:' + err);
-        };
-        //ex.yy.parseError = parseError;
     });
@@ -15,0 +11,0 @@

src/diagrams/example/exampleDb.js

 /**
  * Created by knut on 15-01-14.
  */
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 var message = '';
@@ -9,2 +11,3 @@ var info = false;
 exports.setMessage = function(txt){
+    log.debug('Setting message to: '+txt);
     message = txt;
@@ -26,3 +29,3 @@ };
 exports.parseError = function(err,hash){
-    mermaidAPI.parseError(err,hash);
+    global.mermaidAPI.parseError(err,hash);
 };

src/diagrams/example/exampleRenderer.js

@@ -7,3 +7,5 @@ /**
 var d3 = require('../../d3');
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 /**
@@ -18,3 +20,3 @@ * Draws a an info picture in the tag with id: id based on the graph definition in text.
     parser.yy = db;
-
+    log.debug('Renering example diagram');
     // Parse the graph definition
@@ -26,11 +28,10 @@ parser.parse(txt);
 
-    var textstring = "mermaid!";
-    var g = svg.append("g");
+    var g = svg.append('g');
 
-    g.append("text")      // text label for the x axis
-        .attr("x", 100)
-        .attr("y", 40)
+    g.append('text')      // text label for the x axis
+        .attr('x', 100)
+        .attr('y', 40)
         .attr('class','version')
         .attr('font-size','32px')
-        .style("text-anchor", "middle")
+        .style('text-anchor', 'middle')
         .text('mermaid '+ ver);
@@ -44,5 +45,5 @@
 
-    svg.attr("height",100);
-    svg.attr("width", 400 );
-    //svg.attr("viewBox", '0 0 300 150');
+    svg.attr('height',100);
+    svg.attr('width', 400 );
+    //svg.attr('viewBox', '0 0 300 150');
 };

src/diagrams/example/parser/example.js

@@ -142,3 +142,3 @@ /* parser generated by jison 0.4.15 */
     _token_stack:
-        function lex() {
+        var lex = function () {
             var token;
@@ -150,3 +150,3 @@ token = lexer.lex() || EOF;
             return token;
-        }
+        };
     var symbol, preErrorSymbol, state, action, a, r, yyval = {}, p, len, newState, expected;
@@ -153,0 +153,0 @@ while (true) {

src/diagrams/flowchart/d3.js

@@ -7,3 +7,3 @@ /* global window */
   try {
-    d3 = require("d3");
+    d3 = require('d3');
   } catch (e) {}
@@ -10,0 +10,0 @@ }

src/diagrams/flowchart/dagre-d3.js

 /* global window */
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 var dagreD3;
@@ -7,3 +9,3 @@ //log.debug('setting up dagre-d3');
   try {
-    dagreD3 = require("dagre-d3");
+    dagreD3 = require('dagre-d3');
       //log.debug('Got it (dagre-d3)');
@@ -10,0 +12,0 @@ } catch (e) {log.debug('Could not load dagre-d3');}

src/diagrams/flowchart/flowRenderer.js

@@ -9,4 +9,6 @@ /**
 var dagreD3 = require('./dagre-d3');
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
 
+
 var conf = {
@@ -47,4 +49,2 @@ };
 
-        var i;
-
         /**
@@ -59,3 +59,3 @@ * Variable for storing the classes for the vertice
         if(vertice.classes.length >0){
-            classStr = vertice.classes.join(" ");
+            classStr = vertice.classes.join(' ');
         }
@@ -79,7 +79,13 @@
 
+
+
         var labelTypeStr = '';
         if(conf.htmlLabels) {
             labelTypeStr = 'html';
+            verticeText = verticeText.replace(/fa:fa[\w\-]+/g,function(s){
+                return '<i class="fa '+ s.substring(3)+'">';
+            });
+
         } else {
-            verticeText = verticeText.replace(/<br>/g, "\n");
+            verticeText = verticeText.replace(/<br>/g, '\n');
             labelTypeStr = 'text';
@@ -120,3 +126,3 @@ }
         // Add the node
-        g.setNode(vertice.id, {labelType: labelTypeStr, shape:_shape, label: verticeText, rx: radious, ry: radious, class: classStr, style: style, id:vertice.id});
+        g.setNode(vertice.id, {labelType: labelTypeStr, shape:_shape, label: verticeText, rx: radious, ry: radious, 'class': classStr, style: style, id:vertice.id});
     });
@@ -182,3 +188,3 @@ };
                 g.setEdge(edge.start, edge.end, {
-                    style: style, arrowheadStyle: "fill: #333", arrowhead: aHead
+                    style: style, arrowheadStyle: 'fill: #333', arrowhead: aHead
                 },cnt);
@@ -189,12 +195,12 @@ }
         else {
-            var edgeText = edge.text.replace(/<br>/g, "\n");
+            var edgeText = edge.text.replace(/<br>/g, '\n');
             if(typeof edge.style === 'undefined'){
                 if (conf.htmlLabels){
-                    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);
+                    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: "text", style: "stroke: #333; stroke-width: 1.5px;fill:none", labelpos:'c', label: edgeText, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
+                    g.setEdge(edge.start, edge.end,{labelType: 'text', style: 'stroke: #333; stroke-width: 1.5px;fill:none', labelpos:'c', label: edgeText, arrowheadStyle: 'fill: #333', arrowhead: aHead},cnt);
                 }
              }else{
                 g.setEdge(edge.start, edge.end, {
-                    labelType: "text", style: style, arrowheadStyle: "fill: #333", label: edgeText, arrowhead: aHead
+                    labelType: 'text', style: style, arrowheadStyle: 'fill: #333', label: edgeText, arrowhead: aHead
                 },cnt);
@@ -261,3 +267,3 @@ }
     catch(err){
-
+        log.debug('Parsing failed');
     }
@@ -330,9 +336,9 @@
             ];
-        var shapeSvg = parent.insert("polygon", ":first-child")
-            .attr("points", points.map(function (d) {
-                return d.x + "," + d.y;
-            }).join(" "))
-            .attr("rx", 5)
-            .attr("ry", 5)
-            .attr("transform", "translate(" + (-s / 2) + "," + (s * 2 / 4) + ")");
+        var shapeSvg = parent.insert('polygon', ':first-child')
+            .attr('points', points.map(function (d) {
+                return d.x + ',' + d.y;
+            }).join(' '))
+            .attr('rx', 5)
+            .attr('ry', 5)
+            .attr('transform', 'translate(' + (-s / 2) + ',' + (s * 2 / 4) + ')');
         node.intersect = function (point) {
@@ -353,9 +359,9 @@ return dagreD3.intersect.polygon(node, points, point);
                 {x: -h/2, y: -h},
-                {x: 0, y: -h/2},
+                {x: 0, y: -h/2}
             ];
-        var shapeSvg = parent.insert("polygon", ":first-child")
-            .attr("points", points.map(function (d) {
-                return d.x + "," + d.y;
-            }).join(" "))
-            .attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
+        var shapeSvg = parent.insert('polygon', ':first-child')
+            .attr('points', points.map(function (d) {
+                return d.x + ',' + d.y;
+            }).join(' '))
+            .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')');
         node.intersect = function (point) {
@@ -376,9 +382,9 @@ return dagreD3.intersect.polygon(node, points, point);
                 {x: w+h/2, y: -h},
-                {x: 0, y: -h},
+                {x: 0, y: -h}
             ];
-        var shapeSvg = parent.insert("polygon", ":first-child")
-            .attr("points", points.map(function (d) {
-                return d.x + "," + d.y;
-            }).join(" "))
-            .attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
+        var shapeSvg = parent.insert('polygon', ':first-child')
+            .attr('points', points.map(function (d) {
+                return d.x + ',' + d.y;
+            }).join(' '))
+            .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')');
         node.intersect = function (point) {
@@ -392,37 +398,31 @@ return dagreD3.intersect.polygon(node, points, point);
     render.arrows().none = function normal(parent, id, edge, type) {
-        var marker = parent.append("marker")
-            .attr("id", id)
-            .attr("viewBox", "0 0 10 10")
-            .attr("refX", 9)
-            .attr("refY", 5)
-            .attr("markerUnits", "strokeWidth")
-            .attr("markerWidth", 8)
-            .attr("markerHeight", 6)
-            .attr("orient", "auto");
+        var marker = parent.append('marker')
+            .attr('id', id)
+            .attr('viewBox', '0 0 10 10')
+            .attr('refX', 9)
+            .attr('refY', 5)
+            .attr('markerUnits', 'strokeWidth')
+            .attr('markerWidth', 8)
+            .attr('markerHeight', 6)
+            .attr('orient', 'auto');
 
-        var path = marker.append("path")
-            .attr("d", "M 0 0 L 0 0 L 0 0 z");
-        dagreD3.util.applyStyle(path, edge[type + "Style"]);
+        var path = marker.append('path')
+            .attr('d', 'M 0 0 L 0 0 L 0 0 z');
+        dagreD3.util.applyStyle(path, edge[type + 'Style']);
     };
 
     // Set up an SVG group so that we can translate the final graph.
-    var svg = d3.select("#" + id);
-    svgGroup = d3.select("#" + id + " g");
+    var svg = d3.select('#' + id);
+    //svgGroup = d3.select('#' + id + ' g');
 
     // Run the renderer. This is what draws the final graph.
-    var element = d3.select("#" + id + " g");
+    var element = d3.select('#' + id + ' g');
     render(element, g);
 
     //var tip = d3.tip().html(function(d) { return d; });
-    element.selectAll("g.node")
-                .attr("title", function(){
+    element.selectAll('g.node')
+                .attr('title', function(){
             return graph.getTooltip(this.id);
         });
 
-    //
-    //element.selectAll("g.node")
-    //    .attr("title", function(v) { return styleTooltip(v, g.node(v).description) })
-    //    .each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });
-    var svgb = document.querySelector("#" + id);
-
 /*
@@ -442,6 +442,6 @@ var xPos = document.querySelectorAll('.clusters rect')[0].x.baseVal.value;
         // Center the graph
-        svg.attr("height", '100%');
-        svg.attr("width", conf.width);
-        //svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
-        svg.attr("viewBox", '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
+        svg.attr('height', '100%');
+        svg.attr('width', conf.width);
+        //svg.attr('viewBox', svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
+        svg.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
         svg.attr('style', 'max-width:' + (g.graph().width + 20) + 'px;');
@@ -451,10 +451,10 @@ }
         // Center the graph
-        svg.attr("height", g.graph().height );
+        svg.attr('height', g.graph().height );
         if(typeof conf.width === 'undefined'){
-            svg.attr("width", g.graph().width );
+            svg.attr('width', g.graph().width );
         }else{
-            svg.attr("width", conf.width );
+            svg.attr('width', conf.width );
         }
-        //svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
-        svg.attr("viewBox",  '0 0 ' + (g.graph().width+20) + ' ' + (g.graph().height+20));    }
+        //svg.attr('viewBox', svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
+        svg.attr('viewBox',  '0 0 ' + (g.graph().width+20) + ' ' + (g.graph().height+20));    }
 
@@ -466,3 +466,2 @@
     for(i=0;i<subGraphs.length;i++){
-        var pos = graph.getDepthFirstPos(i);
         subG = subGraphs[i];
@@ -469,0 +468,0 @@

src/diagrams/flowchart/graphDb.js

 /**
  * Created by knut on 14-11-03.
  */
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
+var d3 = require('../../d3');
 var vertices = {};
@@ -67,3 +70,3 @@ var edges = [];
 exports.addLink = function (start, end, type, linktext) {
-    //log.debug('Got edge', start, end);
+    log.debug('Got edge', start, end);
     var edge = {start: start, end: end, type: undefined, text: ''};
@@ -93,4 +96,2 @@ linktext = type.text;
 exports.updateLink = function (pos, style) {
-    var position = pos.substr(1);
-
     if(pos === 'default'){
@@ -183,3 +184,3 @@ edges.defaultStyle = style;
 };
-var clickEvents = [];
+
 /**
@@ -239,6 +240,6 @@ * Called by parser when a graph definition is found, stores the direction of the chart.
     if(tooltipElem[0][0] === null){
-        tooltipElem = d3.select("body")
-            .append("div")
-            .attr("class", "mermaidTooltip")
-            .style("opacity", 0);
+        tooltipElem = d3.select('body')
+            .append('div')
+            .attr('class', 'mermaidTooltip')
+            .style('opacity', 0);
     }
@@ -248,5 +249,5 @@
 
-    var nodes = svg.selectAll("g.node");
+    var nodes = svg.selectAll('g.node');
     nodes
-        .on("mouseover", function(d) {
+        .on('mouseover', function() {
             var el = d3.select(this);
@@ -262,13 +263,13 @@ var title = el.attr('title');
                 .duration(200)
-                .style("opacity", '.9');
+                .style('opacity', '.9');
             tooltipElem.html(el.attr('title'))
-                .style("left", (rect.left+(rect.right-rect.left)/2) + "px")
-                .style("top", (rect.top-14+document.body.scrollTop) + "px");
+                .style('left', (rect.left+(rect.right-rect.left)/2) + 'px')
+                .style('top', (rect.top-14+document.body.scrollTop) + 'px');
             el.classed('hover',true);
 
         })
-        .on("mouseout", function(d) {
+        .on('mouseout', function() {
             tooltipElem.transition()
                 .duration(500)
-                .style("opacity", 0);
+                .style('opacity', 0);
             var el = d3.select(this);
@@ -298,3 +299,3 @@ el.classed('hover',false);
 exports.defaultStyle = function () {
-    return "fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;";
+    return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;';
 };
@@ -307,3 +308,3 @@
     function uniq(a) {
-        var prims = {"boolean":{}, "number":{}, "string":{}}, objs = [];
+        var prims = {'boolean':{}, 'number':{}, 'string':{}}, objs = [];
 
@@ -397,3 +398,3 @@ return a.filter(function(item) {
 };
-exports.indexNodes = function (id) {
+exports.indexNodes = function () {
     secCount = -1;
@@ -405,3 +406,3 @@ if(subGraphs.length>0){
 
-exports.getSubGraphs = function (list) {
+exports.getSubGraphs = function () {
     return subGraphs;
@@ -411,3 +412,3 @@ };
 exports.parseError = function(err,hash){
-    mermaidAPI.parseError(err,hash);
+    global.mermaidAPI.parseError(err,hash);
 };

src/diagrams/flowchart/parser/dot.js

@@ -182,3 +182,3 @@ /* parser generated by jison 0.4.15 */
     _token_stack:
-        function lex() {
+        var lex = function () {
             var token;
@@ -190,3 +190,3 @@ token = lexer.lex() || EOF;
             return token;
-        }
+        };
     var symbol, preErrorSymbol, state, action, a, r, yyval = {}, p, len, newState, expected;
@@ -193,0 +193,0 @@ while (true) {

src/diagrams/flowchart/parser/flow.js

@@ -335,3 +335,3 @@ /* parser generated by jison 0.4.15 */
     _token_stack:
-        function lex() {
+        var lex = function () {
             var token;
@@ -343,3 +343,3 @@ token = lexer.lex() || EOF;
             return token;
-        }
+        };
     var symbol, preErrorSymbol, state, action, a, r, yyval = {}, p, len, newState, expected;
@@ -907,3 +907,3 @@ while (true) {
 },
-rules: [/^(?:%%[^\n]*)/,/^(?:["])/,/^(?:["])/,/^(?:[^"]*)/,/^(?:style\b)/,/^(?:default\b)/,/^(?:linkStyle\b)/,/^(?:classDef\b)/,/^(?:class\b)/,/^(?:click\b)/,/^(?:graph\b)/,/^(?:subgraph\b)/,/^(?:end\s*)/,/^(?:LR\b)/,/^(?:RL\b)/,/^(?:TB\b)/,/^(?:BT\b)/,/^(?:TD\b)/,/^(?:BR\b)/,/^(?:[0-9]+)/,/^(?:#)/,/^(?::)/,/^(?:;)/,/^(?:,)/,/^(?:\*)/,/^(?:<)/,/^(?:>)/,/^(?:\^)/,/^(?:v\b)/,/^(?:\s*--[x]\s*)/,/^(?:\s*-->\s*)/,/^(?:\s*--[o]\s*)/,/^(?:\s*---\s*)/,/^(?:\s*-\.-[x]\s*)/,/^(?:\s*-\.->\s*)/,/^(?:\s*-\.-[o]\s*)/,/^(?:\s*-\.-\s*)/,/^(?:\s*.-[x]\s*)/,/^(?:\s*\.->\s*)/,/^(?:\s*\.-[o]\s*)/,/^(?:\s*\.-\s*)/,/^(?:\s*==[x]\s*)/,/^(?:\s*==>\s*)/,/^(?:\s*==[o]\s*)/,/^(?:\s*==[\=]\s*)/,/^(?:\s*--\s*)/,/^(?:\s*-\.\s*)/,/^(?:\s*==\s*)/,/^(?:-)/,/^(?:\.)/,/^(?:\+)/,/^(?:%)/,/^(?:=)/,/^(?:=)/,/^(?:[\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]|[\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|[\u03F7-\u0481\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA]|[\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE]|[\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA]|[\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0]|[\u08A2-\u08AC\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0977]|[\u0979-\u097F\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2]|[\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A]|[\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39]|[\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8]|[\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C]|[\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C]|[\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99]|[\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0]|[\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D]|[\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3]|[\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10]|[\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1]|[\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81]|[\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3]|[\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6]|[\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A]|[\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081]|[\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D]|[\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0]|[\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310]|[\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C]|[\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u1700-\u170C\u170E-\u1711]|[\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7]|[\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191C]|[\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16]|[\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF]|[\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC]|[\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D]|[\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D]|[\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3]|[\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F]|[\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128]|[\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184]|[\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3]|[\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6]|[\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE]|[\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C]|[\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D]|[\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC]|[\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B]|[\uA640-\uA66E\uA67F-\uA697\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788]|[\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA801\uA803-\uA805]|[\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB]|[\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uAA00-\uAA28]|[\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA80-\uAAAF\uAAB1\uAAB5]|[\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4]|[\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E]|[\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D]|[\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36]|[\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D]|[\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC]|[\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]|[\uFFD2-\uFFD7\uFFDA-\uFFDC_\/])/,/^(?:\|)/,/^(?:\()/,/^(?:\))/,/^(?:\[)/,/^(?:\])/,/^(?:\{)/,/^(?:\})/,/^(?:")/,/^(?:\n+)/,/^(?:\s)/,/^(?:$)/],
+rules: [/^(?:%%[^\n]*)/,/^(?:["])/,/^(?:["])/,/^(?:[^"]*)/,/^(?:style\b)/,/^(?:default\b)/,/^(?:linkStyle\b)/,/^(?:classDef\b)/,/^(?:class\b)/,/^(?:click\b)/,/^(?:graph\b)/,/^(?:subgraph\b)/,/^(?:end\b\s*)/,/^(?:LR\b)/,/^(?:RL\b)/,/^(?:TB\b)/,/^(?:BT\b)/,/^(?:TD\b)/,/^(?:BR\b)/,/^(?:[0-9]+)/,/^(?:#)/,/^(?::)/,/^(?:;)/,/^(?:,)/,/^(?:\*)/,/^(?:<)/,/^(?:>)/,/^(?:\^)/,/^(?:v\b)/,/^(?:\s*--[x]\s*)/,/^(?:\s*-->\s*)/,/^(?:\s*--[o]\s*)/,/^(?:\s*---\s*)/,/^(?:\s*-\.-[x]\s*)/,/^(?:\s*-\.->\s*)/,/^(?:\s*-\.-[o]\s*)/,/^(?:\s*-\.-\s*)/,/^(?:\s*.-[x]\s*)/,/^(?:\s*\.->\s*)/,/^(?:\s*\.-[o]\s*)/,/^(?:\s*\.-\s*)/,/^(?:\s*==[x]\s*)/,/^(?:\s*==>\s*)/,/^(?:\s*==[o]\s*)/,/^(?:\s*==[\=]\s*)/,/^(?:\s*--\s*)/,/^(?:\s*-\.\s*)/,/^(?:\s*==\s*)/,/^(?:-)/,/^(?:\.)/,/^(?:\+)/,/^(?:%)/,/^(?:=)/,/^(?:=)/,/^(?:[\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]|[\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|[\u03F7-\u0481\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA]|[\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE]|[\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA]|[\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0]|[\u08A2-\u08AC\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0977]|[\u0979-\u097F\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2]|[\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A]|[\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39]|[\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8]|[\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C]|[\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C]|[\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99]|[\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0]|[\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D]|[\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3]|[\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10]|[\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1]|[\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81]|[\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3]|[\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6]|[\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A]|[\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081]|[\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D]|[\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0]|[\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310]|[\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C]|[\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u1700-\u170C\u170E-\u1711]|[\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7]|[\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191C]|[\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16]|[\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF]|[\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC]|[\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D]|[\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D]|[\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3]|[\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F]|[\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128]|[\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184]|[\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3]|[\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6]|[\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE]|[\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C]|[\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D]|[\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC]|[\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B]|[\uA640-\uA66E\uA67F-\uA697\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788]|[\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA801\uA803-\uA805]|[\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB]|[\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uAA00-\uAA28]|[\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA80-\uAAAF\uAAB1\uAAB5]|[\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4]|[\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E]|[\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D]|[\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36]|[\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D]|[\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC]|[\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]|[\uFFD2-\uFFD7\uFFDA-\uFFDC_\/])/,/^(?:\|)/,/^(?:\()/,/^(?:\))/,/^(?:\[)/,/^(?:\])/,/^(?:\{)/,/^(?:\})/,/^(?:")/,/^(?:\n+)/,/^(?:\s)/,/^(?:$)/],
 conditions: {"string":{"rules":[2,3],"inclusive":false},"INITIAL":{"rules":[0,1,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,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65],"inclusive":true}}
@@ -910,0 +910,0 @@ });

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

@@ -311,2 +311,14 @@ /**
 
+    it('should handle node names with "end" substring',function(){
+        var res = flow.parser.parse('graph TD\nendpoint --> sender');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(vert['endpoint'].id).toBe('endpoint');
+        expect(vert['sender'].id).toBe('sender');
+        expect(edges[0].start).toBe('endpoint');
+        expect(edges[0].end).toBe('sender');
+    });
+
     it('should handle open ended edges',function(){
@@ -435,3 +447,3 @@ var res = flow.parser.parse('graph TD;A---B;');
 
-    describe("it should handle interaction, ",function(){
+    describe('it should handle interaction, ',function(){
 
@@ -479,3 +491,3 @@ it('it should be possible to use click to a callback',function(){
 
-    describe("it should handle text on edges",function(){
+    describe('it should handle text on edges',function(){
         it('it should handle text without space',function(){
@@ -665,3 +677,3 @@ var res = flow.parser.parse('graph TD;A--x|textNoSpace|B;');
 
-    describe("it should handle new line type notation",function() {
+    describe('it should handle new line type notation',function() {
         it('it should handle regular lines', function () {
@@ -722,3 +734,3 @@ var res = flow.parser.parse('graph TD;A-->B;');
 
-    describe("it should handle text on edges using the new notation",function(){
+    describe('it should handle text on edges using the new notation',function(){
         it('it should handle text without space',function(){
@@ -826,11 +838,11 @@ var res = flow.parser.parse('graph TD;A-- textNoSpace --xB;');
         });
-        xit('should handle text on open links',function(){
-            var res = flow.parser.parse('graph TD;A-- text including graph space --B');
-
-            var vert = flow.parser.yy.getVertices();
-            var edges = flow.parser.yy.getEdges();
-
-            expect(edges[0].text).toBe('text including graph space');
-
-        });
+        //xit('should handle text on open links',function(){
+        //    var res = flow.parser.parse('graph TD;A-- text including graph space --B');
+        //
+        //    var vert = flow.parser.yy.getVertices();
+        //    var edges = flow.parser.yy.getEdges();
+        //
+        //    expect(edges[0].text).toBe('text including graph space');
+        //
+        //});
     });
@@ -956,3 +968,3 @@
 
-    describe("it should handle text in vertices, ",function(){
+    describe('it should handle text in vertices, ',function(){
 
@@ -987,11 +999,11 @@ it('it should handle space',function(){
         });
-        xit('it should handle åäö, minus and space and br',function(){
-            var res = flow.parser.parse('graph TD; A[Object(foo,bar)]-->B(Thing);');
-
-            var vert = flow.parser.yy.getVertices();
-            var edges = flow.parser.yy.getEdges();
-
-            expect(vert['C'].type).toBe('round');
-            expect(vert['C'].text).toBe(' A[Object(foo,bar)]-->B(Thing);');
-        });
+        //xit('it should handle åäö, minus and space and br',function(){
+        //    var res = flow.parser.parse('graph TD; A[Object(foo,bar)]-->B(Thing);');
+        //
+        //    var vert = flow.parser.yy.getVertices();
+        //    var edges = flow.parser.yy.getEdges();
+        //
+        //    expect(vert['C'].type).toBe('round');
+        //    expect(vert['C'].text).toBe(' A[Object(foo,bar)]-->B(Thing);');
+        //});
         it('it should handle unicode chars',function(){
@@ -998,0 +1010,0 @@ var res = flow.parser.parse('graph TD;A-->C(Начало);');

src/diagrams/gantt/gantt.spec.js

@@ -5,9 +5,7 @@ /**
 describe('when parsing a gantt diagram it',function() {
-    var parseError, gantt;
+    var gantt;
     beforeEach(function () {
         gantt = require('./parser/gantt').parser;
         gantt.yy = require('./ganttDb');
-        parseError = function(err, hash) {
-            log.debug('Syntax error:' + err);
-        };
+
         //ex.yy.parseError = parseError;
@@ -14,0 +12,0 @@ });

src/diagrams/gantt/ganttDb.js

@@ -5,4 +5,6 @@ /**
 var moment = require('moment');
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
 
+
 var dateFormat = '';
@@ -241,3 +243,3 @@ var title = '';
 exports.parseError = function(err,hash){
-    mermaidAPI.parseError(err,hash);
+    global.mermaidAPI.parseError(err,hash);
 };

src/diagrams/gantt/ganttDb.spec.js

 /**
  * Created by knut on 14-11-18.
  */
-var log = require('../../logger').create();
+//var log = require('../../logger').create();
 describe('when using the ganttDb',function() {
-    var parseError, gantt;
+    var gDb;
     var moment = require('moment');
@@ -14,5 +14,2 @@
         gDb.clear();
-        parseError = function(err, hash) {
-            log.debug('Syntax error:' + err);
-        };
         //ex.yy.parseError = parseError;
@@ -19,0 +16,0 @@ });

src/diagrams/gantt/ganttRenderer.js

@@ -5,3 +5,3 @@ var gantt = require('./parser/gantt').parser;
 var moment = require('moment');
-var log = require('../../logger').create();
+//var log = require('../../logger').create();
 
@@ -47,3 +47,3 @@ var daysInChart;
 
-    elem.setAttribute('height', "100%");
+    elem.setAttribute('height', '100%');
     // Set viewBox
@@ -56,3 +56,3 @@ elem.setAttribute('viewBox','0 0 '+w+' '+h);
     
-    var dateFormat = d3.time.format("%Y-%m-%d");
+    //var dateFormat = d3.time.format('%Y-%m-%d');
     
@@ -96,6 +96,6 @@ var startDate = d3.min(taskArray, function (d) {
 
-    var title = svg.append("text")
+    svg.append('text')
         .text(gantt.yy.getTitle())
-        .attr("x", w / 2)
-        .attr("y", conf.titleTopMargin)
+        .attr('x', w / 2)
+        .attr('y', conf.titleTopMargin)
         .attr('class', 'titleText');
@@ -113,3 +113,3 @@
             .domain([0, categories.length])
-            .range(["#00B9FA", "#F95002"])
+            .range(['#00B9FA', '#F95002'])
             .interpolate(d3.interpolateHcl);
@@ -125,18 +125,18 @@
 
-    function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h) {
+    function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h) { //eslint-disable-line no-unused-vars
 
-        var bigRects = svg.append("g")
-            .selectAll("rect")
+        svg.append('g')
+            .selectAll('rect')
             .data(theArray)
             .enter()
-            .append("rect")
-            .attr("x", 0)
-            .attr("y", function (d, i) {
+            .append('rect')
+            .attr('x', 0)
+            .attr('y', function (d, i) {
                 return i * theGap + theTopPad - 2;
             })
-            .attr("width", function (d) {
+            .attr('width', function () {
                 return w - theSidePad / 2;
             })
-            .attr("height", theGap)
-            .attr('class', function (d) {
+            .attr('height', theGap)
+            .attr('class', function (d) { //eslint-disable-line no-unused-vars
                 for (var i = 0; i < categories.length; i++) {
@@ -152,3 +152,3 @@ if (d.type === categories[i]) {
         var rectangles = svg.append('g')
-            .selectAll("rect")
+            .selectAll('rect')
             .data(theArray)
@@ -158,15 +158,15 @@ .enter();
 
-        var innerRects = rectangles.append("rect")
-                .attr("rx", 3)
-                .attr("ry", 3)
-                .attr("x", function (d) {
+        rectangles.append('rect')
+                .attr('rx', 3)
+                .attr('ry', 3)
+                .attr('x', function (d) {
                     return timeScale(d.startTime) + theSidePad;
                 })
-                .attr("y", function (d, i) {
+                .attr('y', function (d, i) {
                     return i * theGap + theTopPad;
                 })
-                .attr("width", function (d) {
+                .attr('width', function (d) {
                     return (timeScale(d.endTime) - timeScale(d.startTime));
                 })
-                .attr("height", theBarHeight)
+                .attr('height', theBarHeight)
                 .attr('class', function (d) {
@@ -209,9 +209,9 @@ var res = 'task ';
 
-        var rectText = rectangles.append("text")
+        rectangles.append('text')
             .text(function (d) {
                 return d.task;
             })
-            .attr("font-size",conf.fontSize)
-            //.attr("font-family",conf.fontFamily)
-            .attr("x", function (d) {
+            .attr('font-size',conf.fontSize)
+            //.attr('font-family',conf.fontFamily)
+            .attr('x', function (d) {
                 var startX = timeScale(d.startTime),
@@ -232,8 +232,8 @@ endX = timeScale(d.endTime),
             })
-            .attr("y", function (d, i) {
+            .attr('y', function (d, i) {
                 return i * theGap + (conf.barHeight / 2) + (conf.fontSize / 2 - 2) + theTopPad;
             })
-            //.attr("text-anchor", "middle")
-            .attr("text-height", theBarHeight)
-            .attr("class", function (d) {
+            //.attr('text-anchor', 'middle')
+            .attr('text-height', theBarHeight)
+            .attr('class', function (d) {
                 var startX = timeScale(d.startTime),
@@ -288,14 +288,14 @@ endX = timeScale(d.endTime),
         var pre = [
-            [".%L", function (d) {
+            ['.%L', function (d) {
                 return d.getMilliseconds();
             }],
-            [":%S", function (d) {
+            [':%S', function (d) {
                 return d.getSeconds();
             }],
             // Within a hour
-            ["h1 %I:%M", function (d) {
+            ['h1 %I:%M', function (d) {
                 return d.getMinutes();
             }]];
         var post = [
-            ["%Y", function () {
+            ['%Y', function () {
                 return true;
@@ -306,7 +306,7 @@ }]];
             // Within a day
-            ["%I:%M", function (d) {
+            ['%I:%M', function (d) {
                 return d.getHours();
             }],
             // Day within a week (not monday)
-            ["%a %d", function (d) {
+            ['%a %d', function (d) {
                 //return d.getDay() ==1;
@@ -316,7 +316,7 @@ return d.getDay() && d.getDate() != 1;
             // within a month
-            ["%b %d", function (d) {
+            ['%b %d', function (d) {
                 return d.getDate() != 1;
             }],
             // Month
-            ["%B", function (d) {
+            ['%B', function (d) {
                 return d.getMonth();
@@ -348,15 +348,15 @@ }]
 
-        var grid = svg.append('g')
+        svg.append('g')
             .attr('class', 'grid')
             .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')')
             .call(xAxis)
-            .selectAll("text")
-            .style("text-anchor", "middle")
-            .attr("fill", "#000")
-            .attr("stroke", "none")
-            .attr("font-size", 10)
-            .attr("dy", "1em");
+            .selectAll('text')
+            .style('text-anchor', 'middle')
+            .attr('fill', '#000')
+            .attr('stroke', 'none')
+            .attr('font-size', 10)
+            .attr('dy', '1em');
     }
 
-    function vertLabels(theGap, theTopPad, theSidePad, theBarHeight, theColorScale) {
+    function vertLabels(theGap, theTopPad) {
         var numOccurances = [];
@@ -369,12 +369,12 @@ var prevGap = 0;
 
-        var axisText = svg.append("g") //without doing this, impossible to put grid lines behind text
-            .selectAll("text")
+        svg.append('g') //without doing this, impossible to put grid lines behind text
+            .selectAll('text')
             .data(numOccurances)
             .enter()
-            .append("text")
+            .append('text')
             .text(function (d) {
                 return d[0];
             })
-            .attr("x", 10)
-            .attr("y", function (d, i) {
+            .attr('x', 10)
+            .attr('y', function (d, i) {
                 if (i > 0) {
@@ -407,7 +407,7 @@ for (var j = 0; j < i; j++) {
 
-        var todayLine = todayG.append("line")
-                .attr("x1", timeScale(today) + theSidePad)
-                .attr("x2", timeScale(today) + theSidePad)
-                .attr("y1", conf.titleTopMargin)
-                .attr("y2", h-conf.titleTopMargin)
+        todayG.append('line')
+                .attr('x1', timeScale(today) + theSidePad)
+                .attr('x2', timeScale(today) + theSidePad)
+                .attr('y1', conf.titleTopMargin)
+                .attr('y2', h-conf.titleTopMargin)
                 .attr('class', 'today')
@@ -414,0 +414,0 @@ ;

src/diagrams/gantt/parser/gantt.js

@@ -154,3 +154,3 @@ /* parser generated by jison 0.4.15 */
     _token_stack:
-        function lex() {
+        var lex = function () {
             var token;
@@ -162,3 +162,3 @@ token = lexer.lex() || EOF;
             return token;
-        }
+        };
     var symbol, preErrorSymbol, state, action, a, r, yyval = {}, p, len, newState, expected;
@@ -165,0 +165,0 @@ while (true) {

src/diagrams/sequenceDiagram/parser/sequenceDiagram.js

@@ -213,3 +213,3 @@ /* parser generated by jison 0.4.15 */
     _token_stack:
-        function lex() {
+        var lex = function () {
             var token;
@@ -221,3 +221,3 @@ token = lexer.lex() || EOF;
             return token;
-        }
+        };
     var symbol, preErrorSymbol, state, action, a, r, yyval = {}, p, len, newState, expected;
@@ -224,0 +224,0 @@ while (true) {

src/diagrams/sequenceDiagram/sequenceDb.js

@@ -8,5 +8,7 @@ /**
 var notes     = [];
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
 
 
+
 exports.addActor = function(id,name,description){
@@ -85,3 +87,3 @@ actors[id] = {name:name, description:description};
 exports.parseError = function(err,hash){
-    mermaidAPI.parseError(err,hash);
+    global.mermaidAPI.parseError(err,hash);
 };
@@ -88,0 +90,0 @@

src/diagrams/sequenceDiagram/sequenceDiagram.spec.js

@@ -5,3 +5,3 @@ /**
 var proxyquire = require('proxyquire');
-var log = require('../../logger').create();
+//var log = require('../../logger').create();
 
@@ -14,2 +14,5 @@ var sq = require('./parser/sequenceDiagram').parser;
         return new newD3();
+    },
+    selectAll:function(){
+        return new newD3();
     }
@@ -22,11 +25,10 @@ };
 describe('when parsing a sequenceDiagram',function() {
-    var parseError;
     beforeEach(function () {
         sq.yy = require('./sequenceDb');
         sq.yy.clear();
-        parseError = function(err, hash) {
-            log.debug('Syntax error:' + err);
-            log.debug(hash);
-        };
-        sq.yy.parseError = parseError;
+        //parseError = function(err, hash) {
+        //    log.debug('Syntax error:' + err);
+        //    log.debug(hash);
+        //};
+        //sq.yy.parseError = parseError;
     });
@@ -338,11 +340,11 @@
 describe('when checking the bounds in a sequenceDiagram',function() {
-    var parseError, _d3, conf;
+    var conf;
     beforeEach(function () {
         sq.yy = require('./sequenceDb');
         sq.yy.clear();
-        parseError = function(err, hash) {
-            log.debug('Syntax error:' + err);
-            log.debug(hash);
-        };
-        sq.yy.parseError = parseError;
+        //parseError = function(err, hash) {
+        //    log.debug('Syntax error:' + err);
+        //    log.debug(hash);
+        //};
+        //sq.yy.parseError = parseError;
 
@@ -489,24 +491,34 @@
 describe('when rendering a sequenceDiagram',function() {
-    var parseError, _d3, conf;
+    var conf;
     beforeEach(function () {
         sq.yy = require('./sequenceDb');
         sq.yy.clear();
-        parseError = function(err, hash) {
-            log.debug('Syntax error:' + err);
-            log.debug(hash);
-        };
-        sq.yy.parseError = parseError;
 
+        var MockBrowser = require('mock-browser').mocks.MockBrowser;
+        var mock = new MockBrowser();
+
+        delete global.mermaid_config;
+
+        // and in the run-code inside some object
+        global.document = mock.getDocument();
+        global.window = mock.getWindow();
+
+        //parseError = function(err, hash) {
+        //    log.debug('Syntax error:' + err);
+        //    log.debug(hash);
+        //};
+        //sq.yy.parseError = parseError;
+
         newD3 = function() {
             var o = {
-                append: function (type) {
+                append: function () {
                     return newD3();
                 },
-                attr: function (key, val) {
+                attr: function () {
                     return this;
                 },
-                style: function (key, val) {
+                style: function () {
                     return this;
                 },
-                text: function (txt) {
+                text: function () {
                     return this;
@@ -685,24 +697,24 @@ },
 describe('when rendering a sequenceDiagram with actor mirror activated',function() {
-    var parseError, _d3, conf;
+    var conf;
     beforeEach(function () {
         sq.yy = require('./sequenceDb');
         sq.yy.clear();
-        parseError = function(err, hash) {
-            log.debug('Syntax error:' + err);
-            log.debug(hash);
-        };
-        sq.yy.parseError = parseError;
+        //parseError = function(err, hash) {
+        //    log.debug('Syntax error:' + err);
+        //    log.debug(hash);
+        //};
+        //sq.yy.parseError = parseError;
 
         newD3 = function() {
             var o = {
-                append: function (type) {
+                append: function () {
                     return newD3();
                 },
-                attr: function (key, val) {
+                attr: function () {
                     return this;
                 },
-                style: function (key, val) {
+                style: function () {
                     return this;
                 },
-                text: function (txt) {
+                text: function () {
                     return this;
@@ -709,0 +721,0 @@ },

src/diagrams/sequenceDiagram/sequenceRenderer.js

@@ -9,4 +9,6 @@ /**
 var d3 = require('../../d3');
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
 
+
 var conf = {
@@ -35,3 +37,3 @@
 
-//var bb = getBBox("path");
+//var bb = getBBox('path');
 exports.bounds = {
@@ -42,3 +44,3 @@ data:{
         starty:undefined,
-        stopy :undefined,
+        stopy :undefined
     },
@@ -54,3 +56,3 @@ verticalPos:0,
                 starty:undefined,
-                stopy :undefined,
+                stopy :undefined
         };
@@ -157,3 +159,3 @@ this.verticalPos =0;
         textElem.remove();
-        g = elem.append("g");
+        g = elem.append('g');
 
@@ -185,10 +187,10 @@ //textObj.x = textObj.x - conf.width;
 var drawMessage = function(elem, startx, stopx, verticalPos, msg){
-    var g = elem.append("g");
+    var g = elem.append('g');
     var txtCenter = startx + (stopx-startx)/2;
 
-    var textElem = g.append("text")      // text label for the x axis
-        .attr("x", txtCenter)
-        .attr("y", verticalPos - 7)
-        .style("text-anchor", "middle")
-        .attr("class", "messageText")
+    var textElem = g.append('text')      // text label for the x axis
+        .attr('x', txtCenter)
+        .attr('y', verticalPos - 7)
+        .style('text-anchor', 'middle')
+        .attr('class', 'messageText')
         .text(msg.message);
@@ -210,3 +212,3 @@
     if(startx===stopx){
-        line  = g.append("path")
+        line  = g.append('path')
             .attr('d', 'M ' +startx+ ','+verticalPos+' C ' +(startx+60)+ ','+(verticalPos-10)+' ' +(startx+60)+ ',' +
@@ -219,7 +221,7 @@ (verticalPos+30)+' ' +startx+ ','+(verticalPos+20));
     }else{
-        line = g.append("line");
-        line.attr("x1", startx);
-        line.attr("y1", verticalPos);
-        line.attr("x2", stopx);
-        line.attr("y2", verticalPos);
+        line = g.append('line');
+        line.attr('x1', startx);
+        line.attr('y1', verticalPos);
+        line.attr('x2', stopx);
+        line.attr('y2', verticalPos);
         exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx,  exports.bounds.getVerticalPos());
@@ -230,18 +232,22 @@ }
     if (msg.type === sq.yy.LINETYPE.DOTTED || msg.type === sq.yy.LINETYPE.DOTTED_CROSS || msg.type === sq.yy.LINETYPE.DOTTED_OPEN) {
-        line.style("stroke-dasharray", ("3, 3"));
-        line.attr("class", "messageLine1");
+        line.style('stroke-dasharray', ('3, 3'));
+        line.attr('class', 'messageLine1');
     }
     else {
-        line.attr("class", "messageLine0");
+        line.attr('class', 'messageLine0');
     }
 
-    line.attr("stroke-width", 2);
-    line.attr("stroke", "black");
-    line.style("fill", "none");     // remove any fill colour
+    var url =  window.location.protocol+'//'+window.location.host+window.location.pathname +window.location.search;
+    url = url.replace(/\(/g,'\\(');
+    url = url.replace(/\)/g,'\\)');
+
+    line.attr('stroke-width', 2);
+    line.attr('stroke', 'black');
+    line.style('fill', 'none');     // remove any fill colour
     if (msg.type === sq.yy.LINETYPE.SOLID || msg.type === sq.yy.LINETYPE.DOTTED){
-        line.attr("marker-end", "url(" + window.location.protocol+'//'+window.location.host+window.location.pathname + "#arrowhead)");
+        line.attr('marker-end', 'url(' + url + '#crosshead)');
     }
 
     if (msg.type === sq.yy.LINETYPE.SOLID_CROSS || msg.type === sq.yy.LINETYPE.DOTTED_CROSS){
-        line.attr("marker-end", "url(" + window.location.protocol+'//'+window.location.host+window.location.pathname + "#crosshead)");
+        line.attr('marker-end', 'url(' + url + '#crosshead)');
     }
@@ -399,10 +405,10 @@
     if(conf.useMaxWidth) {
-        diagram.attr("height", '100%');
-        diagram.attr("width", '100%');
+        diagram.attr('height', '100%');
+        diagram.attr('width', '100%');
         diagram.attr('style', 'max-width:' + (width) + 'px;');
     }else{
-        diagram.attr("height",height);
-        diagram.attr("width", width );
+        diagram.attr('height',height);
+        diagram.attr('width', width );
     }
-    diagram.attr("viewBox", (box.startx-conf.diagramMarginX) + ' -' +conf.diagramMarginY + ' ' + width + ' ' + height);
+    diagram.attr('viewBox', (box.startx-conf.diagramMarginX) + ' -' +conf.diagramMarginY + ' ' + width + ' ' + height);
 };

src/diagrams/sequenceDiagram/svgDraw.js

 /**
  * Created by knut on 14-12-20.
  */
-var log = require('../../logger').create();
+//var log = require('../../logger').create();
 exports.drawRect = function(elem , rectData){
-    var rectElem = elem.append("rect");
-    rectElem.attr("x", rectData.x);
-    rectElem.attr("y", rectData.y);
-    rectElem.attr("fill", rectData.fill);
-    rectElem.attr("stroke", rectData.stroke);
-    rectElem.attr("width", rectData.width);
-    rectElem.attr("height", rectData.height);
-    rectElem.attr("rx", rectData.rx);
-    rectElem.attr("ry", rectData.ry);
+    var rectElem = elem.append('rect');
+    rectElem.attr('x', rectData.x);
+    rectElem.attr('y', rectData.y);
+    rectElem.attr('fill', rectData.fill);
+    rectElem.attr('stroke', rectData.stroke);
+    rectElem.attr('width', rectData.width);
+    rectElem.attr('height', rectData.height);
+    rectElem.attr('rx', rectData.rx);
+    rectElem.attr('ry', rectData.ry);
 
     if(typeof rectData.class !== 'undefined'){
-        rectElem.attr("class", rectData.class);
+        rectElem.attr('class', rectData.class);
     }
@@ -33,3 +33,3 @@
     if (typeof textData.class !== 'undefined') {
-        textElem.attr("class", textData.class);
+        textElem.attr('class', textData.class);
     }
@@ -90,14 +90,14 @@ /*    textData.text.split(/<br\/?>/ig).forEach(function(rowText){
     var center = left + (conf.width/2);
-    var g = elem.append("g");
+    var g = elem.append('g');
     if(verticalPos === 0) {
         actorCnt++;
-        g.append("line")
-            .attr("id", 'actor'+actorCnt)
-            .attr("x1", center)
-            .attr("y1", 5)
-            .attr("x2", center)
-            .attr("y2", 2000)
-            .attr("class", 'actor-line')
-            .attr("stroke-width", '0.5px')
-            .attr("stroke", '#999');
+        g.append('line')
+            .attr('id', 'actor'+actorCnt)
+            .attr('x1', center)
+            .attr('y1', 5)
+            .attr('x2', center)
+            .attr('y2', 2000)
+            .attr('class', 'actor-line')
+            .attr('stroke-width', '0.5px')
+            .attr('stroke', '#999');
     }
@@ -116,7 +116,7 @@
 
-    g.append("text")      // text label for the x axis
-        .attr("x", center)
-        .attr("y", verticalPos + (conf.height/2)+5)
+    g.append('text')      // text label for the x axis
+        .attr('x', center)
+        .attr('y', verticalPos + (conf.height/2)+5)
         .attr('class','actor')
-        .style("text-anchor", "middle")
+        .style('text-anchor', 'middle')
         .text(description)
@@ -133,11 +133,11 @@ ;
 exports.drawLoop = function(elem,bounds,labelText, conf){
-    var g = elem.append("g");
+    var g = elem.append('g');
     var drawLoopLine = function(startx,starty,stopx,stopy){
-        g.append("line")
-            .attr("x1", startx)
-            .attr("y1", starty)
-            .attr("x2", stopx )
-            .attr("y2", stopy )
-            .attr("stroke-width", 2)
-            .attr("stroke", "#526e52")
+        g.append('line')
+            .attr('x1', startx)
+            .attr('y1', starty)
+            .attr('x2', stopx )
+            .attr('y2', stopy )
+            .attr('stroke-width', 2)
+            .attr('stroke', '#526e52')
             .attr('class','loopLine');
@@ -183,11 +183,11 @@ };
 exports.insertArrowHead = function(elem){
-    elem.append("defs").append("marker")
-        .attr("id", "arrowhead")
-        .attr("refX", 5)
-        .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
+    elem.append('defs').append('marker')
+        .attr('id', 'arrowhead')
+        .attr('refX', 5)
+        .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
 };
@@ -198,26 +198,26 @@ /**
 exports.insertArrowCrossHead = function(elem){
-    var defs = elem.append("defs");
-    var marker = defs.append("marker")
-        .attr("id", "crosshead")
-        .attr("markerWidth", 15)
-        .attr("markerHeight", 8)
-        .attr("orient", "auto")
-        .attr("refX", 16)
-        .attr("refY", 4);
+    var defs = elem.append('defs');
+    var marker = defs.append('marker')
+        .attr('id', 'crosshead')
+        .attr('markerWidth', 15)
+        .attr('markerHeight', 8)
+        .attr('orient', 'auto')
+        .attr('refX', 16)
+        .attr('refY', 4);
 
     // The arrow
-    marker.append("path")
-            .attr("fill",'black')
-            .attr("stroke",'#000000')
-            .style("stroke-dasharray", ("0, 0"))
-            .attr("stroke-width",'1px')
-            .attr("d", "M 9,2 V 6 L16,4 Z");
+    marker.append('path')
+            .attr('fill','black')
+            .attr('stroke','#000000')
+            .style('stroke-dasharray', ('0, 0'))
+            .attr('stroke-width','1px')
+            .attr('d', 'M 9,2 V 6 L16,4 Z');
 
     // The cross
-    marker.append("path")
-            .attr("fill",'none')
-            .attr("stroke",'#000000')
-            .style("stroke-dasharray", ("0, 0"))
-            .attr("stroke-width",'1px')
-            .attr("d", "M 0,1 L 6,7 M 6,1 L 0,7")
+    marker.append('path')
+            .attr('fill','none')
+            .attr('stroke','#000000')
+            .style('stroke-dasharray', ('0, 0'))
+            .attr('stroke-width','1px')
+            .attr('d', 'M 0,1 L 6,7 M 6,1 L 0,7')
         ; //this is actual shape for arrowhead
@@ -224,0 +224,0 @@

src/editor.js

 function decodeHTMLEntities (str) {
     if(str && typeof str === 'string') {
       // strip script/html tags
-      element = document.querySelector('.editor');
+      var element = document.querySelector('.editor');
         
@@ -36,3 +36,3 @@ str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
         document.querySelector('.mermaid').innerHTML = txt;
-        mermaid.init();
+        global.mermaid.init();
         document.querySelector('.editor').value = txt;
@@ -39,0 +39,0 @@ }

src/logger.js

@@ -12,86 +12,87 @@ /**
  */
-var Logger;
 
-Logger = (function() {
-    function Logger(options) {
-        var level, num, ref;
-        this.options = options || {};
-        this.level = this.options.level || Logger.levels.default;
-        ref = Logger.levels;
-        for (level in ref) {
-            num = ref[level];
-            Logger.define(this, level);
-        }
+const LEVELS = {
+    debug: 1,
+    info: 2,
+    warn: 3,
+    error: 4,
+    fatal: 5,
+    default: 5
+};
+
+let defaultLevel = LEVELS.error;
+
+exports.setLogLevel = function (level) {
+    defaultLevel = level;
+};
+
+function formatTime(timestamp) {
+    var hh = timestamp.getUTCHours();
+    var mm = timestamp.getUTCMinutes();
+    var ss = timestamp.getSeconds();
+    var ms = timestamp.getMilliseconds();
+    // If you were building a timestamp instead of a duration, you would uncomment the following line to get 12-hour (not 24) time
+    // if (hh > 12) {hh = hh % 12;}
+    // These lines ensure you have two-digits
+    if (hh < 10) {
+        hh = '0' + hh;
     }
+    if (mm < 10) {
+        mm = '0' + mm;
+    }
+    if (ss < 10) {
+        ss = '0' + ss;
+    }
+    if (ms < 100) {
+        ms = '0' + ms;
+    }
+    if (ms < 10) {
+        ms = '00' + ms;
+    }
+    // This formats your string to HH:MM:SS
+    var t = hh + ':' + mm + ':' + ss + ' (' + ms + ')';
+    return t;
+}
 
-    Logger.prototype.add = function(level, message, callback) {
-        if (this.level > (Logger.levels[level] || 5)) {
-            return;
-        }
-        if (callback) {
-            message = callback();
-        } else if (typeof message === 'function') {
-            message = message();
-        }
-        return this.write({
-            timestamp: new Date,
-            severity: level,
-            message: message,
-            pid: process.pid
-        });
-    };
 
-    function formatTime(timestamp){
-        var hh = timestamp.getUTCHours();
-        var mm = timestamp.getUTCMinutes();
-        var ss = timestamp.getSeconds();
-        var ms = timestamp.getMilliseconds();
-        // If you were building a timestamp instead of a duration, you would uncomment the following line to get 12-hour (not 24) time
-        // if (hh > 12) {hh = hh % 12;}
-        // These lines ensure you have two-digits
-        if (hh < 10) {hh = "0"+hh;}
-        if (mm < 10) {mm = "0"+mm;}
-        if (ss < 10) {ss = "0"+ss;}
-        if (ms < 100){ms = "0"+ms;}
-        if (ms < 10) {ms = "00"+ms;}
-        // This formats your string to HH:MM:SS
-        var t = hh+":"+mm+":"+ss +' ('+ms+')';
-        return t;
+class Log {
+    constructor(level) {
+        this.level = level;
     }
 
-    Logger.prototype.write = function(options) {
-        if(typeof console !== 'undefined'){
-            if(typeof console.log  !== 'undefined'){
-                return console.log(this.build_message(options));
+    log(str, level) {
+        let logLevel = this.level;
+        if(typeof logLevel === 'undefined'){
+            logLevel = defaultLevel;
+        }
+        if (logLevel <= level) {
+            if (typeof console !== 'undefined') { //eslint-disable-line no-console
+                if (typeof console.log !== 'undefined') { //eslint-disable-line no-console
+                    return console.log('[' + formatTime(new Date()) + '] ' + str); //eslint-disable-line no-console
+                }
             }
         }
-    };
+    }
 
-    Logger.prototype.build_message = function(options) {
-        return "[" + formatTime(options.timestamp) + "] " + options.message;
-    };
+    trace(str) {
+        this.log(str, LEVELS.trace);
+    }
 
-    return Logger;
+    debug(str) {
+        this.log(str, LEVELS.debug);
+    }
 
-})();
+    info(str) {
+        this.log(str, LEVELS.info);
+    }
 
-Logger.define = function(logger, level) {
-    return logger[level] = function(message, callback) {
-        return this.add(level, message, callback);
-    };
-};
+    warn(str) {
+        this.log(str, LEVELS.warn);
+    }
 
-Logger.levels = {
-    debug: 1,
-    info: 2,
-    warn: 3,
-    error: 4,
-    fatal: 5,
-    default:5
-};
-exports.setLogLevel = function(level){
-    Logger.levels.default = level;
+    error(str) {
+        this.log(str, LEVELS.error);
+    }
 }
-exports.create = function(options) {
-    return new Logger(options);
-};
+
+exports.Log = Log;

src/mermaid.js

@@ -19,8 +19,9 @@ //(function (root, factory) {
  */
-
+import * as Logger from './logger';
+var log = new Logger.Log();
 var mermaidAPI = require('./mermaidAPI');
 var nextId = 0;
-var log = require('./logger').create();
-var utils = require('./utils');
 
+var he = require('he');
+
 module.exports.mermaidAPI = mermaidAPI;
@@ -55,3 +56,3 @@ /**
         if(typeof arguments[0] !== 'undefined'){
-            mermaid.sequenceConfig = arguments[0];
+            global.mermaid.sequenceConfig = arguments[0];
         }
@@ -81,3 +82,3 @@
     nodes = nodes === undefined ? document.querySelectorAll('.mermaid')
-        : typeof nodes === "string" ? document.querySelectorAll(nodes)
+        : typeof nodes === 'string' ? document.querySelectorAll(nodes)
         : nodes instanceof Node ? [nodes]
@@ -90,8 +91,8 @@ /*! Last case  - sequence config was passed pick next */
     if(typeof mermaid_config !== 'undefined'){
-        mermaidAPI.initialize(mermaid_config);
+        mermaidAPI.initialize(global.mermaid_config);
     }
-    log.debug('Start On Load before: '+mermaid.startOnLoad);
-    if(typeof mermaid.startOnLoad !== 'undefined'){
-        log.debug('Start On Load inner: '+mermaid.startOnLoad);
-        mermaidAPI.initialize({startOnLoad:mermaid.startOnLoad});
+    log.debug('Start On Load before: '+global.mermaid.startOnLoad);
+    if(typeof global.mermaid.startOnLoad !== 'undefined'){
+        log.debug('Start On Load inner: '+global.mermaid.startOnLoad);
+        mermaidAPI.initialize({startOnLoad:global.mermaid.startOnLoad});
 
@@ -101,4 +102,4 @@ }
 
-    if(typeof mermaid.ganttConfig !== 'undefined'){
-        mermaidAPI.initialize({gantt:mermaid.ganttConfig});
+    if(typeof global.mermaid.ganttConfig !== 'undefined'){
+        mermaidAPI.initialize({gantt:global.mermaid.ganttConfig});
     }
@@ -119,4 +120,4 @@
         /*! Check if previously processed */
-        if(!element.getAttribute("data-processed")) {
-            element.setAttribute("data-processed", true);
+        if(!element.getAttribute('data-processed')) {
+            element.setAttribute('data-processed', true);
         } else {
@@ -128,3 +129,2 @@ continue;
 
-        var he = require('he');
         // Fetch the graph definition including tags
@@ -143,3 +143,2 @@ txt = element.innerHTML;
     }
-
 };
@@ -199,3 +198,3 @@
 
-    init: function(sequenceConfig, nodes) {
+    init: function() {
         init.apply(null, arguments);
@@ -212,3 +211,3 @@ },
     },
-    parseError: function(err, hash) {
+    parseError: function(err) {
         log.debug('Mermaid Syntax error:');
@@ -238,3 +237,3 @@ log.debug(err);
     if (typeof mermaid_config !== 'undefined') {
-        if (equals(false, mermaid_config.htmlLabels)) {
+        if (equals(false, global.mermaid_config.htmlLabels)) {
             global.mermaid.htmlLabels = false;
@@ -246,5 +245,5 @@ }
         // For backwards compatability reasons also check mermaid_config variable
-        if (typeof mermaid_config !== 'undefined') {
+        if (typeof global.mermaid_config !== 'undefined') {
             // Check if property startOnLoad is set
-            if (equals(true, mermaid_config.startOnLoad)) {
+            if (equals(true, global.mermaid_config.startOnLoad)) {
                 global.mermaid.init();
@@ -251,0 +250,0 @@ }

src/mermaid.spec.js

@@ -7,6 +7,5 @@ /**
  */
-var rewire = require("rewire");
-var utils = require("./utils");
-var mermaid = require("./mermaid");
-var log = require('./logger').create();
+var rewire = require('rewire');
+var mermaid = require('./mermaid');
+//var log = require('./logger').create();
 
@@ -25,4 +24,5 @@ describe('when using mermaid and ',function() {
             // and in the run-code inside some object
-            document = mock.getDocument();
-            window = mock.getWindow();
+            global.document = mock.getDocument();
+            global.window = mock.getWindow();
+
         });
@@ -32,3 +32,3 @@
             mermaid = rewire('./mermaid');
-            mermaid_config ={startOnLoad : false};
+            global.mermaid_config ={startOnLoad : false};
 
@@ -45,3 +45,3 @@ document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>';
             global.mermaid.startOnLoad =  false;
-            mermaid_config ={startOnLoad : true};
+            global.mermaid_config ={startOnLoad : true};
 
@@ -57,3 +57,3 @@ document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>';
             global.mermaid.startOnLoad =  true;
-            mermaid_config ={startOnLoad : true};
+            global.mermaid_config ={startOnLoad : true};
             document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>';
@@ -85,3 +85,2 @@ spyOn(global.mermaid,'init');
     describe('when calling addEdges ',function() {
-        var mermaid;
         var graph = require('./diagrams/flowchart/graphDb');
@@ -92,3 +91,3 @@ var flow = require('./diagrams/flowchart/parser/flow');
         beforeEach(function () {
-            mermaid_config ={startOnLoad : false};
+            global.mermaid_config ={startOnLoad : false};
             var MockBrowser = require('mock-browser').mocks.MockBrowser;
@@ -98,12 +97,12 @@ var mock = new MockBrowser();
             graph.clear();
-            document = mock.getDocument();
+            global.document = mock.getDocument();
             mermaid = rewire('./mermaid');
         });
         it('it should handle edges with text', function () {
-            var res = flow.parser.parse('graph TD;A-->|text ex|B;');
-            var vert = flow.parser.yy.getVertices();
+            flow.parser.parse('graph TD;A-->|text ex|B;');
+            flow.parser.yy.getVertices();
             var edges = flow.parser.yy.getEdges();
 
             var mockG = {
-                setEdge:function(start, end,options,name){
+                setEdge:function(start, end,options){
                     expect(start).toBe('A');
@@ -120,8 +119,8 @@ expect(end).toBe('B');
         it('should handle edges without text', function () {
-            var res = flow.parser.parse('graph TD;A-->B;');
-            var vert = flow.parser.yy.getVertices();
+            flow.parser.parse('graph TD;A-->B;');
+            flow.parser.yy.getVertices();
             var edges = flow.parser.yy.getEdges();
 
             var mockG = {
-                setEdge:function(start, end,options,name){
+                setEdge:function(start, end,options){
                     expect(start).toBe('A');
@@ -138,8 +137,8 @@ expect(end).toBe('B');
         it('should handle open-ended edges', function () {
-            var res = flow.parser.parse('graph TD;A---B;');
-            var vert = flow.parser.yy.getVertices();
+            flow.parser.parse('graph TD;A---B;');
+            flow.parser.yy.getVertices();
             var edges = flow.parser.yy.getEdges();
 
             var mockG = {
-                setEdge:function(start, end,options,name){
+                setEdge:function(start, end,options){
                     expect(start).toBe('A');
@@ -155,8 +154,8 @@ expect(end).toBe('B');
         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();
+            flow.parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;');
+            flow.parser.yy.getVertices();
             var edges = flow.parser.yy.getEdges();
 
             var mockG = {
-                setEdge:function(start, end,options,name){
+                setEdge:function(start, end,options){
                     expect(start).toBe('A');
@@ -172,8 +171,8 @@ expect(end).toBe('B');
         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();
+            flow.parser.parse('graph TD;A---|the text|B; linkStyle 0 stroke:val1,stroke-width:val2;');
+            flow.parser.yy.getVertices();
             var edges = flow.parser.yy.getEdges();
 
             var mockG = {
-                setEdge:function(start, end,options,name){
+                setEdge:function(start, end,options){
                     expect(start).toBe('A');
@@ -180,0 +179,0 @@ expect(end).toBe('B');

src/mermaidAPI.js

@@ -14,4 +14,6 @@ /**
  */
+import * as Logger from './logger';
+var log = new Logger.Log();
+
 var graph = require('./diagrams/flowchart/graphDb');
-var flow = require('./diagrams/flowchart/parser/flow');
 var utils = require('./utils');
@@ -31,5 +33,3 @@ var flowRenderer = require('./diagrams/flowchart/flowRenderer');
 var d3 = require('./d3');
-var nextId = 0;
 
-
 /**
@@ -55,3 +55,3 @@ * ## Configuration
      */
-    logLevel: 3,
+    logLevel: 5,
     /**
@@ -208,19 +208,19 @@ * **cloneCssStyles** - This options controls whether or not the css rules should be copied into the generated svg
             // Within a day
-            ["%I:%M", function (d) {
+            ['%I:%M', function (d) {
                 return d.getHours();
             }],
             // Monday a week
-            ["w. %U", function (d) {
+            ['w. %U', function (d) {
                 return d.getDay() == 1;
             }],
             // Day within a week (not monday)
-            ["%a %d", function (d) {
+            ['%a %d', function (d) {
                 return d.getDay() && d.getDate() != 1;
             }],
             // within a month
-            ["%b %d", function (d) {
+            ['%b %d', function (d) {
                 return d.getDate() != 1;
             }],
             // Month
-            ["%m-%y", function (d) {
+            ['%m-%y', function (d) {
                 return d.getMonth();
@@ -232,4 +232,5 @@ }]
 
-var log = require('./logger').create({level:config.logLevel});
+Logger.setLogLevel(config.logLevel);
 
+
 /**
@@ -290,7 +291,7 @@ * ## parse
 
-    txt = txt.replace(/style.*:\S*#.*;/g,function(s,t,u){
+    txt = txt.replace(/style.*:\S*#.*;/g,function(s){
         var innerTxt = s.substring(0,s.length-1);
         return innerTxt;
     });
-    txt = txt.replace(/classDef.*:\S*#.*;/g,function(s,t,u){
+    txt = txt.replace(/classDef.*:\S*#.*;/g,function(s){
         var innerTxt = s.substring(0,s.length-1);
@@ -300,3 +301,3 @@ return innerTxt;
 
-    txt = txt.replace(/#\w+\;/g,function(s,t,u){
+    txt = txt.replace(/#\w+\;/g,function(s){
         var innerTxt = s.substring(1,s.length-1);
@@ -313,6 +314,2 @@
 
-    //txt = txt.replace(/fa:fa[\w\-]+/g,function(s,t,u){
-    //    return 'fa:¢';
-    //});
-
     return txt;
@@ -324,9 +321,9 @@ };
 
-    txt = txt.replace(/\fl\°\°/g,function(s,t,u){
+    txt = txt.replace(/\fl\°\°/g,function(){
         return '&#';
     });
-    txt = txt.replace(/\fl\°/g,function(s,t,u){
+    txt = txt.replace(/\fl\°/g,function(){
         return '&';
     });
-    txt = txt.replace(/¶ß/g,function(s,t,u){
+    txt = txt.replace(/¶ß/g,function(){
         return ';';
@@ -434,5 +431,7 @@ });
 
-
+    var url =  window.location.protocol+'//'+window.location.host+window.location.pathname +window.location.search;
+    url = url.replace(/\(/g,'\\(');
+    url = url.replace(/\)/g,'\\)');
     // Fix for when the base tag is used
-    var svgCode = d3.select('#d'+id).node().innerHTML.replace(/url\(#arrowhead/g,'url('+ window.location.protocol+'//'+location.host+location.pathname +'#arrowhead','g');
+    var svgCode = d3.select('#d'+id).node().innerHTML.replace(/url\(#arrowhead/g,'url('+url +'#arrowhead','g');
 
@@ -497,2 +496,3 @@ svgCode = exports.decodeEntities(svgCode);
     }
+    Logger.setLogLevel(config.logLevel);
 
@@ -506,3 +506,3 @@ };
     if(typeof mermaid !== 'undefined') {
-        mermaid.parseError(err,hash);
+        global.mermaid.parseError(err,hash);
     }else{
@@ -509,0 +509,0 @@ log.debug('Mermaid Syntax error:');

src/mermaidAPI.spec.js

@@ -8,3 +8,3 @@ /**
 var api = require('./mermaidAPI.js');
-var log = require('./logger').create();
+//var log = require('./logger').create();
 
@@ -23,4 +23,4 @@ describe('when using mermaidAPI and ',function() {
             // and in the run-code inside some object
-            document = mock.getDocument();
-            window = mock.getWindow();
+            global.document = mock.getDocument();
+            global.window = mock.getWindow();
         });
@@ -68,3 +68,3 @@
             spyOn(global.mermaidAPI,'parseError');
-            var res = mermaid.parse('graph TD;A--x|text including URL space|B;');
+            var res = global.mermaid.parse('graph TD;A--x|text including URL space|B;');
 
@@ -71,0 +71,0 @@ expect(res).toBe(true);

src/utils.js

 /**
  * Created by knut on 14-11-23.
  */
-var log = require('./logger').create();
+import * as Logger from './logger';
+var log = new Logger.Log();
+
 /**
@@ -20,9 +22,8 @@ * @function detectType
  * @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){
+var detectType = function(text){
     text = text.replace(/^\s*%%.*\n/g,'\n');
     if(text.match(/^\s*sequenceDiagram/)){
-        return "sequenceDiagram";
+        return 'sequenceDiagram';
     }
@@ -32,3 +33,3 @@
         //log.debug('Detected dot syntax');
-        return "dotGraph";
+        return 'dotGraph';
     }
@@ -38,3 +39,3 @@
         //log.debug('Detected info syntax');
-        return "info";
+        return 'info';
     }
@@ -44,7 +45,8 @@
         //log.debug('Detected info syntax');
-        return "gantt";
+        return 'gantt';
     }
 
-    return "graph";
+    return 'graph';
 };
+export {detectType};
 
@@ -57,5 +59,6 @@ /**
  */
-module.exports.cloneCssStyles = function(svg, classes){
-    var usedStyles = "";
+var cloneCssStyles = function(svg, classes){
+    var usedStyles = '';
     var sheets = document.styleSheets;
+    var rule;
     for (var i = 0; i < sheets.length; i++) {
@@ -69,3 +72,3 @@ // Avoid multiple inclusion on pages with multiple graphs
                     for (var j = 0; j < rules.length; j++) {
-                        var rule = rules[j];
+                        rule = rules[j];
                         if (typeof(rule.style) !== 'undefined') {
@@ -75,3 +78,3 @@ var elems;
                             if (elems.length > 0) {
-                                usedStyles += rule.selectorText + " { " + rule.style.cssText + " }\n";
+                                usedStyles += rule.selectorText + ' { ' + rule.style.cssText + ' }\n';
                             }
@@ -83,8 +86,4 @@ }
             catch(err) {
-                if(typeof console !== 'undefined'){
-                    if(console.warn !== 'undefined'){
-                        if(rule !== 'undefined'){
-                            console.warn('Invalid CSS selector "' + rule.selectorText + '"', err);
-                        }
-                    }
+                if(rule !== 'undefined'){
+                    log.warn('Invalid CSS selector "' + rule.selectorText + '"', err);
                 }
@@ -95,23 +94,23 @@ }
 
-    var defaultStyles = "";
-    var embeddedStyles = "";
+    var defaultStyles = '';
+    var embeddedStyles = '';
 
     for (var className in classes) {
-        if (classes.hasOwnProperty(className) && typeof(className) != "undefined") {
+        if (classes.hasOwnProperty(className) && typeof(className) != 'undefined') {
             if (className === 'default') {
                 if (classes.default.styles instanceof Array) {
-                    defaultStyles += "#" + svg.id.trim() + ' .node' + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
+                    defaultStyles += '#' + svg.id.trim() + ' .node' + '>rect { ' + classes[className].styles.join('; ') + '; }\n';
                 }
                 if (classes.default.nodeLabelStyles instanceof Array) {
-                    defaultStyles += "#" + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join("; ") + '; }\n';
+                    defaultStyles += '#' + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join('; ') + '; }\n';
                 }
                 if (classes.default.edgeLabelStyles instanceof Array) {
-                    defaultStyles += "#" + svg.id.trim() + ' .edgeLabel text ' + ' { ' + classes[className].edgeLabelStyles.join("; ") + '; }\n';
+                    defaultStyles += '#' + svg.id.trim() + ' .edgeLabel text ' + ' { ' + classes[className].edgeLabelStyles.join('; ') + '; }\n';
                 }
                 if (classes.default.clusterStyles instanceof Array) {
-                    defaultStyles += "#" + svg.id.trim() + ' .cluster rect ' + ' { ' + classes[className].clusterStyles.join("; ") + '; }\n';
+                    defaultStyles += '#' + svg.id.trim() + ' .cluster rect ' + ' { ' + classes[className].clusterStyles.join('; ') + '; }\n';
                 }
             } else {
                 if (classes[className].styles instanceof Array) {
-                    embeddedStyles += "#" + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
+                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join('; ') + '; }\n';
                 }
@@ -122,20 +121,22 @@ }
 
-    if (usedStyles !== "" || defaultStyles !== "" || embeddedStyles !== "") {
+    if (usedStyles !== '' || defaultStyles !== '' || embeddedStyles !== '') {
         var s = document.createElement('style');
         s.setAttribute('type', 'text/css');
         s.setAttribute('title', 'mermaid-svg-internal-css');
-        s.innerHTML = "/* <![CDATA[ */\n";
+        s.innerHTML = '/* <![CDATA[ */\n';
         // Make this CSS local to this SVG
-        if (defaultStyles !== "") {
+        if (defaultStyles !== '') {
             s.innerHTML += defaultStyles;
         }
-        if (usedStyles !== "") {
+        if (usedStyles !== '') {
             s.innerHTML += usedStyles;
         }
-        if (embeddedStyles !== "") {
+        if (embeddedStyles !== '') {
             s.innerHTML += embeddedStyles;
         }
-        s.innerHTML += "/* ]]> */\n";
+        s.innerHTML += '/* ]]> */\n';
         svg.insertBefore(s, svg.firstChild);
     }
 };
+
+export {cloneCssStyles};

src/utils.spec.js

 /**
  * Created by knut on 14-11-23.
  */
-var log = require('./logger').create();
-describe('when detecting chart type ',function() {
-    var utils = require('./utils');
+import * as utils from './utils';
+
+//var log = require('./logger').create();
+describe('when detecting chart type ', function () {
+    var str;
     beforeEach(function () {
@@ -32,17 +34,17 @@
 
-describe('when cloning CSS ',function() {
-    var utils = require('./utils');
+describe('when cloning CSS ', function () {
 
+
     beforeEach(function () {
-            var MockBrowser = require('mock-browser').mocks.MockBrowser;
-            var mock = new MockBrowser();
+        var MockBrowser = require('mock-browser').mocks.MockBrowser;
+        var mock = new MockBrowser();
 
-            // and in the run-code inside some object
-            document = mock.getDocument();
-            //document.body.innerHTML = '';
-            //document.body.innerHTML = '';
+        // and in the run-code inside some object
+        global.document = mock.getDocument();
+        //document.body.innerHTML = '';
+        //document.body.innerHTML = '';
     });
 
     function stylesToArray(svg) {
-        var styleSheets = svg.getElementsByTagName("style");
+        var styleSheets = svg.getElementsByTagName('style');
         expect(styleSheets.length).toBe(1);
@@ -52,7 +54,7 @@ var styleSheet = styleSheets[0];
         var innerStyle = styleSheet.innerHTML;
-        var styleArr = innerStyle.split("\n");
+        var styleArr = innerStyle.split('\n');
 
         // Remove first and last two lines to remove the CDATA
         expect(styleArr.length).toBeGreaterThan(2);
-        var styleArrTrim = styleArr.slice(1,-2);
+        var styleArrTrim = styleArr.slice(1, -2);
 
@@ -62,3 +64,3 @@ // Remove all empty lines
             if (styleArrTrim[i].trim() === '') {
-                styleArrTrim.splice(i,1);
+                styleArrTrim.splice(i, 1);
                 i--;
@@ -72,3 +74,2 @@ }
     function addStyleToDocument() {
-        var styleSheetCount = document.styleSheets.length;
         var s = document.createElement('style');
@@ -80,3 +81,2 @@ s.innerHTML = '.node { stroke:#eee; }\n.node-square { stroke:#bbb; }\n';
     function addSecondStyleToDocument() {
-        var styleSheetCount = document.styleSheets.length;
         var s = document.createElement('style');
@@ -108,3 +108,3 @@ s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#beb; }\n';
         svg.appendChild(s);
-        document.body.appendChild(svg); 
+        document.body.appendChild(svg);
         document.styleSheets[styleSheetCount].title = 'mermaid-svg-internal-css';
@@ -126,4 +126,4 @@ }
 
-        utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } });
-        expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }' ]);
+        utils.cloneCssStyles(svg, {'default': {'styles': ['stroke:#fff', 'stroke-width:1.5px']}});
+        expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }']);
         // Also verify the elements around the styling
@@ -147,3 +147,3 @@ expect(svg.innerHTML).toBe('<style type="text/css" title="mermaid-svg-internal-css">/* <![CDATA[ */\n#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }\n/* ]]> */\n</style>');
         utils.cloneCssStyles(svg, {});
-        expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
+        expect(stylesToArray(svg)).toEqual(['.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
     });
@@ -156,3 +156,3 @@
         utils.cloneCssStyles(svg, {});
-        expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
+        expect(stylesToArray(svg)).toEqual(['.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
     });
@@ -166,3 +166,3 @@
         utils.cloneCssStyles(svg, {});
-        expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
+        expect(stylesToArray(svg)).toEqual(['.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
     });
@@ -173,4 +173,4 @@
         addStyleToDocument();
-        utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } });
-        expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
+        utils.cloneCssStyles(svg, {'default': {'styles': ['stroke:#fff', 'stroke-width:1.5px']}});
+        expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
     });
@@ -181,13 +181,15 @@
         addStyleToDocument();
-        utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] }, 
-                                    "node-square": { "styles": ["fill:#eee", "stroke:#aaa"] },
-                                    "node-circle": { "styles": ["fill:#444", "stroke:#111"] } });
-        expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }',
-                                             '.node { stroke: #eee; }', 
-                                             '.node-square { stroke: #bbb; }',
-                                             '#mermaid-01 .node-square>rect { fill:#eee; stroke:#aaa; }',
-                                             '#mermaid-01 .node-circle>rect { fill:#444; stroke:#111; }'
-                                             ]);
+        utils.cloneCssStyles(svg, {
+            'default': {'styles': ['stroke:#fff', 'stroke-width:1.5px']},
+            'node-square': {'styles': ['fill:#eee', 'stroke:#aaa']},
+            'node-circle': {'styles': ['fill:#444', 'stroke:#111']}
+        });
+        expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }',
+            '.node { stroke: #eee; }',
+            '.node-square { stroke: #bbb; }',
+            '#mermaid-01 .node-square>rect { fill:#eee; stroke:#aaa; }',
+            '#mermaid-01 .node-circle>rect { fill:#444; stroke:#111; }'
+        ]);
     });
 });
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46286308

increased by35.35%

Dev dependency count

59

decreased by-16.9%

Number of package files

603

increased by22.81%

Lines of code

508217

increased by68.51%

Worsened metrics

Number of low license alerts

3

increased by200%

License quality

80

decreased by-20%

Number of low quality alerts

23

increased by43.75%

Number of low supply chain risk alerts

119

increased by75%

Number of medium supply chain risk alerts

47

increased by51.61%

Dependency changes

• + Addedd3@3.5.17(transitive)

• - Removedajv@6.12.6(transitive)

• - Removedasn1@0.2.6(transitive)

• - Removedassert-plus@1.0.0(transitive)

• - Removedasynckit@0.4.0(transitive)

• - Removedaws-sign2@0.7.0(transitive)

• - Removedaws4@1.13.2(transitive)

• - Removedbcrypt-pbkdf@1.0.2(transitive)

• - Removedbindings@1.5.0(transitive)

• - Removedcaseless@0.12.0(transitive)

• - Removedcombined-stream@1.0.8(transitive)

• - Removedcontextify@0.1.15(transitive)

• - Removedcore-util-is@1.0.2(transitive)

• - Removedcssom@0.3.8(transitive)

• - Removedcssstyle@0.2.37(transitive)

• - Removedd3@3.4.13(transitive)

• - Removeddashdash@1.14.1(transitive)

• - Removeddelayed-stream@1.0.0(transitive)

• - Removeddom-serializer@0.2.2(transitive)

• - Removeddomelementtype@1.3.12.3.0(transitive)

• - Removeddomhandler@2.4.2(transitive)

• - Removeddomutils@1.7.0(transitive)

• - Removedecc-jsbn@0.1.2(transitive)

• - Removedentities@1.1.22.2.0(transitive)

• - Removedextend@3.0.2(transitive)

• - Removedextsprintf@1.3.0(transitive)

• - Removedfast-deep-equal@3.1.3(transitive)

• - Removedfast-json-stable-stringify@2.1.0(transitive)

• - Removedfile-uri-to-path@1.0.0(transitive)

• - Removedforever-agent@0.6.1(transitive)

• - Removedform-data@2.3.3(transitive)

• - Removedgetpass@0.1.7(transitive)

• - Removedhar-schema@2.0.0(transitive)

• - Removedhar-validator@5.1.5(transitive)

• - Removedhtmlparser2@3.10.1(transitive)

• - Removedhttp-signature@1.2.0(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedis-typedarray@1.0.0(transitive)

• - Removedisstream@0.1.2(transitive)

• - Removedjsbn@0.1.1(transitive)

• - Removedjsdom@1.0.0(transitive)

• - Removedjson-schema@0.4.0(transitive)

• - Removedjson-schema-traverse@0.4.1(transitive)

• - Removedjson-stringify-safe@5.0.1(transitive)

• - Removedjsprim@1.4.2(transitive)

• - Removedmime-db@1.52.0(transitive)

• - Removedmime-types@2.1.35(transitive)

• - Removednan@2.20.0(transitive)

• - Removednwmatcher@1.4.4(transitive)

• - Removedoauth-sign@0.9.0(transitive)

• - Removedparse5@1.5.1(transitive)

• - Removedperformance-now@2.1.0(transitive)

• - Removedpsl@1.9.0(transitive)

• - Removedpunycode@2.3.1(transitive)

• - Removedqs@6.5.3(transitive)

• - Removedreadable-stream@3.6.2(transitive)

• - Removedrequest@2.88.2(transitive)

• - Removedsafe-buffer@5.2.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsshpk@1.18.0(transitive)

• - Removedstring_decoder@1.3.0(transitive)

• - Removedtough-cookie@2.5.0(transitive)

• - Removedtunnel-agent@0.6.0(transitive)

• - Removedtweetnacl@0.14.5(transitive)

• - Removeduri-js@4.4.1(transitive)

• - Removedutil-deprecate@1.0.2(transitive)

• - Removeduuid@3.4.0(transitive)

• - Removedverror@1.10.0(transitive)

• - Removedxmlhttprequest@1.8.0(transitive)

• Updatedd3@~3.5.6