From e6fb4a84da34a03e8a95e21d5f7d61036f650ad7 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Mon, 11 Aug 2025 16:32:03 +0530
Subject: [PATCH] code refactor

---
 .changeset/brave-memes-flash.md                    |  2 +-
 .../src/rendering-util/rendering-elements/edges.js | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/.changeset/brave-memes-flash.md b/.changeset/brave-memes-flash.md
index f127dd97e..720cd7202 100644
--- a/.changeset/brave-memes-flash.md
+++ b/.changeset/brave-memes-flash.md
@@ -2,4 +2,4 @@
 'mermaid': patch
 ---
 
-Fix: Support edge animation in hand drawn look
+fix: Support edge animation in hand drawn look
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index f3b029d5e..77947a114 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -567,10 +567,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
 
   let animationClass = '';
   if (edge.animate) {
-    animationClass = ' edge-animation-fast';
+    animationClass = 'edge-animation-fast';
   }
   if (edge.animation) {
-    animationClass = ' edge-animation-' + edge.animation;
+    animationClass = 'edge-animation-' + edge.animation;
   }
 
   if (edge.look === 'handDrawn') {
@@ -589,7 +589,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
       .attr('id', edge.id)
       .attr(
         'class',
-        ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
+        ' ' +
+          strokeClasses +
+          (edge.classes ? ' ' + edge.classes : '') +
+          (animationClass ? ' ' + animationClass : '')
       )
       .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
     let d = svgPath.attr('d');
@@ -606,7 +609,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
       .attr('id', edge.id)
       .attr(
         'class',
-        ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
+        ' ' +
+          strokeClasses +
+          (edge.classes ? ' ' + edge.classes : '') +
+          (animationClass ? ' ' + animationClass : '')
       )
       .attr('style', pathStyle);
     strokeColor = pathStyle.match(/stroke:([^;]+)/)?.[1];