Support Multi-line Actor Descriptions

- Add support for <br/> delimiter in actor descriptions.
- Add actorFontFamily and actorFontSize options to sequence diagram.
- Change default actor description font from times to sans.

Fix mermaid-js#384 mermaid-js#702 mermaid-js#755

Author: watsoncj

dist/index.html

@@ -238,6 +238,9 @@
 
   <div class="mermaid">
 sequenceDiagram
+participant Alice
+participant Bob
+participant John as John<br/>Second Line
 Alice ->> Bob: Hello Bob, how are you?
 Bob-->>John: How about you John?
 Bob--x Alice: I am good thanks!

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,

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(/<br\/?>/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)
   }