diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index e5459637b..185cc4133 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
+ John-->>Alice: Great
day!
+ `,
+ {}
+ );
+ });
it('should handle line breaks and wrap annotations', () => {
imgSnapshotTest(
`
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 6f824062d..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,
@@ -765,7 +767,7 @@ export const calculateTextDimensions: (
const dim = { width: 0, height: 0, lineHeight: 0 };
for (const line of lines) {
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)