maiermic / reveal-md-mermaid-animation-example

Example of how to animate mermaid diagrams in reveal-md using fragments

reveal-md-mermaid-animation-example

This repository contains an example that demonstrates (see demo) how to animate (mermaid) diagrams in (reveal-md) presentations using fragments. The approach adds classes and data attributes to the rendered graph (SVG) elements. It may also be used in reveal.js.

Goal of this project

My goal is to create a library that can be installed using npm. Therefore, I would like to collect requirements. Please create an issue to add your requirements and join the discussion. For example, one important point of discussion is, how/where the animations should be defined or associated with the graph (elements).

I've implemented two approaches:

1. Define a JavaScript function (see reveal-mermaid-animation-handlers.js) that calls the API of the library (see reveal-mermaid-animation.js)

2. Define a code block in a new/custom language (mermaid-animation), which is translated in API calls by the library. For example, after the code block (language mermaid) of your graph

   graph TD;
       A-->B;
   

   you define the animation (order) of nodes and edges in another code block (language mermaid) on the same slide

   A
   A-->B B
   

   The line number defines, in which step a node/edge should be shown in the animation (i.e. adds class fragment and sets attribute data-fragment-index on the SVG element of the rendered node/edge). In the example, Node A is shown in the first step, the edge A-->B and the node B are shown in the second step.

How to run

npm install
npm start

Open http://localhost:1948/presentation.md

---

Thanks to the authors of reveal-md-scripts. I'm using a modified version of their reveal-mermaid.js. I dispatch events, when the graph is rendered or attached.

reveal-md-mermaid-animation-example's Issues

Deploy a Demo to Netlify?

hey @maiermic, nice job on the library!

have you thought about deploying it to somewhere like Netlify so people can check out a demo without pulling the code down?

happy to help if you're not sure how but Netlify makes it pretty easy.

supporting other mermaid types than graph

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

related libraries and plugins

The reveal.js plugin animate uses SVG.js to manipulate/animate SVGs.