From 1988d2422783d73b793a208c1656d45b82c581d1 Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Fri, 22 Aug 2025 16:46:49 +0530
Subject: [PATCH] fix: fixed reverse arrows placing for autonumber

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
---
 .../src/diagrams/sequence/sequenceRenderer.ts | 31 ++++++++++++++-----
 .../mermaid/src/diagrams/sequence/svgDraw.js  |  4 +--
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index c13a15fef..c344968a1 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -307,14 +307,15 @@ const drawCentralConnection = function (
   };
 
   if (msg.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION) {
-    const cx = isArrowToRight ? stopx + 8 : stopx - 8;
+    const cx = isArrowToRight ? stopx + 5 : stopx - 8;
+    drawCircle(cx);
+  } else if (msg.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_REVERSE) {
+    const cx = isArrowToRight ? startx - 5 : stopx + 8;
     drawCircle(cx);
   } else if (msg.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_DUAL) {
-    const offset = isArrowToRight ? 8 : -8;
+    const offset = isArrowToRight ? 5 : -5;
     drawCircle(stopx + offset);
-    drawCircle(startx - 2.75); // second circle (near start)
-  } else {
-    drawCircle(startx - 2.75);
+    drawCircle(startx - offset);
   }
 };
 
@@ -573,7 +574,18 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
       type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID ||
       type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED;
 
-    if (isBidirectional) {
+    const isReverseArrowType =
+      type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE ||
+      type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED ||
+      type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE ||
+      type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED ||
+      type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE ||
+      type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED ||
+      type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE ||
+      type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED;
+
+    let x = 0;
+    if (isBidirectional || isReverseArrowType) {
       const SEQUENCE_NUMBER_RADIUS = 6;
 
       if (startx < stopx) {
@@ -581,6 +593,7 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
       } else {
         line.attr('x1', startx + SEQUENCE_NUMBER_RADIUS);
       }
+      x = 3.5;
     }
 
     diagram
@@ -590,7 +603,8 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
       .attr('x2', startx)
       .attr('y2', lineStartY)
       .attr('stroke-width', 0)
-      .attr('marker-start', 'url(' + url + '#sequencenumber)');
+      .attr('marker-start', 'url(' + url + '#sequencenumber)')
+      .attr('transform', `translate(-${x}, 0)`);
 
     diagram
       .append('text')
@@ -600,7 +614,8 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
       .attr('font-size', '12px')
       .attr('text-anchor', 'middle')
       .attr('class', 'sequenceNumber')
-      .text(sequenceIndex);
+      .text(sequenceIndex)
+      .attr('transform', `translate(-${x}, 0)`);
   }
 };
 
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 57df19165..9a7c1bf54 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1142,7 +1142,7 @@ export const insertStickTopArrowHead = function (elem) {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', ' stickTopArrowHead')
+    .attr('id', 'stickTopArrowHead')
     .attr('refX', 7.5)
     .attr('refY', 7)
     .attr('markerUnits', 'userSpaceOnUse')
@@ -1160,7 +1160,7 @@ export const insertStickBottomArrowHead = function (elem) {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', ' stickBottomArrowHead')
+    .attr('id', 'stickBottomArrowHead')
     .attr('refX', 7.5)
     .attr('refY', 0)
     .attr('markerUnits', 'userSpaceOnUse')