diff --git a/cypress/e2e/rendering/sequencediagram.spec.js b/cypress/e2e/rendering/sequencediagram.spec.js
index c110f05ada9..455d304db64 100644
--- a/cypress/e2e/rendering/sequencediagram.spec.js
+++ b/cypress/e2e/rendering/sequencediagram.spec.js
@@ -126,6 +126,17 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'left' } }
       );
     });
+    it('should render multi-line notes aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am left aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'left' } }
+      );
+    });
     it('should render notes aligned to the right when configured', () => {
       imgSnapshotTest(
         `
@@ -137,6 +148,37 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'right' } }
       );
     });
+    it('should render multi-line notes aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am right aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'right' } }
+      );
+    });
+    it.only('should render multi-line messages aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'left' } }
+      );
+    });
+    it.only('should render multi-line messages aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'right' } }
+      );
+    });
   });
   context('auth width scaling', () => {
     it('should render long actor descriptions', () => {
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index d83d9dc2bb3..c7666233269 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -230,7 +230,7 @@ const drawNote = function (elem, noteModel) {
   textObj.fontWeight = conf.noteFontWeight;
   textObj.anchor = conf.noteAlign;
   textObj.textMargin = conf.noteMargin;
-  textObj.valign = conf.noteAlign;
+  textObj.valign = 'center';
 
   let textElem = drawText(g, textObj);
 
@@ -342,7 +342,7 @@ const drawMessage = function (diagram, msgModel, lineStarty) {
   textObj.fontSize = conf.messageFontSize;
   textObj.fontWeight = conf.messageFontWeight;
   textObj.anchor = conf.messageAlign;
-  textObj.valign = conf.messageAlign;
+  textObj.valign = 'center';
   textObj.textMargin = conf.wrapPadding;
   textObj.tspan = false;
 
diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
index a00d10169f8..3d9a0bbf257 100644
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@@ -193,7 +193,7 @@ export const drawText = function (elem, textData) {
       case 'start':
         textData.x = Math.round(textData.x + textData.textMargin);
         textData.anchor = 'start';
-        textData.dominantBaseline = 'text-after-edge';
+        textData.dominantBaseline = 'middle';
         textData.alignmentBaseline = 'middle';
         break;
       case 'middle':
@@ -207,7 +207,7 @@ export const drawText = function (elem, textData) {
       case 'end':
         textData.x = Math.round(textData.x + textData.width - textData.textMargin);
         textData.anchor = 'end';
-        textData.dominantBaseline = 'text-before-edge';
+        textData.dominantBaseline = 'middle';
         textData.alignmentBaseline = 'middle';
         break;
     }