Sequence diagram arrows and numbers disappear

[hak33m16]

Extension version: v1.23.1
VS code version: 1.92.0

If you put a sequence diagram inside of a details tag, and then create another sequence diagram on that same page, all subsequence sequence diagrams will appear to be missing their arrows and numbers due to a coloring issue

# test

## First

<details>

``mermaid # removed 3rd backtick for sample
sequenceDiagram
    autonumber
    participant User
    participant Client
    User-->>Client: Talks to client
`` # removed 3rd backtick for sample

</details>

## Second

``mermaid # removed 3rd backtick for sample
sequenceDiagram
    autonumber
    participant User
    participant Client
    User-->>Client: Talks to client
`` # removed 3rd backtick for sample

Removing the details section fixes it

Two with first inside of details

Highlight seemingly empty section

No details section

[Bunker-D]

It looks like issue I fixed for Obsidian! Maybe somebody can take that to fix the issue here too.

Problem

Assuming it is the same issue, it stems from the fact that arrows and other markers use an id rather than a class to be formatter. This was a known issue with Mermaid: #1318, #1871, #3267.

This led to duplicate ids for the markers. And when a marker, like an arrow, is added to an edge, it is referred to using url(#<id>)… which has the effect use not necessary the maker from this graph, but the first one found in the document, i.e., potentially one that is hidden.

Solutions

Solution 0: Mermaid update?

It seems that this issue with Mermaid is supposed to be resolved.

That being said, it is supposed to be resolved since Mermaid v10.5.0, and the package.json of this extension refers to Mermaid v10.9.0. 🤷‍♀️

Solution 1: Making the ids identical

One solution is to modify the DOM elements of the SVG produced by Mermaid, and replace every marker id with a unique id.

See the implementation I proposed for Obsidian.

Solution 2: Injecting “visible” markers early in the HTML

The other solution is more of a hack, and consists into creating markers with the same ids that would be the first elements with this id in the HTML, and that would be hidden from the user in practice but would not have the visibility: hidden trait.

I implemented that as a hack to fix the issue for Obsidian (before Solution 1 was implemented). More explanations here.

[Bunker-D]

Update:

Actually, the issue has been solved in Mermaid only for some types of graphs (Class diagrams (classDiagram), Flowcharts (flowchart), State diagrams (stateDiagram-v2)), but not the others (C4 Context diagrams (C4Context), Entity Relationship diagrams (erDiagram), Requirement diagram (requirementDiagram), Sequence diagrams (sequenceDiagram), User journeys (journey)).

I'm currently trying to implement and push a fix for the remaining graph types.

[mjbvz]

Easily copiable markdown showing the issue:

## First

<details>

```mermaid 
sequenceDiagram
    autonumber
    participant User
    participant Client
    User-->>Client: Talks to client
```

</details>

## Second

```mermaid
sequenceDiagram
    autonumber
    participant User
    participant Client
    User-->>Client: Talks to client
```

[Bunker-D]

@mjbvz I see you labeled the issue as a bug on your side. But it really is a bug with Mermaid itself, that has been partially corrected. I proposed a resolution for the issue through pull request #5756, but it was blocked due to a file I fail to remove from the PR (see the conversation there). If you can help on this side, this would probably be easier and more relevant than implementing a workaround in your own extension.

[mjbvz]

I believe this has been fixed upstream. Here's how this rendered in the latest release of this extension which includes Mermaid 11.6: