/reveal-md-mermaid-animation-example

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

Primary LanguageJavaScriptMIT LicenseMIT

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.