Mermaid click animation support

[pinage404]

Hello,

Thanks for making slidev, i love it !

Is your feature request related to a problem? Please describe. I have some Mermaid diagrams with many elements

I would like to be able to display the elements one by one

So that the audience has time to understand how it is built step by step

Describe the solution you'd like I would like to have something like <v-click> that would display the element after a click / space

Describe alternatives you've considered I can display everything at once

Advantages :

• Easy to maintain
• Single source of truth

Disadvantages :

• harder for the public to understand

---

I can duplicate the diagram on several slides, and remove the elements on the first few slides

Advantages :

• the diagram becomes more complex as you move through the slides

Disadvantages :

• elements do not have the same position from one slide to the next, which is harder for the audience to understand
• harder to maintain : if i want to change an element, i have to do so on each slide

---

I can duplicate the diagram on several slides, and add a custom style to hide elements

flowchart LR
    First --> Second
    Second --> Third

    classDef Hidden visibility:hidden
    class Second,Third Hidden

flowchart LR
    First --> Second
    Second --> Third

    classDef Hidden visibility:hidden
    class Second,Third Hidden

Advantages :

• the diagram becomes more complex as you move through the slides
• elements keep their position between slides

Disadvantages :

• arrows between elements are not hidden
• harder to maintain : if i want to change an element, i have to do so on each slide

[ragavkumarv]

This feature I really miss it and would be great addition to the already awesome slidev 🎊

[twitwi]

I have done it but with my custom animation syntax (e.g. with svg) so here are some random comments that might help for the implementation using v-clicks:

• mermaid generates SVG, that's convenient
• mermaid also conveniently put all nodes as children of a given parent, they have the node class and the parents the nodes class (same for edges, edgeLabels), so we can use e.g. .node::nth-child(2) to get the second node
• the simplest (to avoid hacking the mermaid syntax(es)) might be to reuse the "class" from mermaid (as shown in the example above) and parse these classes (after mermaid is properly rendered) as v-clicks
• we put, in slidev, mermaid charts in a shadow root (which is a good thing to prevent CSS bleeding) so any selector-based query should be explicitly crossing the shadow barrier (I emulated ::shadow , but we might as well aim at modifying mermaid to provide ::part() if it makes sense (not sure)... thinking about part, as we put the svg in a shadowDOM, we should probably patch it to have parts https://github.com/slidevjs/slidev/blob/main/packages/client/builtin/Mermaid.vue)

[twitwi]

Small video of my prototype