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)