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
```

packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js

@@ -265,6 +265,9 @@ 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 ? 'animated' : '';
 
     switch (edge.stroke) {
       case 'normal':
@@ -329,7 +332,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);

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;