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)