diff --git a/dist/index.html b/dist/index.html
index 7fe650751b..47bf945d57 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -238,6 +238,9 @@
sequenceDiagram
+participant Alice
+participant Bob
+participant John as John
Second Line
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index fcf41d28ea..f37238a13d 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -17,6 +17,8 @@ const conf = {
width: 150,
// Height of actor boxes
height: 65,
+ actorFontSize: 14,
+ actorFontFamily: '"Open-Sans", "sans-serif"',
// Margin around loop boxes
boxMargin: 10,
boxTextMargin: 5,
diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
index 29dbbafba5..71f527eca5 100644
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@@ -89,7 +89,7 @@ export const drawActor = function (elem, left, verticalPos, description, conf) {
drawRect(g, rect)
_drawTextCandidateFunc(conf)(description, g,
- rect.x, rect.y, rect.width, rect.height, { 'class': 'actor' })
+ rect.x, rect.y, rect.width, rect.height, { 'class': 'actor' }, conf)
}
export const anchorElement = function (elem) {
@@ -252,22 +252,30 @@ const _drawTextCandidateFunc = (function () {
_setTextAttrs(text, textAttrs)
}
- function byTspan (content, g, x, y, width, height, textAttrs) {
- const text = g.append('text')
- .attr('x', x + width / 2).attr('y', y)
- .style('text-anchor', 'middle')
- text.append('tspan')
- .attr('x', x + width / 2).attr('dy', '0')
- .text(content)
-
- text.attr('y', y + height / 2.0)
- .attr('dominant-baseline', 'central')
- .attr('alignment-baseline', 'central')
-
- _setTextAttrs(text, textAttrs)
+ function byTspan (content, g, x, y, width, height, textAttrs, conf) {
+ const { actorFontSize, actorFontFamily } = conf
+
+ const lines = content.split(/
/ig)
+ for (let i = 0; i < lines.length; i++) {
+ const dy = (i * actorFontSize) - (actorFontSize * (lines.length - 1) / 2)
+ const text = g.append('text')
+ .attr('x', x + width / 2).attr('y', y)
+ .style('text-anchor', 'middle')
+ .style('font-size', actorFontSize)
+ .style('font-family', actorFontFamily)
+ text.append('tspan')
+ .attr('x', x + width / 2).attr('dy', dy)
+ .text(lines[i])
+
+ text.attr('y', y + height / 2.0)
+ .attr('dominant-baseline', 'central')
+ .attr('alignment-baseline', 'central')
+
+ _setTextAttrs(text, textAttrs)
+ }
}
- function byFo (content, g, x, y, width, height, textAttrs) {
+ function byFo (content, g, x, y, width, height, textAttrs, conf) {
const s = g.append('switch')
const f = s.append('foreignObject')
.attr('x', x).attr('y', y)
@@ -280,7 +288,7 @@ const _drawTextCandidateFunc = (function () {
.style('text-align', 'center').style('vertical-align', 'middle')
.text(content)
- byTspan(content, s, x, y, width, height, textAttrs)
+ byTspan(content, s, x, y, width, height, textAttrs, conf)
_setTextAttrs(text, textAttrs)
}