From d409da2201318f347969420f85480fe896ba5d03 Mon Sep 17 00:00:00 2001
From: Raphael Medaer <raphael.medaer@allocloud.com>
Date: Tue, 24 Mar 2020 18:24:43 +0100
Subject: [PATCH 1/2] Multiline sequence message

This commit allow user to write multiline messages in sequence diagram.
For instance:

```
sequenceDiagram
	Alice->>+John: Hello John<br>How are you?<br>I mean...<br>Are you OK today?
	Alice->>+John: John, can you hear me?
	John-->>-Alice: Hi Alice, I can hear you!<br>Keep calm!<br>I'm there.
	John-->>-Alice: And I feel great!
```
---
 src/diagrams/sequence/sequenceRenderer.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 68482a63e..b46f6873e 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -247,6 +247,8 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
   const offsetLineCounter = counterBreaklines - 1;
   const totalOffset = offsetLineCounter * breaklineOffset;
 
+  bounds.bumpVerticalPos(totalOffset);
+
   let textWidth = (textElem._groups || textElem)[0][0].getBBox().width;
 
   let line;
@@ -295,9 +297,9 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
   } else {
     line = g.append('line');
     line.attr('x1', startx);
-    line.attr('y1', verticalPos);
+    line.attr('y1', verticalPos + totalOffset);
     line.attr('x2', stopx);
-    line.attr('y2', verticalPos);
+    line.attr('y2', verticalPos + totalOffset);
     bounds.insert(
       startx,
       bounds.getVerticalPos() - 10 + totalOffset,

From cbdb2e6e6fa3d7fc7b761560c70ed983e8430330 Mon Sep 17 00:00:00 2001
From: Raphael Medaer <raphael.medaer@allocloud.com>
Date: Tue, 24 Mar 2020 22:14:19 +0100
Subject: [PATCH 2/2] Align left/center/right multiline messages

---
 docs/mermaidAPI.md                        |  8 ++++++
 src/diagrams/sequence/sequenceRenderer.js | 34 ++++++++++++++++-------
 src/mermaidAPI.js                         |  9 ++++++
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md
index 7b7b68e06..ff25fd2f1 100644
--- a/docs/mermaidAPI.md
+++ b/docs/mermaidAPI.md
@@ -174,6 +174,14 @@ margin around notes.
 Space between messages.
 **Default value 35**.
 
+### messageAlign
+
+Multiline message alignment. Possible values are:
+
+-   left
+-   center **default**
+-   right
+
 ### mirrorActors
 
 mirror actors under diagram.
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index b46f6873e..96f99d9c2 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -24,6 +24,8 @@ const conf = {
   noteMargin: 10,
   // Space between messages
   messageMargin: 35,
+  // Multiline message alignment
+  messageAlign: 'center',
   // mirror actors under diagram
   mirrorActors: false,
   // Depending on css styling this might need adjustment
@@ -230,26 +232,38 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
   const g = elem.append('g');
   const txtCenter = startx + (stopx - startx) / 2;
 
-  let textElem;
+  let textElems = [];
   let counterBreaklines = 0;
   let breaklineOffset = 17;
   const breaklines = msg.message.split(/<br\s*\/?>/gi);
   for (const breakline of breaklines) {
-    textElem = g
-      .append('text') // text label for the x axis
-      .attr('x', txtCenter)
-      .attr('y', verticalPos - 7 + counterBreaklines * breaklineOffset)
-      .style('text-anchor', 'middle')
-      .attr('class', 'messageText')
-      .text(breakline.trim());
+    textElems.push(
+      g
+        .append('text') // text label for the x axis
+        .attr('x', txtCenter)
+        .attr('y', verticalPos - 7 + counterBreaklines * breaklineOffset)
+        .style('text-anchor', 'middle')
+        .attr('class', 'messageText')
+        .text(breakline.trim())
+    );
     counterBreaklines++;
   }
   const offsetLineCounter = counterBreaklines - 1;
   const totalOffset = offsetLineCounter * breaklineOffset;
 
-  bounds.bumpVerticalPos(totalOffset);
+  let textWidths = textElems.map(function(textElem) {
+    return (textElem._groups || textElem)[0][0].getBBox().width;
+  });
+  let textWidth = Math.max(...textWidths);
+  for (const textElem of textElems) {
+    if (conf.messageAlign === 'left') {
+      textElem.attr('x', txtCenter - textWidth / 2).style('text-anchor', 'start');
+    } else if (conf.messageAlign === 'right') {
+      textElem.attr('x', txtCenter + textWidth / 2).style('text-anchor', 'end');
+    }
+  }
 
-  let textWidth = (textElem._groups || textElem)[0][0].getBBox().width;
+  bounds.bumpVerticalPos(totalOffset);
 
   let line;
   if (startx === stopx) {
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 10ead65cb..4a90f8134 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -229,6 +229,14 @@ const config = {
      */
     messageMargin: 35,
 
+    /**
+     * Multiline message alignment. Possible values are:
+     *   * left
+     *   * center **default**
+     *   * right
+     */
+    messageAlign: 'center',
+
     /**
      * mirror actors under diagram.
      * **Default value true**.
@@ -809,6 +817,7 @@ export default mermaidAPI;
  *       boxTextMargin:5,
  *       noteMargin:10,
  *       messageMargin:35,
+ *       messageAlign:'center',
  *       mirrorActors:true,
  *       bottomMarginAdj:1,
  *       useMaxWidth:true,