Merge pull request #101 from bjowes/text-labels

Text based labels, new shape

gulpfile.js

@@ -71,11 +71,23 @@ gulp.task('less', function () {
 
 var browserify = require('gulp-browserify');
 
+//var slim_ext_libs = [
+//  'dagre-d3',
+//  'd3'
+//];
+
 // Basic usage
 gulp.task('slimDist', function() {
     // Single entry point to browserify
     return gulp.src('src/main.js')
         .pipe(browserify())
+        /*.pipe(browserify({standalone: 'mermaid'})) 
+            .on('prebundle', function(bundle) {
+            // Keep these external for the slim version.
+                slim_ext_libs.forEach(function(lib) {
+                    bundle.external(lib);
+                });
+            })*/
         .pipe(rename('mermaid.slim.js'))
         .pipe(gulp.dest('./dist/'))
         .pipe(uglify())

src/diagrams/flowchart/dagre-d3.js

@@ -0,0 +1,15 @@
+/* global window */
+
+var dagreD3;
+
+if (require) {
+  try {
+    dagreD3 = require("dagre-d3");
+  } catch (e) {}
+}
+
+if (!dagreD3) {
+  dagreD3 = window.dagreD3;
+}
+
+module.exports = dagreD3;

src/diagrams/flowchart/flowRenderer.js

@@ -4,7 +4,7 @@
 var graph = require('./graphDb');
 var flow = require('./parser/flow');
 var dot = require('./parser/dot');
-var dagreD3 = require('dagre-d3');
+var dagreD3 = require('./dagre-d3');
 /**
  * Function that adds the vertices found in the graph definition to the graph to be rendered.
  * @param vert Object containing the vertices.
@@ -60,7 +60,13 @@ exports.addVertices = function (vert, g) {
             verticeText = vertice.text;
         }
 
-        console.log(verticeText);
+        var labelTypeStr = '';
+        if(global.mermaid.htmlLabels) {
+            labelTypeStr = 'html';
+        } else {
+            verticeText = verticeText.replace(/<br>/g, "\n");
+            labelTypeStr = 'text';
+        }
 
         var radious = 0;
         var _shape = '';
@@ -80,6 +86,9 @@ exports.addVertices = function (vert, g) {
             case 'odd':
                 _shape = 'rect_left_inv_arrow';
                 break;
+            case 'odd_right':
+                _shape = 'rect_left_inv_arrow';
+                break;
             case 'circle':
                 _shape = 'circle';
                 break;
@@ -87,7 +96,7 @@ exports.addVertices = function (vert, g) {
                 _shape = 'rect';
         }
         // Add the node
-        g.setNode(vertice.id, {labelType: "html",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});
     });
 };
 
@@ -147,12 +156,16 @@ exports.addEdges = function (edges, g) {
         }
         // Edge with text
         else {
-
+            var edgeText = edge.text.replace(/<br>/g, "\n");
             if(typeof edge.style === 'undefined'){
-                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);
+                if (global.mermaid.htmlLabels){
-            }else{
+                    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);
+                }
+             }else{
                 g.setEdge(edge.start, edge.end, {
-                    labelType: "html",style: style, arrowheadStyle: "fill: #333", label: edge.text, arrowhead: aHead
+                    labelType: "text", style: style, arrowheadStyle: "fill: #333", label: edgeText, arrowhead: aHead
                 },cnt);
             }
         }
@@ -183,10 +196,12 @@ exports.getClasses = function (text, isDot) {
     var classes = graph.getClasses();
 
     // Add default class if undefined
-    if(typeof classes.default === 'undefined') {
+    if(typeof(classes.default) === 'undefined') {
         classes.default = {id:'default'};
-        classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
+        classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
-    } 
+        classes.default.nodeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
+        classes.default.edgeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
+    }
     return classes;
 };
 
@@ -312,6 +327,28 @@ exports.draw = function (text, id,isDot) {
         return shapeSvg;
     };
 
+    // Add custom shape for box with inverted arrow on right side
+    render.shapes().rect_right_inv_arrow = function (parent, bbox, node) {
+        var w = bbox.width,
+            h = bbox.height,
+            points = [
+                {x: 0, y: 0},
+                {x: w+h/2, y: 0},
+                {x: w, y: -h/2},
+                {x: w+h/2, 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) + ")");
+        node.intersect = function (point) {
+            return dagreD3.intersect.polygon(node, points, point);
+        };
+        return shapeSvg;
+    };
+
     // Add our custom arrow - an empty arrowhead
     render.arrows().none = function normal(parent, id, edge, type) {
         var marker = parent.append("marker")

src/diagrams/flowchart/parser/flow.jison

@@ -243,6 +243,10 @@ vertex:  alphaNum SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'odd');}
     | alphaNum TAGEND text SQE SPACE
         {$$ = $1;yy.addVertex($1,$3,'odd');}
+/*  | alphaNum SQS text TAGSTART
+        {$$ = $1;yy.addVertex($1,$3,'odd_right');}
+    | alphaNum SQS text TAGSTART SPACE
+        {$$ = $1;yy.addVertex($1,$3,'odd_right');} */
     | alphaNum
         {$$ = $1;yy.addVertex($1);}
     | alphaNum SPACE

src/main.js

@@ -94,6 +94,7 @@ var equals = function (val, variable){
 
 global.mermaid = {
     startOnLoad:true,
+    htmlLabels:true,
     init:function(){
         init();
     },
@@ -109,6 +110,12 @@ exports.contentLoaded = function(){
     // Check state of start config mermaid namespece
     //console.log('global.mermaid.startOnLoad',global.mermaid.startOnLoad);
     //console.log('mermaid_config',mermaid_config);
+    if (typeof mermaid_config !== 'undefined') {
+        if (equals(false, mermaid_config.htmlLabels)) {
+            global.mermaid.htmlLabels = false;
+        }
+    }
+
     if(global.mermaid.startOnLoad) {
 
         // For backwards compatability reasons also check mermaid_config variable
@@ -128,7 +135,7 @@ exports.contentLoaded = function(){
 
 if(typeof document !== 'undefined'){
     /**
-     * Wait for coument loaded before starting the execution
+     * Wait for document loaded before starting the execution
      */
     document.addEventListener('DOMContentLoaded', function(){
         exports.contentLoaded();

src/utils.js

@@ -58,10 +58,19 @@ module.exports.cloneCssStyles = function(svg, classes){
     for (var className in classes) {
         if (classes.hasOwnProperty(className) && typeof(className) != "undefined") {
             if (className === 'default') {
-                defaultStyles = '.node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
+                if (classes.default.styles instanceof Array) {
+                    defaultStyles += "#" + svg.id.trim() + ' .node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
+                }
+                if (classes.default.nodeLabelStyles instanceof Array) {
+                    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';
+                }
             } else {
-                embeddedStyles += '.' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
+                if (classes[className].styles instanceof Array) {
-                //embeddedStyles += svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
+                    embeddedStyles += "#" + svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';            
+                }
             }
         }
     }
@@ -71,6 +80,7 @@ module.exports.cloneCssStyles = function(svg, classes){
         s.setAttribute('type', 'text/css');
         s.setAttribute('title', 'mermaid-svg-internal-css');
         s.innerHTML = "/* <![CDATA[ */\n";
+        // Make this CSS local to this SVG
         if (defaultStyles !== "") {
             s.innerHTML += defaultStyles;
         }

src/utils.spec.js

@@ -85,12 +85,14 @@ describe('when cloning CSS ',function() {
     }
 
     function addStyleToDocument() {
+        var styleSheetCount = document.styleSheets.length;
         var s = document.createElement('style');
         s.innerHTML = '.node { stroke:#eee; }\n.node-square { stroke:#bbb; }\n';
         document.body.appendChild(s);
     }
 
     function addSecondStyleToDocument() {
+        var styleSheetCount = document.styleSheets.length;
         var s = document.createElement('style');
         s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#beb; }\n';
         document.body.appendChild(s);
@@ -98,6 +100,7 @@ describe('when cloning CSS ',function() {
 
     function generateSVG() {
         var svg = document.createElement('svg');
+        svg.setAttribute('id', 'mermaid-01');
         var g1 = document.createElement('g');
         g1.setAttribute('class', 'node');
         svg.appendChild(g1);
@@ -107,29 +110,22 @@ describe('when cloning CSS ',function() {
         return svg;
     }
 
-    function addSVGwithStyleToDocument() {
+    function addMermaidSVGwithStyleToDocument() {
-        var svg = document.createElement('svg');
+        var styleSheetCount = document.styleSheets.length;
-        var s = document.createElement('style');
-        s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#bfb; }\n';
-        svg.appendChild(s);
-        document.body.appendChild(svg); 
-    }
-
-    function addMermaidSVGwithStyleToDocument(id) {
         var svg = document.createElement('svg');
+        svg.setAttribute('id', 'mermaid-03');
         var s = document.createElement('style');
         s.setAttribute('type', 'text/css');
         s.setAttribute('title', 'mermaid-svg-internal-css');
-        s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#bfe; }\n';
+        s.innerHTML = '#mermaid-05 .node2 { stroke:#eee; }\n.node-square { stroke:#bfe; }\n';
         svg.appendChild(s);
         document.body.appendChild(svg); 
-        // The Mock-browser seems not to support stylesheets title attribute, so we add it manually
+        document.styleSheets[styleSheetCount].title = 'mermaid-svg-internal-css';
-        var sheets = document.styleSheets;
-        sheets[id].title = "mermaid-svg-internal-css";
     }
 
     it('should handle an empty set of classes', function () {
         var svg = document.createElement('svg');
+        svg.setAttribute('id', 'mermaid-01');
 
         utils.cloneCssStyles(svg, {});
         // Should not create style element if not needed
@@ -138,16 +134,19 @@ describe('when cloning CSS ',function() {
 
     it('should handle a default class', function () {
         var svg = document.createElement('svg');
+        svg.setAttribute('id', 'mermaid-01');
 
         utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } });
-        expect(stylesToArray(svg)).toEqual([ '.node { stroke:#fff; stroke-width:1.5px; }']);
+        expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }' ]);
         // Also verify the elements around the styling
-        expect(svg.innerHTML).toBe('<style type="text/css" title="mermaid-svg-internal-css">/* <![CDATA[ */\n.node { stroke:#fff; stroke-width:1.5px; }\n/* ]]> */\n</style>');
+        expect(svg.innerHTML).toBe('<style type="text/css" title="mermaid-svg-internal-css">/* <![CDATA[ */\n#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }\n/* ]]> */\n</style>');
     });
 
     it('should handle stylesheet in document with no classes in SVG', function () {
         var svg = document.createElement('svg');
-        addStyleToDocument();
+        svg.setAttribute('id', 'mermaid-01');
+
+        addStyleToDocument('mermaid');
         utils.cloneCssStyles(svg, {});
         // Should not create style element if not needed
         expect(svg.innerHTML).toBe('');
@@ -168,43 +167,34 @@ describe('when cloning CSS ',function() {
         expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
     });
 
-    it('should handle multiple stylesheets + styles in other SVG', function () {
+    it('should handle multiple stylesheets + ignore styles in other mermaid SVG', function () {
         var svg = generateSVG();
         addStyleToDocument();
         addSecondStyleToDocument();
-        addSVGwithStyleToDocument();
+        addMermaidSVGwithStyleToDocument();
         utils.cloneCssStyles(svg, {});
-        expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }', '.node-square { stroke: #bfb; }']);
+        expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
-    });
-
-    it('should handle multiple stylesheets + ignore styles in mermaid SVG', function () {
-        var svg = generateSVG();
-        addStyleToDocument();
-        addSecondStyleToDocument();
-        addSVGwithStyleToDocument();
-        addMermaidSVGwithStyleToDocument(3);
-        utils.cloneCssStyles(svg, {});
-        expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }', '.node-square { stroke: #bfb; }']);
     });
 
     it('should handle a default class together with stylesheet in document with classes in SVG', function () {
         var svg = generateSVG();
         addStyleToDocument();
         utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } });
-        expect(stylesToArray(svg)).toEqual([ '.node { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
+        expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
     });
 
-    xit('should handle a default class together with stylesheet in document and classDefs', function () {
+    it('should handle a default class together with stylesheet in document and classDefs', function () {
         var svg = generateSVG();
         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([ '.node { stroke:#fff; stroke-width:1.5px; }', 
+        expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }', 
                                              '.node { stroke: #eee; }', 
                                              '.node-square { stroke: #bbb; }',
-                                             '.node-square { fill:#eee; stroke:#aaa; }',
+                                             '#mermaid-01 .node-square { fill:#eee; stroke:#aaa; }',
-                                             '.node-circle { fill:#444; stroke:#111; }' ]);
+                                             '#mermaid-01 .node-circle { fill:#444; stroke:#111; }'
+                                             ]);
     });
 });
 

test/web.html

@@ -5,6 +5,7 @@
 
     <script src="../dist/mermaid.full.js"></script>
     <scrpt src="https://cdn.rawgit.com/knsv/mermaid/0.3.0/dist/mermaid.full.min.js"></scrpt>
+    <scrpt src="https://cdn.rawgit.com/knsv/mermaid/0.3.2/dist/mermaid.full.min.js"></scrpt>
     <script>
         var mermaid_config = {
             startOnLoad:true
@@ -34,9 +35,9 @@
         A-->D;
         B-->D;
         A-->|Link text|B
-        classDef default fill:#9f6,stroke:#333,stroke-width:2px;
+        classDef default fill:#696,stroke:#333,stroke-width:2px;
         classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-        class green B;
+        class B green;
     </div>
     <h1>Sub graphs</h1>
     <div class="mermaid">graph LR

test/web_style.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <script src="../dist/mermaid.full.js"></script>
+    <script>
+        var mermaid_config = {
+            startOnLoad:true,
+            htmlLabels:false
+        }
+    </script>
+    <script>
+        function apa(){
+            console.log('CLICKED');
+        }
+    </script>
+    <style>
+        .node-square { 
+            stroke-width: 4px; 
+            stroke: #339933; 
+            fill: #999900;   
+            font-weight: 300;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
+            font-size: 14px; } 
+        .node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
+        .node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+        .node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+        
+    </style>
+</head>
+    <body>
+    <h1>Style</h1>
+    Styling is applied in the following order: 
+    <ol>
+    <li>Node default style (see wiki)</li>
+    <li>CSS on the page</li>
+    <li>Class definitions inside the graph definition</li>
+    <li>Inline styling inside the graph definition</li>
+    </ol>
+    and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
+
+    <h3>CSS in the page head:</h3>
+    <pre>
+        &lt;style&gt;
+            .node-square { 
+                stroke-width: 4px; 
+                stroke: #339933; 
+                fill: #999900;   
+                font-weight: 300;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
+                font-size: 14px; } 
+            .node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
+            .node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+            .node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+            
+        &lt;/style&gt;
+    </pre>
+    <h3>Graph definition</h3>
+    <pre>
+    graph TD;
+
+        noc[No class&lt;br />using default];
+        cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
+        class cyr2 node-cyr-undefined;
+        ndef[Default style];
+        noc-->ndef;
+        cyr2-->ndef;
+
+        sq[Class node-square&lt;br /&gt;defined in page CSS];
+        class sq node-square;
+        ncss[Page CSS style];
+        sq--&gt;ncss;
+
+        cyr[Class node-cyr&lt;br /&gt;defined by classDef];
+        od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
+        ncdef[classDef style];
+        od2-->ncdef;
+        cyr-->ncdef;
+        class cyr node-cyr;
+        class od2 node-odd-override;
+        classDef node-odd-override fill:#BB00BB,stroke:#666622;
+        classDef node-cyr fill:#BB0099,stroke:#666622;
+
+        e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
+        class e1 node-e1;
+        style e1 fill:#FF0000;
+        e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
+        class e2 node-e2;
+        style e2 fill:#FF0000;
+        e((Inline style in&lt;br /&gt;graph definition));
+        style e fill:#FF0000;
+        ninl[Inline style];
+        e-->ninl;
+        e1-->ninl;
+        e2-->ninl;
+        classDef node-e1 fill:#990066,stroke:#666622;
+        classDef node-e2 fill:#990066,stroke:#666622;
+    </pre>
+
+    <div class="mermaid">
+        graph TD;
+
+        noc[No class<br />using default];
+        cyr2((Class node-cyr-undefined<br />is undefined, using default));
+        class cyr2 node-cyr-undefined;
+        ndef[Default style];
+        noc-->ndef;
+        cyr2-->ndef;
+
+        sq[Class node-square<br />defined in page CSS];
+        class sq node-square;
+        ncss[Page CSS style];
+        sq-->ncss;
+
+        cyr[Class node-cyr<br />defined by classDef];
+        od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
+        ncdef[classDef style];
+        od2-->|Simple edge label|ncdef;
+        cyr-->|Complex<br>multiline<br>edge label|ncdef;
+        class cyr node-cyr;
+        class od2 node-odd-override;
+        classDef node-odd-override fill:#BB00BB,stroke:#666622;
+        classDef node-cyr fill:#BB0099,stroke:#666622;
+
+        e1[Class node-cyr<br />defined by classDef<br />and inline style];
+        class e1 node-e1;
+        style e1 fill:#FF0000;
+        e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
+        class e2 node-e2;
+        style e2 fill:#FF0000;
+        e((Inline style in<br />graph definition));
+        style e fill:#FF0000;
+        ninl[Inline style];
+        e-->ninl;
+        e1-->ninl;
+        e2-->ninl;
+        classDef node-e1 fill:#990066,stroke:#666622;
+        classDef node-e2 fill:#990066,stroke:#666622;
+    </div>
+
+
+
+    </body>
+</html>

test/web_style_dagre.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <script src="../dist/d3.min.js"></script> 
+    <script src="../../bjowes-dagre-d3/build/dagre-d3.js"></script>
+    <script src="../dist/mermaid.slim.js"></script> -
+    <!-- <script src="../dist/mermaid.full.min.js"></script> -->
+    <script>
+        var mermaid_config = {
+            startOnLoad:true
+        }
+    </script>
+    <script>
+        function apa(){
+            console.log('CLICKED');
+        }
+    </script>
+    <style>
+        .node-square { 
+            stroke-width: 4px; 
+            stroke: #339933; 
+            fill: #999900;   
+            font-weight: 300;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
+            font-size: 14px; } 
+        .node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
+        .node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+        .node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+        
+    </style>
+</head>
+    <body>
+    <h1>Style</h1>
+    Styling is applied in the following order: 
+    <ol>
+    <li>Node default style (see wiki)</li>
+    <li>CSS on the page</li>
+    <li>Class definitions inside the graph definition</li>
+    <li>Inline styling inside the graph definition</li>
+    </ol>
+    and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
+
+    <h3>CSS in the page head:</h3>
+    <pre>
+        &lt;style&gt;
+            .node-square { 
+                stroke-width: 4px; 
+                stroke: #339933; 
+                fill: #999900;   
+                font-weight: 300;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
+                font-size: 14px; } 
+            .node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
+            .node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+            .node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+            
+        &lt;/style&gt;
+    </pre>
+    <h3>Graph definition</h3>
+    <pre>
+    graph TD;
+
+        noc[No class&lt;br />using default];
+        cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
+        class cyr2 node-cyr-undefined;
+        ndef[Default style];
+        noc-->ndef;
+        cyr2-->ndef;
+
+        sq[Class node-square&lt;br /&gt;defined in page CSS];
+        class sq node-square;
+        ncss[Page CSS style];
+        sq--&gt;ncss;
+
+        cyr[Class node-cyr&lt;br /&gt;defined by classDef];
+        od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
+        ncdef[classDef style];
+        od2-->ncdef;
+        cyr-->ncdef;
+        class cyr node-cyr;
+        class od2 node-odd-override;
+        classDef node-odd-override fill:#BB00BB,stroke:#666622;
+        classDef node-cyr fill:#BB0099,stroke:#666622;
+
+        e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
+        class e1 node-e1;
+        style e1 fill:#FF0000;
+        e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
+        class e2 node-e2;
+        style e2 fill:#FF0000;
+        e((Inline style in&lt;br /&gt;graph definition));
+        style e fill:#FF0000;
+        ninl[Inline style];
+        e-->ninl;
+        e1-->ninl;
+        e2-->ninl;
+        classDef node-e1 fill:#990066,stroke:#666622;
+        classDef node-e2 fill:#990066,stroke:#666622;
+    </pre>
+
+    <div class="mermaid">
+        graph TD;
+
+        noc[No class<br />using default];
+        cyr2((Class node-cyr-undefined<br />is undefined, using default));
+        class cyr2 node-cyr-undefined;
+        ndef[Default style];
+        noc-->ndef;
+        cyr2-->ndef;
+
+        sq[Class node-square<br />defined in page CSS];
+        class sq node-square;
+        ncss[Page CSS style];
+        sq-->ncss;
+
+        cyr[Class node-cyr<br />defined by classDef];
+        od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
+        ncdef[classDef style];
+        od2-->|Simple edge label|ncdef;
+        cyr-->|Complex<br>multiline<br>edge label|ncdef;
+        class cyr node-cyr;
+        class od2 node-odd-override;
+        classDef node-odd-override fill:#BB00BB,stroke:#666622;
+        classDef node-cyr fill:#BB0099,stroke:#666622;
+
+        e1[Class node-cyr<br />defined by classDef<br />and inline style];
+        class e1 node-e1;
+        style e1 fill:#FF0000;
+        e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
+        class e2 node-e2;
+        style e2 fill:#FF0000;
+        e((Inline style in<br />graph definition));
+        style e fill:#FF0000;
+        ninl[Inline style];
+        e-->ninl;
+        e1-->ninl;
+        e2-->ninl;
+        classDef node-e1 fill:#990066,stroke:#666622;
+        classDef node-e2 fill:#990066,stroke:#666622;
+    </div>
+
+
+
+    </body>
+</html>

test/web_style_html_label.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <script src="../dist/mermaid.full.js"></script>
+    <script>
+        var mermaid_config = {
+            startOnLoad:true,
+            labelStyle:'hmtl'
+        }
+    </script>
+    <script>
+        function apa(){
+            console.log('CLICKED');
+        }
+    </script>
+    <style>
+        .node-square { 
+            stroke-width: 4px; 
+            stroke: #339933; 
+            fill: #999900;   
+            font-weight: 300;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
+            font-size: 14px; } 
+        .node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
+        .node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+        .node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+        
+    </style>
+</head>
+    <body>
+    <h1>Style</h1>
+    Styling is applied in the following order: 
+    <ol>
+    <li>Node default style (see wiki)</li>
+    <li>CSS on the page</li>
+    <li>Class definitions inside the graph definition</li>
+    <li>Inline styling inside the graph definition</li>
+    </ol>
+    and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
+
+    <h3>CSS in the page head:</h3>
+    <pre>
+        &lt;style&gt;
+            .node-square { 
+                stroke-width: 4px; 
+                stroke: #339933; 
+                fill: #999900;   
+                font-weight: 300;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
+                font-size: 14px; } 
+            .node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
+            .node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+            .node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
+            
+        &lt;/style&gt;
+    </pre>
+    <h3>Graph definition</h3>
+    <pre>
+    graph TD;
+
+        noc[No class&lt;br />using default];
+        cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
+        class cyr2 node-cyr-undefined;
+        ndef[Default style];
+        noc-->ndef;
+        cyr2-->ndef;
+
+        sq[Class node-square&lt;br /&gt;defined in page CSS];
+        class sq node-square;
+        ncss[Page CSS style];
+        sq--&gt;ncss;
+
+        cyr[Class node-cyr&lt;br /&gt;defined by classDef];
+        od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
+        ncdef[classDef style];
+        od2-->ncdef;
+        cyr-->ncdef;
+        class cyr node-cyr;
+        class od2 node-odd-override;
+        classDef node-odd-override fill:#BB00BB,stroke:#666622;
+        classDef node-cyr fill:#BB0099,stroke:#666622;
+
+        e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
+        class e1 node-e1;
+        style e1 fill:#FF0000;
+        e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
+        class e2 node-e2;
+        style e2 fill:#FF0000;
+        e((Inline style in&lt;br /&gt;graph definition));
+        style e fill:#FF0000;
+        ninl[Inline style];
+        e-->ninl;
+        e1-->ninl;
+        e2-->ninl;
+        classDef node-e1 fill:#990066,stroke:#666622;
+        classDef node-e2 fill:#990066,stroke:#666622;
+    </pre>
+
+    <div class="mermaid">
+        graph TD;
+
+        noc[No class<br />using default];
+        cyr2((Class node-cyr-undefined<br />is undefined, using default));
+        class cyr2 node-cyr-undefined;
+        ndef[Default style];
+        noc-->ndef;
+        cyr2-->ndef;
+
+        sq[Class node-square<br />defined in page CSS];
+        class sq node-square;
+        ncss[Page CSS style];
+        sq-->ncss;
+
+        cyr[Class node-cyr<br />defined by classDef];
+        od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
+        ncdef[classDef style];
+        od2-->|Simple edge label|ncdef;
+        cyr-->|Complex<br>multiline<br>edge label|ncdef;
+        class cyr node-cyr;
+        class od2 node-odd-override;
+        classDef node-odd-override fill:#BB00BB,stroke:#666622;
+        classDef node-cyr fill:#BB0099,stroke:#666622;
+
+        e1[Class node-cyr<br />defined by classDef<br />and inline style];
+        class e1 node-e1;
+        style e1 fill:#FF0000;
+        e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
+        class e2 node-e2;
+        style e2 fill:#FF0000;
+        e((Inline style in<br />graph definition));
+        style e fill:#FF0000;
+        ninl[Inline style];
+        e-->ninl;
+        e1-->ninl;
+        e2-->ninl;
+        classDef node-e1 fill:#990066,stroke:#666622;
+        classDef node-e2 fill:#990066,stroke:#666622;
+    </div>
+
+
+
+    </body>
+</html>