From 84b10ac330a033a1767531dcfb9e13347b65a0e9 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

Adding `animate` class to a node, will add the
`animated` class to an egde ot type 'arroe-point'
having stroke 'dotted'

Eg.

```mermaid
graph LR
A:::animate -.-> B
```
---
 .../src/diagrams/flowchart/flowRenderer-v2.js        | 12 +++++++++++-
 packages/mermaid/src/diagrams/flowchart/styles.ts    | 11 ++++++++++-
 2 files changed, 21 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..bc6e20a98a8 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -265,6 +265,14 @@ export const addEdges = async function (edges, g, diagObj) {
 
     let style = '';
     let labelStyle = '';
+    let isAnimatedNode = g.node(edge.start).class.split(' ').includes('animate');
+    let linkAnimatedDashClass =
+      edge.stroke === 'dotted' &&
+      edge.type === 'arrow_point' &&
+      isAnimatedNode &&
+      linkNameEnd.includes('LE')
+        ? 'animated'
+        : '';
 
     switch (edge.stroke) {
       case 'normal':
@@ -329,7 +337,9 @@ 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].join(
+      ' '
+    );
 
     // 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..708d6b9c77b 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 {
+    from { stroke-dashoffset: 102; }
+    to { stroke-dashoffset: 0; }
+  }
 `;
 
 export default getStyles;