diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 8ab21315f..185cc4133 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
- John-->>Alice: Great!
+ John-->>Alice: Great
day!
`,
{}
);
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index a8feea2a1..a3f7514f6 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 3f70b2a7c..e48b49fcd 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)