Animated Diagrams

[cadbox1]

Is anyone interested in animated diagrams?

I was reading this hackernews thread to find a tool that can create beautiful, animated diagrams like the sequence diagram at Git LFS but didn't really find a tool in the comments that could handle the animation part.

I love Mermaid especially the live editor, making it easy to share diagrams with just a link but I think some larger diagrams can be a bit overwhelming and animations might be able to help with this.

I've created a proof of concept to explore the idea here.

And here's a large sequence diagram.

Looking forward to some feedback, or finding a similar tool to achieve this.

[nestoru]

Awesome. Would be great to offer gif or animated SVG export as a result. Perhaps even an embedded js code that could do the animation just by pasting the <script/> code.

[sidgitind]

This looks amazing...If we can simply embed such drawings in the web, that would be great if export in gif/SVG is resource intensive

[maiermic]

@cadbox1 Have you found a similar tool? I see potential using it with Reveal.js or reveal-md https://github.com/amra/reveal-md-scripts/tree/master/mermaidjs

[maiermic]

@cadbox1 I am unsure how to interpret the 👀 reaction (to my previous comment). Would you please explain it to me? 😅

[cadbox1]

hey @maiermic haha good question. I haven't found a similar tool but reveal-md looks really cool so I guess that's what I was meaning by the eyes.

[maiermic]

Reveal.js does support animations (e.g. using fragments). Therefore, you need to add attributes (e.g. the class fragment) to the respective HTMLElements. Is this possible?

PS: I just realized that the organization/repository moved to https://github.com/mermaid-js/mermaid-live-editor. I'm not sure if this issue is still watched by maintainers.

Edit: According to this comment

As to animation - this is not supported in Mermaid, and there are no plans to introduce this feature in the near future.

[maiermic]

I've implemented a first version of a library that demonstrates 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.

[ingo-eichhorst]

Alternatively you can simply apply any styling to the SVG in a HTML context like RevealJS. Here is an example which gives you 100% control.
https://gist.github.com/ingo-eichhorst/cd18efd5cbc3dc60cb6095c0affe3e65