Feature - "animated" diagrams

[Jiehong]

Is your feature request related to a problem? Please describe. Sequence diagrams can be pretty big, and are nice because they expose the full picture right away. But, when trying to understand them it can be nice to only show part of the diagram, and expand it by adding bits and pieces at the reader's pace.

Describe the solution you'd like It would be nice if a way to step/go to the next step in a diagram would be possible, like with a button (such as the walkthrough of https://app.ilograph.com/demo.ilograph.Ilograph/Get%2520diagram). It could use the sequence number, and show each arrow once after the other, using the sequence number as a clue for what to display next (and arrows with the same sequence number would be displayed at the same time).

Invisible sequence numbers might be needed to also cue notes, activations, so that they are also displayed at the same time as the linked arrows.

Describe alternatives you've considered Today, sequence numbers sort of fill this gap, but are just labels all over the place that you have to follow manually.

You can sort of do it by hand by writing part of your sequence diagram, export it, and repeat for all steps in your diagram. Then, use an animation framework/app (such as https://revealjs.com/) to make each diagram a slide.

However, if you ever need to update your diagram, then you need to update all of the partial diagrams as well, re-export them, and update the presentation/app, which is very time consuming.

Additional context Exporting multiple diagrams and generate a gif/video about it could work, but has multiple disadvantages:

• the pace is forced on you, and you cannot go to the next step when you want (you could pause the video, and maybe index each video chapter to a next step, and hope that the user uses a video editor supporting chapters with a shortcut to go to the next one, but that's a big ask).
• images are less accessible overall (and have fixed resolution).

Example

If I take the sequence number example from the doc, each frame of the presentation would look like this (in order, and highlighting the new bits between frames would be a nice bonus):

Frame	Image
1
2
3
4
5
6

[jgreywolf]

This is something that would be cool. However, I am not sure off the top of my head if this is something that is supported within the confines of strict SVG - we have issues right now with some features that we are using which require browser based rendering engine, and mermaid diagrams can "break" when you try and view them in an environment that does not use the browser (image editors, office apps, etc)

[Jiehong]

Technically, svg can be animated (https://en.wikipedia.org/wiki/SVG_animation), but SVG can also be animated via css animations.

D2 has support for animations, sort of: https://d2lang.com/tour/composition/, but I didn't check how they do it.

[dmkaplan2000]

I was also looking for this feature. I am not much of an expert in mermaid, so this may be way off base, but one way I could see to implement this if the flowchart always have the same structure and you just want to incrementally reveal elements (i.e., less complex case then the case suggested by the proposer where the form of the graph changes) would be to use the style tag to set all aspects of certain elements of the graph to full alpha transparency. However, I do not think style can be used for the links between nodes.

From a mermaid language point of view, would adding an animation tag which would allow you to specify an order of appearance and how the element is to appear work?

[shawnlu-ikigai]

I love to see mermaid has this feature. Sounds like a big gaming changing feature needs time to implement. For an MVP. make the lines(connection lines) animated can be marked as as MVP? such as this one: https://d2lang.com/tour/style#animated