diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md index 7b7b68e06..ff25fd2f1 100644 --- a/docs/mermaidAPI.md +++ b/docs/mermaidAPI.md @@ -174,6 +174,14 @@ margin around notes. Space between messages. **Default value 35**. +### messageAlign + +Multiline message alignment. Possible values are: + +- left +- center **default** +- right + ### mirrorActors mirror actors under diagram. diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 68482a63e..96f99d9c2 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -24,6 +24,8 @@ const conf = { noteMargin: 10, // Space between messages messageMargin: 35, + // Multiline message alignment + messageAlign: 'center', // mirror actors under diagram mirrorActors: false, // Depending on css styling this might need adjustment @@ -230,24 +232,38 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde const g = elem.append('g'); const txtCenter = startx + (stopx - startx) / 2; - let textElem; + let textElems = []; let counterBreaklines = 0; let breaklineOffset = 17; const breaklines = msg.message.split(//gi); for (const breakline of breaklines) { - textElem = g - .append('text') // text label for the x axis - .attr('x', txtCenter) - .attr('y', verticalPos - 7 + counterBreaklines * breaklineOffset) - .style('text-anchor', 'middle') - .attr('class', 'messageText') - .text(breakline.trim()); + textElems.push( + g + .append('text') // text label for the x axis + .attr('x', txtCenter) + .attr('y', verticalPos - 7 + counterBreaklines * breaklineOffset) + .style('text-anchor', 'middle') + .attr('class', 'messageText') + .text(breakline.trim()) + ); counterBreaklines++; } const offsetLineCounter = counterBreaklines - 1; const totalOffset = offsetLineCounter * breaklineOffset; - let textWidth = (textElem._groups || textElem)[0][0].getBBox().width; + let textWidths = textElems.map(function(textElem) { + return (textElem._groups || textElem)[0][0].getBBox().width; + }); + let textWidth = Math.max(...textWidths); + for (const textElem of textElems) { + if (conf.messageAlign === 'left') { + textElem.attr('x', txtCenter - textWidth / 2).style('text-anchor', 'start'); + } else if (conf.messageAlign === 'right') { + textElem.attr('x', txtCenter + textWidth / 2).style('text-anchor', 'end'); + } + } + + bounds.bumpVerticalPos(totalOffset); let line; if (startx === stopx) { @@ -295,9 +311,9 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde } else { line = g.append('line'); line.attr('x1', startx); - line.attr('y1', verticalPos); + line.attr('y1', verticalPos + totalOffset); line.attr('x2', stopx); - line.attr('y2', verticalPos); + line.attr('y2', verticalPos + totalOffset); bounds.insert( startx, bounds.getVerticalPos() - 10 + totalOffset, diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index a9e0f2f79..2b51f21a1 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -229,6 +229,14 @@ const config = { */ messageMargin: 35, + /** + * Multiline message alignment. Possible values are: + * * left + * * center **default** + * * right + */ + messageAlign: 'center', + /** * mirror actors under diagram. * **Default value true**. @@ -807,6 +815,7 @@ export default mermaidAPI; * boxTextMargin:5, * noteMargin:10, * messageMargin:35, + * messageAlign:'center', * mirrorActors:true, * bottomMarginAdj:1, * useMaxWidth:true,