From 22d0f40750b18c24e599be6bcf15c431de253f3a 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 `producer`/`consumer` pair classes to nodes,
will add the `animated` class to an egde ot type 'arroe-point'
having stroke 'dotted'

Eg.

```mermaid
graph LR
A:::producer -.-> B:::consumer -.-> A -.-> C
```
---
 .../src/diagrams/flowchart/flowRenderer-v2.js      | 14 +++++++++++++-
 packages/mermaid/src/diagrams/flowchart/styles.ts  | 10 +++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 0e963c8ccb..b0c520f39d 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -265,6 +265,16 @@ export const addEdges = async function (edges, g, diagObj) {
 
     let style = '';
     let labelStyle = '';
+    let isAnimatedProducerNode = g.node(edge.start).class.split(' ').includes('producer');
+    let isAnimatedConsumerNode = g.node(edge.end).class.split(' ').includes('consumer');
+
+    let linkAnimatedDashClass =
+      edge.stroke === 'dotted' &&
+      edge.type === 'arrow_point' &&
+      isAnimatedProducerNode &&
+      isAnimatedConsumerNode
+        ? 'animated'
+        : '';
 
     switch (edge.stroke) {
       case 'normal':
@@ -329,7 +339,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 b30c0b9bc7..fcce1644c2 100644
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -106,7 +106,6 @@ const getStyles = (options: FlowChartStyleOptions) =>
   /* For html labels only */
   .labelBkg {
     background-color: ${fade(options.edgeLabelBackground, 0.5)};
-    // background-color: 
   }
 
   .cluster rect {
@@ -145,6 +144,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;