marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 17:29:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Modernization of build environment. Less gulp, more npm. Eslint.

Browse Source
This commit is contained in:
knsv
2015-10-12 07:37:02 +02:00
parent ed65e6df3b
commit 658ed3d790
34 changed files with 3459 additions and 2828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/d3.js vendored
View File

@@ -4,7 +4,7 @@ var d3;
if (require) {
try {
d3 = require("d3");
d3 = require('d3');
} catch (e) {
//log.debug('Exception ... but ok');
//log.debug(e);
@@ -215,7 +215,7 @@ module.exports = d3;
var foreign_object = parent.append('foreignObject');
// add foreign object and set dimensions, position, etc
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)
.attr('y', bounds.y)
.attr('width', bounds.width)

18
src/diagrams/example/exampleRenderer.js
View File

@@ -21,15 +21,15 @@ exports.draw = function (txt, id, ver) {
// Fetch the default direction, use TD if none was found
var svg = d3.select('#'+id);
var textstring = "mermaid!";
var g = svg.append("g");
var textstring = 'mermaid!';
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);
/*
@@ -38,7 +38,7 @@ exports.draw = function (txt, id, ver) {
var height = box.stopy-box.starty+2*conf.diagramMarginY;
var width = box.stopx-box.startx+2*conf.diagramMarginX;*/
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');
};

2
src/diagrams/flowchart/d3.js vendored
View File

@@ -4,7 +4,7 @@
if (require) {
try {
d3 = require("d3");
d3 = require('d3');
} catch (e) {}
}

2
src/diagrams/flowchart/dagre-d3.js
View File

@@ -4,7 +4,7 @@ var dagreD3;
//log.debug('setting up dagre-d3');
if (require) {
try {
dagreD3 = require("dagre-d3");
dagreD3 = require('dagre-d3');
//log.debug('Got it (dagre-d3)');
} catch (e) {log.debug('Could not load dagre-d3');}
}

110
src/diagrams/flowchart/flowRenderer.js
View File

@@ -54,7 +54,7 @@ exports.addVertices = function (vert, g) {
//log.debug(vertice.classes);
if(vertice.classes.length >0){
classStr = vertice.classes.join(" ");
classStr = vertice.classes.join(' ');
}
/**
@@ -79,11 +79,11 @@ exports.addVertices = function (vert, g) {
if(conf.htmlLabels) {
labelTypeStr = 'html';
verticeText = verticeText.replace(/fa:fa[\w\-]+/g,function(s,t,u){
return '<i class="fa '+ s.substring(3)+'">&nbsp';
return '<i class="fa '+ s.substring(3)+'">';
});
} else {
verticeText = verticeText.replace(/<br>/g, "\n");
verticeText = verticeText.replace(/<br>/g, '\n');
labelTypeStr = 'text';
}
@@ -180,22 +180,22 @@ exports.addEdges = function (edges, g) {
g.setEdge(edge.start, edge.end,{ style: style, arrowhead: aHead},cnt);
}else{
g.setEdge(edge.start, edge.end, {
style: style, arrowheadStyle: "fill: #333", arrowhead: aHead
style: style, arrowheadStyle: 'fill: #333', arrowhead: aHead
},cnt);
}
}
// Edge with text
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);
}
}
@@ -325,13 +325,13 @@ exports.draw = function (text, id,isDot) {
{x: s / 2, y: -s},
{x: 0, y: -s / 2}
];
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) {
return dagreD3.intersect.polygon(node, points, point);
};
@@ -349,11 +349,11 @@ exports.draw = function (text, id,isDot) {
{x: -h/2, y: -h},
{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) {
return dagreD3.intersect.polygon(node, points, point);
};
@@ -371,11 +371,11 @@ exports.draw = function (text, id,isDot) {
{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) + ")");
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);
};
@@ -384,40 +384,40 @@ exports.draw = function (text, id,isDot) {
// Add our custom arrow - an empty arrowhead
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);
//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);
/*
var xPos = document.querySelectorAll('.clusters rect')[0].x.baseVal.value;
@@ -433,22 +433,22 @@ exports.draw = function (text, id,isDot) {
*/
if(conf.useMaxWidth) {
// 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;');
}
else{
// 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)); }
// Index nodes

26
src/diagrams/flowchart/graphDb.js
View File

@@ -233,17 +233,17 @@ var setupToolTips = function(element){
var tooltipElem = d3.select('.mermaidTooltip');
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);
}
var svg = d3.select(element).select('svg');
var nodes = svg.selectAll("g.node");
var nodes = svg.selectAll('g.node');
nodes
.on("mouseover", function(d) {
.on('mouseover', function(d) {
var el = d3.select(this);
var title = el.attr('title');
// Dont try to draw a tooltip if no data is provided
@@ -254,17 +254,17 @@ var setupToolTips = function(element){
tooltipElem.transition()
.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(d) {
tooltipElem.transition()
.duration(500)
.style("opacity", 0);
.style('opacity', 0);
var el = d3.select(this);
el.classed('hover',false);
});
@@ -289,7 +289,7 @@ exports.clear = function () {
* @returns {string}
*/
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;';
};
/**
@@ -297,7 +297,7 @@ exports.defaultStyle = function () {
*/
exports.addSubGraph = function (list, title) {
function uniq(a) {
var prims = {"boolean":{}, "number":{}, "string":{}}, objs = [];
var prims = {'boolean':{}, 'number':{}, 'string':{}}, objs = [];
return a.filter(function(item) {
var type = typeof item;

46
src/diagrams/flowchart/parser/flow.spec.js
View File

@@ -431,7 +431,7 @@ describe('when parsing ',function(){
expect(edges[0].type).toBe('arrow');
});
describe("it should handle interaction, ",function(){
describe('it should handle interaction, ',function(){
it('it should be possible to use click to a callback',function(){
spyOn(graph,'setClickEvent');
@@ -474,7 +474,7 @@ describe('when parsing ',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(){
var res = flow.parser.parse('graph TD;A--x|textNoSpace|B;');
@@ -659,7 +659,7 @@ describe('when parsing ',function(){
});
});
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 () {
var res = flow.parser.parse('graph TD;A-->B;');
@@ -715,7 +715,7 @@ describe('when parsing ',function(){
});
});
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(){
var res = flow.parser.parse('graph TD;A-- textNoSpace --xB;');
@@ -818,15 +818,15 @@ describe('when parsing ',function(){
expect(edges[0].text).toBe('text including graph space and v');
});
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');
//
//});
});
@@ -947,7 +947,7 @@ describe('when parsing ',function(){
expect(edges[0].text).toBe(',.?!+-*');
});
describe("it should handle text in vertices, ",function(){
describe('it should handle text in vertices, ',function(){
it('it should handle space',function(){
var res = flow.parser.parse('graph TD;A-->C(Chimpansen hoppar);');
@@ -977,15 +977,15 @@ describe('when parsing ',function(){
expect(vert['C'].type).toBe('round');
expect(vert['C'].text).toBe('Chimpansen hoppar åäö <br> - ÅÄÖ');
});
xit('it should handle åäö, minus and space and br',function(){
var res = flow.parser.parse('graph TD; A[Object&#40;foo,bar&#41;]-->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&#40;foo,bar&#41;]-->B(Thing);');
});
//xit('it should handle åäö, minus and space and br',function(){
// var res = flow.parser.parse('graph TD; A[Object&#40;foo,bar&#41;]-->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&#40;foo,bar&#41;]-->B(Thing);');
//});
it('it should handle unicode chars',function(){
var res = flow.parser.parse('graph TD;A-->C(Начало);');

106
src/diagrams/gantt/ganttRenderer.js
View File

@@ -43,7 +43,7 @@ module.exports.draw = function (text, id) {
// Set height based on number of tasks
var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
elem.setAttribute('height', "100%");
elem.setAttribute('height', '100%');
// Set viewBox
elem.setAttribute('viewBox','0 0 '+w+' '+h);
var svg = d3.select('#' + id);
@@ -51,7 +51,7 @@ module.exports.draw = function (text, id) {
var dateFormat = d3.time.format("%Y-%m-%d");
var dateFormat = d3.time.format('%Y-%m-%d');
var startDate = d3.min(taskArray, function (d) {
return d.startTime;
@@ -90,10 +90,10 @@ module.exports.draw = function (text, id) {
}
var title = svg.append("text")
var title = 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');
@@ -106,7 +106,7 @@ module.exports.draw = function (text, id) {
var colorScale = d3.scale.linear()
.domain([0, categories.length])
.range(["#00B9FA", "#F95002"])
.range(['#00B9FA', '#F95002'])
.interpolate(d3.interpolateHcl);
makeGrid(sidePadding, topPadding, pageWidth, pageHeight);
@@ -119,19 +119,19 @@ module.exports.draw = function (text, id) {
function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h) {
var bigRects = svg.append("g")
.selectAll("rect")
var bigRects = 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 (d) {
return w - theSidePad / 2;
})
.attr("height", theGap)
.attr('height', theGap)
.attr('class', function (d) {
for (var i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
@@ -143,24 +143,24 @@ module.exports.draw = function (text, id) {
var rectangles = svg.append('g')
.selectAll("rect")
.selectAll('rect')
.data(theArray)
.enter();
var innerRects = rectangles.append("rect")
.attr("rx", 3)
.attr("ry", 3)
.attr("x", function (d) {
var innerRects = 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) {
var res = 'task ';
@@ -198,13 +198,13 @@ module.exports.draw = function (text, id) {
;
var rectText = rectangles.append("text")
var rectText = 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),
endX = timeScale(d.endTime),
textWidth = this.getBBox().width;
@@ -220,12 +220,12 @@ module.exports.draw = function (text, id) {
return (endX - startX) / 2 + startX + theSidePad;
}
})
.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),
endX = timeScale(d.endTime),
textWidth = this.getBBox().width;
@@ -275,37 +275,37 @@ module.exports.draw = function (text, id) {
function makeGrid(theSidePad, theTopPad, w, h) {
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;
}]];
var mid = [
// 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;
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();
}]
];
@@ -336,12 +336,12 @@ module.exports.draw = function (text, id) {
.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) {
@@ -352,16 +352,16 @@ module.exports.draw = function (text, id) {
numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered)];
}
var axisText = svg.append("g") //without doing this, impossible to put grid lines behind text
.selectAll("text")
var axisText = 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) {
for (var j = 0; j < i; j++) {
prevGap += numOccurances[i - 1][1];
@@ -389,11 +389,11 @@ module.exports.draw = function (text, id) {
var today = new Date();
var todayLine = todayG.append("line")
.attr("x1", timeScale(today) + theSidePad)
.attr("x2", timeScale(today) + theSidePad)
.attr("y1", conf.titleTopMargin)
.attr("y2", h-conf.titleTopMargin)
var todayLine = 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')
;
}

45
src/diagrams/sequenceDiagram/sequenceDiagram.spec.js
View File

@@ -10,6 +10,9 @@ var newD3;
var d3 = {
select:function(){
return new newD3();
},
selectAll:function(){
return new newD3();
}
};
//var sd = proxyquire('./sequenceRenderer', { './d3': d3 });
@@ -21,11 +24,11 @@ describe('when parsing a sequenceDiagram',function() {
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;
});
it('it should handle a sequenceDiagram defintion', function () {
@@ -336,11 +339,11 @@ describe('when checking the bounds in a sequenceDiagram',function() {
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;
conf = {
@@ -486,11 +489,13 @@ describe('when rendering a sequenceDiagram',function() {
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 = {
@@ -681,11 +686,11 @@ describe('when rendering a sequenceDiagram with actor mirror activated',function
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 = {

54
src/diagrams/sequenceDiagram/sequenceRenderer.js
View File

@@ -31,7 +31,7 @@ var conf = {
bottomMarginAdj:1
};
//var bb = getBBox("path");
//var bb = getBBox('path');
exports.bounds = {
data:{
startx:undefined,
@@ -150,7 +150,7 @@ var drawNote = function(elem, startx, verticalPos, msg){
var textHeight = textElem[0][0].getBBox().height;
if(textHeight > conf.width){
textElem.remove();
g = elem.append("g");
g = elem.append('g');
//textObj.x = textObj.x - conf.width;
//textElem = svgDraw.drawText(g,textObj, 2*conf.noteMargin);
@@ -177,14 +177,14 @@ var drawNote = function(elem, startx, verticalPos, msg){
* @param msg
*/
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);
var textWidth;
@@ -201,7 +201,7 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
var line;
if(startx===stopx){
line = g.append("path")
line = g.append('path')
.attr('d', 'M ' +startx+ ','+verticalPos+' C ' +(startx+60)+ ','+(verticalPos-10)+' ' +(startx+60)+ ',' +
(verticalPos+30)+' ' +startx+ ','+(verticalPos+20));
@@ -209,32 +209,32 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
var dx = Math.max(textWidth/2,100);
exports.bounds.insert(startx-dx, exports.bounds.getVerticalPos() -10, stopx+dx, exports.bounds.getVerticalPos());
}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());
}
//Make an SVG Container
//Draw the line
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
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(' + window.location.protocol+'//'+window.location.host+window.location.pathname + '#arrowhead)');
}
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(' + window.location.protocol+'//'+window.location.host+window.location.pathname + '#crosshead)');
}
};
@@ -387,12 +387,12 @@ module.exports.draw = function (text, id) {
var width = box.stopx-box.startx+2*conf.diagramMarginX;
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);
};

124
src/diagrams/sequenceDiagram/svgDraw.js
View File

@@ -3,18 +3,18 @@
*/
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);
}
return rectElem;
@@ -30,7 +30,7 @@ exports.drawText = function(elem, textData, width) {
textElem.style('text-anchor', textData.anchor);
textElem.attr('fill', textData.fill);
if (typeof textData.class !== 'undefined') {
textElem.attr("class", textData.class);
textElem.attr('class', textData.class);
}
/* textData.text.split(/<br\/?>/ig).forEach(function(rowText){
var span = textElem.append('tspan');
@@ -86,18 +86,18 @@ var actorCnt = -1;
*/
exports.drawActor = function(elem, left, verticalPos, description,conf){
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');
}
var rect = exports.getNoteRect();
@@ -111,11 +111,11 @@ exports.drawActor = function(elem, left, verticalPos, description,conf){
rect.ry = 3;
exports.drawRect(g, rect);
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)
;
};
@@ -127,15 +127,15 @@ exports.drawActor = function(elem, left, verticalPos, description,conf){
* @param description The text in the box
*/
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');
};
drawLoopLine(bounds.startx, bounds.starty, bounds.stopx , bounds.starty);
@@ -176,44 +176,44 @@ exports.drawLoop = function(elem,bounds,labelText, conf){
* Setup arrow head and define the marker. The result is appended to the svg.
*/
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
};
/**
* Setup arrow head and define the marker. The result is appended to the svg.
*/
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
};

14
src/logger.js
View File

@@ -48,13 +48,13 @@ Logger = (function() {
// 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;}
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+')';
var t = hh+':'+mm+':'+ss +' ('+ms+')';
return t;
}
@@ -67,7 +67,7 @@ Logger = (function() {
};
Logger.prototype.build_message = function(options) {
return "[" + formatTime(options.timestamp) + "] " + options.message;
return '[' + formatTime(options.timestamp) + '] ' + options.message;
};
return Logger;

6
src/mermaid.js
View File

@@ -76,7 +76,7 @@ var init = function () {
}
}
nodes = nodes === undefined ? document.querySelectorAll('.mermaid')
: typeof nodes === "string" ? document.querySelectorAll(nodes)
: typeof nodes === 'string' ? document.querySelectorAll(nodes)
: nodes instanceof Node ? [nodes]
/*! Last case - sequence config was passed pick next */
: nodes;
@@ -111,8 +111,8 @@ var init = function () {
var element = nodes[i];
/*! 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 {
continue;
}

12
src/mermaid.spec.js
View File

@@ -4,10 +4,11 @@
/**
* Created by knut on 14-11-23.
*/
var rewire = require("rewire");
var utils = require("./utils");
var mermaid = require("./mermaid");
var rewire = require('rewire');
var utils = require('./utils');
var mermaid = require('./mermaid');
var log = require('./logger').create();
console.log('here');
describe('when using mermaid and ',function() {
describe('when detecting chart type ',function() {
@@ -21,8 +22,9 @@ describe('when using mermaid and ',function() {
delete global.mermaid_config;
// and in the run-code inside some object
document = mock.getDocument();
global.document = mock.getDocument();
window = mock.getWindow();
});
it('should not start rendering with mermaid_config.startOnLoad set to false', function () {
@@ -88,7 +90,7 @@ describe('when using mermaid and ',function() {
var mock = new MockBrowser();
flow.parser.yy =graph;
graph.clear();
document = mock.getDocument();
global.document = mock.getDocument();
mermaid = rewire('./mermaid');
});
it('it should handle edges with text', function () {

12
src/mermaidAPI.js
View File

@@ -12,6 +12,7 @@
* somewhere in the page or something completely different.
*/
var graph = require('./diagrams/flowchart/graphDb');
var flow = require('./diagrams/flowchart/parser/flow');
var utils = require('./utils');
var flowRenderer = require('./diagrams/flowchart/flowRenderer');
@@ -29,7 +30,6 @@ var ganttDb = require('./diagrams/gantt/ganttDb');
var d3 = require('./d3');
var nextId = 0;
/**
* ## Configuration
* These are the default options which can be overridden with the initialization call as in the example below:
@@ -202,23 +202,23 @@ var config = {
axisFormatter: [
// 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();
}]
]

42
src/utils.js
View File

@@ -23,25 +23,25 @@ var log = require('./logger').create();
module.exports.detectType = function(text,a){
text = text.replace(/^\s*%%.*\n/g,'\n');
if(text.match(/^\s*sequenceDiagram/)){
return "sequenceDiagram";
return 'sequenceDiagram';
}
if(text.match(/^\s*digraph/)) {
//log.debug('Detected dot syntax');
return "dotGraph";
return 'dotGraph';
}
if(text.match(/^\s*info/)) {
//log.debug('Detected info syntax');
return "info";
return 'info';
}
if(text.match(/^\s*gantt/)) {
//log.debug('Detected info syntax');
return "gantt";
return 'gantt';
}
return "graph";
return 'graph';
};
/**
@@ -51,7 +51,7 @@ module.exports.detectType = function(text,a){
* @param {object} Hash table of class definitions from the graph definition
*/
module.exports.cloneCssStyles = function(svg, classes){
var usedStyles = "";
var usedStyles = '';
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
// Avoid multiple inclusion on pages with multiple graphs
@@ -66,7 +66,7 @@ module.exports.cloneCssStyles = function(svg, classes){
var elems;
elems = svg.querySelectorAll(rule.selectorText);
if (elems.length > 0) {
usedStyles += rule.selectorText + " { " + rule.style.cssText + " }\n";
usedStyles += rule.selectorText + ' { ' + rule.style.cssText + ' }\n';
}
}
}
@@ -84,48 +84,48 @@ module.exports.cloneCssStyles = function(svg, classes){
}
}
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';
}
}
}
}
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);
}
};

14
src/utils.spec.js
View File

@@ -43,12 +43,12 @@ describe('when cloning CSS ',function() {
});
function stylesToArray(svg) {
var styleSheets = svg.getElementsByTagName("style");
var styleSheets = svg.getElementsByTagName('style');
expect(styleSheets.length).toBe(1);
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);
@@ -117,7 +117,7 @@ describe('when cloning CSS ',function() {
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-01');
utils.cloneCssStyles(svg, { "default": { "styles": ["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
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>');
@@ -160,16 +160,16 @@ describe('when cloning CSS ',function() {
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"] } });
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; }']);
});
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"] } });
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; }',