diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index fcf41d28ea..ea7b9480b6 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -218,9 +218,13 @@ const drawMessage = function (elem, startx, stopx, verticalPos, msg) { let line if (startx === stopx) { - line = g.append('path') - .attr('d', 'M ' + startx + ',' + verticalPos + ' C ' + (startx + 60) + ',' + (verticalPos - 10) + ' ' + (startx + 60) + ',' + - (verticalPos + 30) + ' ' + startx + ',' + (verticalPos + 20)) + if (conf.rightAngles) { + line = g.append('path').attr('d', `M ${startx},${verticalPos} H ${startx + (conf.width / 2)} V ${verticalPos + 25} H ${startx}`) + } else { + line = g.append('path') + .attr('d', 'M ' + startx + ',' + verticalPos + ' C ' + (startx + 60) + ',' + (verticalPos - 10) + ' ' + (startx + 60) + ',' + + (verticalPos + 30) + ' ' + startx + ',' + (verticalPos + 20)) + } bounds.bumpVerticalPos(30) const dx = Math.max(textWidth / 2, 100) diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index d40c336c42..6fcf4834df 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -153,7 +153,12 @@ const config = { * **useMaxWidth** - when this flag is set the height and width is set to 100% and is then scaling with the * available space if not the absolute space required is used */ - useMaxWidth: true + useMaxWidth: true, + + /** + * **rightAngles** - this will display arrows that start and begin at the same node as right angles, rather than a curve + */ + rightAngles: false }, /** ### gantt