0&&(r+=o.selectorText+" { "+o.style.cssText+" }\n")}}}var c="",l="";for(var h in t)t.hasOwnProperty(h)&&"undefined"!=typeof h&&("default"===h?c=".node { "+t[h].styles.join("; ")+"; }\n":l+="."+h+" { "+t[h].styles.join("; ")+"; }\n");if(""!==r||""!==c||""!==l){var d=document.createElement("style");d.setAttribute("type","text/css"),d.setAttribute("title","mermaid-svg-internal-css"),d.innerHTML="/* */\n",e.insertBefore(d,e.firstChild)}}},{}]},{},[111]);
\ No newline at end of file
diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js
index 079ee070a..141e50135 100644
--- a/src/diagrams/sequenceDiagram/sequenceRenderer.js
+++ b/src/diagrams/sequenceDiagram/sequenceRenderer.js
@@ -119,6 +119,7 @@ var drawNote = function(elem, startx, verticalPos, msg){
rect.x = startx;
rect.y = verticalPos;
rect.width = conf.width;
+ rect.class = 'note';
var g = elem.append("g");
var rectElem = svgDraw.drawRect(g, rect);
@@ -129,6 +130,7 @@ var drawNote = function(elem, startx, verticalPos, msg){
textObj.textMargin = conf.noteMargin;
textObj.dy = '1em';
textObj.text = msg.message;
+ textObj.class = 'noteText';
var textElem = svgDraw.drawText(g,textObj);
@@ -154,7 +156,8 @@ exports.drawLoop = function(elem,bounds){
.attr("x2", stopx )
.attr("y2", stopy )
.attr("stroke-width", 2)
- .attr("stroke", "#339933");
+ .attr("stroke", "#526e52")
+ .attr('class','loopLine');
};
drawLoopLine(bounds.startx, bounds.starty, bounds.stopx , bounds.starty);
drawLoopLine(bounds.stopx , bounds.starty, bounds.stopx , bounds.stopy );
@@ -166,6 +169,8 @@ exports.drawLoop = function(elem,bounds){
txt.x = bounds.startx;
txt.y = bounds.starty;
txt.labelMargin = 1.5 * conf.boxMargin;
+ txt.class = 'labelText';
+ txt.fill = 'white';
svgDraw.drawLabel(g,txt);
@@ -174,6 +179,7 @@ exports.drawLoop = function(elem,bounds){
txt.x = bounds.startx + (bounds.stopx - bounds.startx)/2;
txt.y = bounds.starty + 1.5 * conf.boxMargin;
txt.anchor = 'middle';
+ txt.class = 'loopText';
svgDraw.drawText(g,txt);
};
@@ -209,49 +215,38 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
//Make an SVG Container
//Draw the line
- if(msg.type !== 2) {
- if (msg.type === 1) {
- g.append("line")
- .attr("x1", startx)
- .attr("y1", verticalPos)
- .attr("x2", stopx)
- .attr("y2", verticalPos)
- .attr("stroke-width", 2)
- .attr("stroke", "black")
- .style("stroke-dasharray", ("3, 3"))
- .attr("class", "link")
- .attr("marker-end", "url(#arrowhead)");
- //.attr("d", diagonal);
- }
- else {
- g.append("line")
- .attr("x1", startx)
- .attr("y1", verticalPos)
- .attr("x2", stopx)
- .attr("y2", verticalPos)
- .attr("stroke-width", 2)
- .attr("stroke", "black")
- .attr("class", "link")
- .attr("marker-end", "url(#arrowhead)");
- }
-
- g.append("text") // text label for the x axis
- .attr("x", txtCenter)
- .attr("y", verticalPos - 10)
- .style("text-anchor", "middle")
- .text(msg.message);
- exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx, exports.bounds.getVerticalPos());
+ if (msg.type === 1) {
+ g.append("line")
+ .attr("x1", startx)
+ .attr("y1", verticalPos)
+ .attr("x2", stopx)
+ .attr("y2", verticalPos)
+ .attr("stroke-width", 2)
+ .attr("stroke", "black")
+ .style("stroke-dasharray", ("3, 3"))
+ .attr("class", "messageLine1")
+ .attr("marker-end", "url(#arrowhead)");
+ //.attr("d", diagonal);
}
- else{
- var textElem = g.append("text")
- .attr("x", txtCenter)
- .attr("y", exports.bounds.getVerticalPos() - 10)
- .style("text-anchor", "middle")
- .text(msg.message);
- var box = textElem[0][0].getBBox();
-
- exports.bounds.insert(box.x, exports.bounds.getVerticalPos() -10, box.x+box.width, exports.bounds.getVerticalPos()-10 + box.height);
+ else {
+ g.append("line")
+ .attr("x1", startx)
+ .attr("y1", verticalPos)
+ .attr("x2", stopx)
+ .attr("y2", verticalPos)
+ .attr("stroke-width", 2)
+ .attr("stroke", "black")
+ .attr("class", "messageLine0")
+ .attr("marker-end", "url(#arrowhead)");
}
+
+ 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);
+ exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx, exports.bounds.getVerticalPos());
};
/**
@@ -268,6 +263,7 @@ var drawActor = function(elem, left,description){
.attr("y1", 5)
.attr("x2", center)
.attr("y2", 2000)
+ .attr("class", 'actor-line')
.attr("stroke-width", '0.5px')
.attr("stroke", '#999');
@@ -278,11 +274,13 @@ var drawActor = function(elem, left,description){
.attr("stroke", '#666')
.attr("width", conf.width)
.attr("height", conf.height)
+ .attr("class", 'actor')
.attr("rx", 3)
.attr("ry", 3);
g.append("text") // text label for the x axis
.attr("x", center)
.attr("y", (conf.height/2)+5)
+ .attr('class','actor')
.style("text-anchor", "middle")
.text(description)
;
diff --git a/src/diagrams/sequenceDiagram/svgDraw.js b/src/diagrams/sequenceDiagram/svgDraw.js
index 545306143..b8bc95403 100644
--- a/src/diagrams/sequenceDiagram/svgDraw.js
+++ b/src/diagrams/sequenceDiagram/svgDraw.js
@@ -12,6 +12,10 @@ exports.drawRect = function(elem , rectData){
rectElem.attr("rx", rectData.rx);
rectElem.attr("ry", rectData.ry);
+ if(typeof rectData.class !== 'undefined'){
+ rectElem.attr("class", rectData.class);
+ }
+
return rectElem;
};
@@ -20,7 +24,7 @@ exports.drawText = function(elem , textData){
textElem.attr('x', textData.x);
textElem.attr('y', textData.y);
textElem.style('text-anchor', textData.anchor);
- textElem.style('fill', textData.fill);
+ textElem.attr('fill', textData.fill);
textData.text.split('
').forEach(function(rowText){
var span = textElem.append('tspan');
@@ -29,6 +33,10 @@ exports.drawText = function(elem , textData){
span.text(rowText);
});
+ if(typeof textData.class !== 'undefined'){
+ textElem.attr("class", textData.class);
+ }
+
return textElem;
};
@@ -38,8 +46,9 @@ exports.drawLabel = function(elem , txtObject){
rectData.y = txtObject.y;
rectData.width = 50;
rectData.height = 20;
- rectData.fill = '#339933';
+ rectData.fill = '#526e52';
rectData.stroke = 'none';
+ rectData.class = 'labelBox';
//rectData.color = 'white';
var label = exports.drawRect(elem, rectData);
@@ -54,7 +63,7 @@ exports.drawLabel = function(elem , txtObject){
exports.getTextObj = function(){
- var rect = {
+ var txt = {
x: 0,
y: 0,
'fill':'black',
@@ -66,7 +75,7 @@ exports.getTextObj = function(){
rx: 0,
ry: 0
};
- return rect;
+ return txt;
};
exports.getNoteRect = function(){
diff --git a/src/main.js b/src/main.js
index 223ce565c..60c7c456a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,9 +64,8 @@ var init = function () {
break;
case 'sequenceDiagram':
seq.draw(txt,id);
- //classes = flowRenderer.getClasses(txt, true);
// TODO - Get styles for sequence diagram
- utils.cloneCssStyles(element.firstChild, classes);
+ utils.cloneCssStyles(element.firstChild, []);
break;
}
diff --git a/src/utils.js b/src/utils.js
index 37cce8abc..e47759c6c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -37,14 +37,16 @@ module.exports.cloneCssStyles = function(svg, classes){
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
// Avoid multiple inclusion on pages with multiple graphs
- if (sheets[i].title != 'mermaid-svg-internal-css') {
+ if (sheets[i].title !== 'mermaid-svg-internal-css') {
var rules = sheets[i].cssRules;
- for (var j = 0; j < rules.length; j++) {
- var rule = rules[j];
- if (typeof(rule.style) != "undefined") {
- var elems = svg.querySelectorAll(rule.selectorText);
- if (elems.length > 0) {
- usedStyles += rule.selectorText + " { " + rule.style.cssText + " }\n";
+ if(rules !== null) {
+ for (var j = 0; j < rules.length; j++) {
+ var rule = rules[j];
+ if (typeof(rule.style) !== 'undefined') {
+ var elems = svg.querySelectorAll(rule.selectorText);
+ if (elems.length > 0) {
+ usedStyles += rule.selectorText + " { " + rule.style.cssText + " }\n";
+ }
}
}
}
diff --git a/test/web.html b/test/web.html
index 9bf860ec7..d99107ed8 100644
--- a/test/web.html
+++ b/test/web.html
@@ -28,6 +28,7 @@
%% Comments after double percent signs
di-->ro2(Rounded square shape);
e((Inner circle))-->f(,.?!+-*ز);
+ A[Object]-->B(Thing);
style e red;
@@ -41,26 +42,55 @@
%% Comments after double percent signs
e((Inner / circle))-->f(,.?!+-*ز);
cyr[Cyrillic]-->cyr2((Circle shape Начало));
+ A[Object foo,bar]-->B(Thing);
style e red;
+
+ graph LR;
+ A(Central Message Router);
+ B(R TD);
+ C(XYZ);
+ D(S Writer);
+ A-->|R TD Router|B;
+ B-->C;
+ C-->|XYZ Router|D;
+
Sequence diagrams (experimental)
sequenceDiagram
+ participant John the Long
Alice->Bob: Hello Bob, how are you?
- Note right of Bob: Bob thinks
+ Note left of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Bob-->John the Long: How about you John?
+ Note left of John the Long: Bob thinks
Bob-->Alice: Checking with John...
+
+ loop Multiple status checks
+ loog Naging
Alice->John the Long: Yes... John, how are you?
+ end
John the Long-->Alice: Better then you!
+ end
sequenceDiagram
+ participant Alice
+ Note left of Alice: Bob thinks about
things
to think about
+
+
+ sequenceDiagram
+ participant Alice
+ participant Bob
+ participant John the Long
Alice->Bob: Hello Bob, how are you?
- Note left of Bob: Bob thinks about
things
to think about
+ Note left of Alice: Bob thinks about
things
to think about
Bob-->Alice: I am good thanks!
+ loop Multiple status checks
Bob-->John the Long: How about you John?
+ Note right of John the Long: Bob thinks
+ end
Bob-->Alice: Checking with John...
Alice->John the Long: Yes... John, how are you?