From ce9bdcc53f18603fcb6d7c4e53a977fed6bf11cc Mon Sep 17 00:00:00 2001
From: Zihua Li <i@zihua.li>
Date: Mon, 29 May 2023 21:00:37 +0800
Subject: [PATCH 1/2] Fix exceptions for empty lines

---
 cypress/integration/rendering/sequencediagram.spec.js | 10 ++++++++++
 packages/mermaid/src/utils.ts                         |  3 +++
 2 files changed, 13 insertions(+)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index e5459637bf..8ab21315fe 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -88,6 +88,16 @@ context('Sequence diagram', () => {
       {}
     );
   });
+  it('should handle empty lines', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      Alice->>John: Hello John<br/>
+      John-->>Alice: Great!
+    `,
+      {}
+    );
+  });
   it('should handle line breaks and wrap annotations', () => {
     imgSnapshotTest(
       `
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 6f824062d6..3f70b2a7cc 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -764,6 +764,9 @@ export const calculateTextDimensions: (
       let cheight = 0;
       const dim = { width: 0, height: 0, lineHeight: 0 };
       for (const line of lines) {
+        if (!line) {
+          continue;
+        }
         const textObj = getTextObj();
         textObj.text = line;
         const textElem = drawSimpleText(g, textObj)

From 2a6603b33a4f7527fb3b84b3650b091269ef91a0 Mon Sep 17 00:00:00 2001
From: Zihua Li <i@zihua.li>
Date: Sun, 4 Jun 2023 16:24:41 +0800
Subject: [PATCH 2/2] Render empty lines correctly

---
 cypress/integration/rendering/sequencediagram.spec.js | 2 +-
 packages/mermaid/src/diagrams/sequence/svgDraw.js     | 7 ++++---
 packages/mermaid/src/utils.ts                         | 7 +++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 8ab21315fe..185cc4133a 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -93,7 +93,7 @@ context('Sequence diagram', () => {
       `
       sequenceDiagram
       Alice->>John: Hello John<br/>
-      John-->>Alice: Great!
+      John-->>Alice: Great<br/><br/>day!
     `,
       {}
     );
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index a8feea2a1a..a3f7514f61 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1,7 +1,7 @@
 import common from '../common/common.js';
 import * as svgDrawCommon from '../common/svgDrawCommon';
 import { addFunction } from '../../interactionDb.js';
-import { parseFontSize } from '../../utils.js';
+import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {
@@ -224,15 +224,16 @@ export const drawText = function (elem, textData) {
       textElem.attr('dy', dy);
     }
 
+    const text = line || ZERO_WIDTH_SPACE;
     if (textData.tspan) {
       const span = textElem.append('tspan');
       span.attr('x', textData.x);
       if (textData.fill !== undefined) {
         span.attr('fill', textData.fill);
       }
-      span.text(line);
+      span.text(text);
     } else {
-      textElem.text(line);
+      textElem.text(text);
     }
     if (
       textData.valign !== undefined &&
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 3f70b2a7cc..e48b49fcda 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -32,6 +32,8 @@ import assignWithDepth from './assignWithDepth.js';
 import { MermaidConfig } from './config.type.js';
 import memoize from 'lodash-es/memoize.js';
 
+export const ZERO_WIDTH_SPACE = '\u200b';
+
 // Effectively an enum of the supported curve types, accessible by name
 const d3CurveTypes = {
   curveBasis: curveBasis,
@@ -764,11 +766,8 @@ export const calculateTextDimensions: (
       let cheight = 0;
       const dim = { width: 0, height: 0, lineHeight: 0 };
       for (const line of lines) {
-        if (!line) {
-          continue;
-        }
         const textObj = getTextObj();
-        textObj.text = line;
+        textObj.text = line || ZERO_WIDTH_SPACE;
         const textElem = drawSimpleText(g, textObj)
           .style('font-size', _fontSizePx)
           .style('font-weight', fontWeight)