diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index f18e99abf..6709b557c 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -893,6 +893,17 @@ describe('Sequence diagram', () => { } ); }); + + it('should handle bidirectional arrows with autonumber', () => { + imgSnapshotTest(` + sequenceDiagram + autonumber + participant A + participant B + A<<->>B: This is a bidirectional message + A->B: This is a normal message`); + }); + it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => { //Be aware that the syntax for "properties" is likely to be changed. imgSnapshotTest( diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index cfba92b79..2c0d898ca 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -476,7 +476,29 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO // add node number if (sequenceVisible || conf.showSequenceNumbers) { - line.attr('marker-start', 'url(' + url + '#sequencenumber)'); + const isBidirectional = + type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID || + type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED; + + if (isBidirectional) { + const SEQUENCE_NUMBER_RADIUS = 6; + + if (startx < stopx) { + line.attr('x1', startx + 2 * SEQUENCE_NUMBER_RADIUS); + } else { + line.attr('x1', startx + SEQUENCE_NUMBER_RADIUS); + } + } + + diagram + .append('line') + .attr('x1', startx) + .attr('y1', lineStartY) + .attr('x2', startx) + .attr('y2', lineStartY) + .attr('stroke-width', 0) + .attr('marker-start', 'url(' + url + '#sequencenumber)'); + diagram .append('text') .attr('x', startx)