supporting other mermaid types than graph

[rishigoutam]

Hi, thank you for creating this!

I was trying to animate a mermaid flowchart and noticed it did not work as expected. A simple workaround was to write the flowchart as a graph. Hence, this might be a non-issue, but there might be others looking to animate various mermaid chart types so I wanted to post.

I wrote my markdown like so. Note that I used CAPS for the graph nodes--this is because lower case letters are cut off by the CSS, but that is a separate issue.

```mermaid
graph LR
    classDef start stroke-dasharray: 5 5
    classDef input stroke:#FFF,stroke-width:1px, fill:darkslateblue;
    classDef output stroke:#FFF,stroke-width:2px, fill:teal;

    START([START]):::start-->MARKDOWN[/"🔤 MARKDOWN"/]:::input-->PYPANDOC[["🐍 PANDOC"]]-->HTML[/"🙌 HTML"/]:::output
    PYPANDOC-->PDF[/"✨ PDF"/]:::output
    PYPANDOC-->DOCX[/"📄 DOCX"/]:::output
```

```mermaid-animation
START 
START-->MARKDOWN MARKDOWN
MARKDOWN-->PYPANDOC PYPANDOC
PYPANDOC-->HTML HTML
PYPANDOC-->PDF PDF
PYPANDOC-->DOCX DOCX
```

By adding some additional reveal-md slides, we can render the following animation

Note that the GIF quality is low. The animation is smoother locally

[maiermic]

I was trying to animate a mermaid flowchart and noticed it did not work as expected.

@rishigoutam Thank you for creating this issue. Please add the code of the flowchart that you tried to animate. What did you expect? What was the actual behaviour? Are there any errors logged in the console?

[rishigoutam]

I expected the animation to be the same as with the graph. However, it looks like there is an error with the first animation step and mermaid-animation is not parsed in the same manner as with the graph. Console logs below

Output is these two slides/frames:

Here is the stripped down flowchart code for repro (I believe it is identical in structure to the above example. Only graph has been replaced with flowchart):

```mermaid
flowchart LR
    START-->MARKDOWN-->PYPANDOC-->HTML
    PYPANDOC-->PDF
    PYPANDOC-->DOCX
```

```mermaid-animation
START 
START-->MARKDOWN MARKDOWN
MARKDOWN-->PYPANDOC PYPANDOC
PYPANDOC-->HTML HTML
PYPANDOC-->PDF PDF
PYPANDOC-->DOCX DOCX
```

Console logs:

Uncaught Error: Could not find edgePath: start=START end=MARKDOWN
    at findEdgePathElement (reveal-mermaid-animation.js:34:13)
    at attachAnimationsFromCodeBlockDefinition (reveal-mermaid-animation.js:141:13)
    at EventTarget.attachAnimations (reveal-mermaid-animation.js:178:7)
    at reveal-mermaid.js:36:21
    at HTMLCollection.forEach ()
    at asyncMermaidRender (reveal-mermaid.js:12:10)
    at HTMLDivElement. (reveal-mermaid.js:8:43)
    at Q (reveal.js:609:10)
    at reveal.js:209:4

[rishigoutam]

A simpler example shows the exact same issue

```mermaid
flowchart LR
    A-->B
```

```mermaid-animation
A
A-->B B
```

[maiermic]

I had a look. graph and flowchart render differently. I can identify the edges, but the rendered edge labels of flowchart are missing the information, to which nodes/edge they belong. There are no classes like #L-L-${startNode}-${endNode} added to the element. mermaid.js would have to add this information (classes to the elements), so that they can be identified and animated.

[rishigoutam]

Thank you for looking into it. The workaround of just using a graph in lieu of a flowchart is pretty simple, so I'll stick with that