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

[facelessuser]

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

[knsv]

Good point. I am in the middle of rewriting the rendering engine for flowcharts and state diagrams and I will start using this approach there.

[facelessuser]

Look forward to it! Great project by the way.

[ismarslomic]

Maybe this is another feature request, but it would be nice if Classes had an Id property, such as Nodes in Flowchart Diagram. That would allow to draw two Classes with identical name but different Ids in same Class Diagram

[TheSonOfThomp]

FWIW, consider the specificity of targeting [id^="dependencyEnd] vs #dependencyEnd. This may (or may not) cause issues with styling

[ismarslomic]

Again, there is already an solution for Nodes in Flowchart Diagram, which provides possibility to name two Nodes identically, but refer and style them separately. Not sure what makes applying the same solution for Class Diagram more difficult. Or is just that different contributors works on different parts of Mermaid and do not reuse solutions across for some specific reason?