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

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);

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;