Mermaid click animation support about 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)

[ragavkumarv]

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

[twitwi]

Small video of my prototype

anim-code-and-mermaid.mp4