From 0a6201fb8a9028922e8a50e1e392747fa4c8a740 Mon Sep 17 00:00:00 2001
From: Constantin Angheloiu <constantin.angheloiu@gmail.com>
Date: Wed, 17 Jul 2024 13:42:21 +0300
Subject: [PATCH] Add animated class to the dotted links

The purpose of this PR is to add more clarity to a
diagram and to how the nodes of a diagram communicate

Eg.

```mermaid
graph LR
A:::animated -.-> B
```
---
 .../mermaid/src/diagrams/flowchart/flowRenderer-v2.js |  5 ++++-
 packages/mermaid/src/diagrams/flowchart/styles.ts     | 11 ++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 0e963c8ccbe..3d84bfa2716 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -265,6 +265,7 @@ export const addEdges = async function (edges, g, diagObj) {
 
     let style = '';
     let labelStyle = '';
+    let linkAnimatedDashClass = '';
 
     switch (edge.stroke) {
       case 'normal':
@@ -282,6 +283,7 @@ export const addEdges = async function (edges, g, diagObj) {
         edgeData.thickness = 'normal';
         edgeData.pattern = 'dotted';
         edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
+        linkAnimatedDashClass = g.node(edge.start).class;
         break;
       case 'thick':
         edgeData.thickness = 'thick';
@@ -329,7 +331,8 @@ export const addEdges = async function (edges, g, diagObj) {
     edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
 
     edgeData.id = linkId;
-    edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
+    edgeData.classes =
+      'flowchart-link ' + linkAnimatedDashClass + linkNameStart + ' ' + linkNameEnd;
 
     // Add the edge to the graph
     g.setEdge(edge.start, edge.end, edgeData, cnt);
diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
index b30c0b9bc7c..44b382277e3 100644
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -106,7 +106,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
   /* For html labels only */
   .labelBkg {
     background-color: ${fade(options.edgeLabelBackground, 0.5)};
-    // background-color: 
+    // background-color:
   }
 
   .cluster rect {
@@ -145,6 +145,15 @@ const getStyles = (options: FlowChartStyleOptions) =>
     font-size: 18px;
     fill: ${options.textColor};
   }
+
+  .animated {
+    animation: animate-dash-line 5s linear infinite;
+  }
+
+  @keyframes animate-dash-line {
+    0% { stroke-dashoffset: 3; }
+    100% { stroke-dashoffset: -100; }
+  }
 `;
 
 export default getStyles;