Arrows not shown when using many mermaid graphs

[twitwi]

Describe the bug
When using several mermaid graphs (on different slides especially) the arrows are absent.

To Reproduce
Steps to reproduce the behavior:

1. Create a new presentation

2. Add the following two slides using mermaid

    ---
    
    # MERMAID (same id, same shape, on the same slide would be ok)
    
    ```mermaid {theme: 'neutral', scale: 0.8}
    flowchart LR
        Start --- Stop
        A-. text .-> B
        Stop ==> A
    ```
    
    ---
    
    # MERMAID but uses arrows from previous slide...
    
    ```mermaid {theme: 'neutral', scale: 0.8}
    flowchart LR
        Start --- Stop
        A-. text .-> B
        Stop ==> A
    ```
   

3. Visit the page navigating to the first then second slide

4. The arrows are absent on the second slide

The actual problem is coming from having several inline SVG with the same ideas.
Draft patch available.

[TheAlexLichter]

@twitwi What would be the patch in this case (would be happy about a gist/repo link or even PR)? Noticed the bug as well when using multiple graphs and navigating.

Possibly related: mermaid-js/mermaid#1318

[twitwi]

I can confirm, it is definitely the same issue.
Mermaid could solve it by generating random uniqu-ish IDs, but I guess we should not wait for it.

As for the patch, I have it ready and working but I need to do proper cleanup/refactoring before pushing it.
It is a matter of doing this https://github.com/twitwi/slidev-incubation/blob/main/incubator/components/InlineSvg.vue#L127 here

slidev/packages/client/builtin/Mermaid.vue

Line 28 in 4ac8f7a

const html = computed(() => svgObj.value)

I might manage to do this week end.

[twitwi]

Thanks to the above-linked issue, there is a simpler solution using some shadow dom.
I tested it using <shadow-root> from https://github.com/2A5F/shadow

@antfu is it a dependency that we can add or is it better to add such shadow-root functionality in VueUse?

(edit) with two more options, the choice could be among

• wait for mermaid to "solve" the issue
• add the 2A5F/shadow dependency
• include a shadowRoot logic in VueUse
• include the minimal shadowRoot logic directly in the Mermaid slidev component

I'm currently leaning towards the last option.

[TheAlexLichter]

Well done 👍 Thanks a lot ☺️