mermaid: Usage of duplicate IDs across diagrams has potential to break some diagrams

Describe the bug Class and State Diagrams all share <def> elements with the same id instead of making them unique. If given two diagrams that share <def> elements with the same id, and the first gets hidden, it can affect all other diagrams that share the same <def> ids.

In this example, notice that when the Class Diagram is hidden, the State Diagram underneath loses its arrows.

This is because both the State Diagram and the Class Diagram define <def> elements that use the exact same id. Below is an example of the <dev> id that is generated in these SVGs. It is not unique like other diagrams generate. It would be expected to have dependencyEnd<some_number>, but instead all Class and State Diagrams use the exact same id.

<marker id="dependencyEnd" refX="19" refY="7" markerWidth="20" markerHeight="28" orient="auto"><path d="M 19,7 L9,13 L14,7 L9,1 Z"></path></marker>

This only works as long as the first doesn’t get hidden (the only ID that the browser cares about, as IDs are required to be unique).

I imagine stylesheets would also have to get cleaned up as they are currently using things like:

#dependencyStart {
  @include composition;
}

#dependencyEnd {
  @include composition;
}

You could maybe get away with something like:

[id^="dependencyEnd] {
  @include composition;
}

On a side note, using IDs in general like this could mistakenly break things in a site if a user happens to use the same ID in their document. At the very least, it may make sense to kind of namespace the ids to reduce the chance of a user accidentally using the same ID __mermaid_dependencyEnd<number>. Something to think about.

Expected behavior

All <dev> elements should be generated with unique ids.

Screenshots

See above

Desktop (please complete the following information):

Not OS or Browser specific

• Mermaid Version: 8.4.8