Class Diagram edgePaths should have lexical ids

[akulmehta]

Proposal

Currently when an edge path is created in a class diagram, it produces an id which is just with a count.

Example:

In this case the two paths are assigned ids of id1 and id2

<g class="edgePaths">
	<path 
  marker-end="url(#classDiagram-extensionEnd)" 
  marker-start="url(#classDiagram-extensionStart)" 
  style="fill:none" class="edge-pattern-solid relation" 
  id="id1" 
  d="M58.962245118973726,72.59658813476562L55.24552626440763,76.7632548014323C51.528807409841534,80.92992146809895,44.09536970070934,89.2632548014323,40.378650846143245,97.59658813476562C36.66193199157715,105.92992146809895,36.66193199157715,114.2632548014323,36.66193199157715,118.42992146809895L36.66193199157715,122.59658813476562"
  >
	</path>
	<path 
  marker-end="url(#classDiagram-extensionEnd)" 
  marker-start="url(#classDiagram-extensionStart)" 
  style="fill:none" 
  class="edge-pattern-solid relation" 
  id="id2"
  d="M116.58321081364346,72.59658813476562L120.29992966820957,76.7632548014323C124.01664852277565,80.92992146809895,131.45008623190785,89.2632548014323,135.16680508647394,97.59658813476562C138.88352394104004,105.92992146809895,138.88352394104004,114.2632548014323,138.88352394104004,118.42992146809895L138.88352394104004,122.59658813476562"
  >
	</path>
</g>

This prevents selection of specific edgePaths for specific CSS styling - an issue described in this StackOverflow question:
https://stackoverflow.com/questions/74908612/mermaid-class-diagram-hide-conceal-certain-nodes-and-links-edgepaths

I believe (and I could be horrible wrong), that the issue is in the file packages/mermaid/src/diagrams/class/classRenderer-v2.js on line 254, where the relations are iterated and the edgeData.id is assigned with a count cnt.

Instead if the id was assigned with more lexical term such as

    edgeData.id = 'id_' + edge.relationTitle1 + '_' + edge.relationTitle2;

Example

This should produce something like the following where the ids of the two paths are id_Animal_Zebra and id_Animal_Lion

<g class="edgePaths">
	<path 
  marker-end="url(#classDiagram-extensionEnd)" 
  marker-start="url(#classDiagram-extensionStart)" 
  style="fill:none" class="edge-pattern-solid relation" 
  id="id_Animal_Zebra" 
  d="M58.962245118973726,72.59658813476562L55.24552626440763,76.7632548014323C51.528807409841534,80.92992146809895,44.09536970070934,89.2632548014323,40.378650846143245,97.59658813476562C36.66193199157715,105.92992146809895,36.66193199157715,114.2632548014323,36.66193199157715,118.42992146809895L36.66193199157715,122.59658813476562"
  >
	</path>
	<path 
  marker-end="url(#classDiagram-extensionEnd)" 
  marker-start="url(#classDiagram-extensionStart)" 
  style="fill:none" 
  class="edge-pattern-solid relation" 
  id="id_Animal_Lion" 
  d="M116.58321081364346,72.59658813476562L120.29992966820957,76.7632548014323C124.01664852277565,80.92992146809895,131.45008623190785,89.2632548014323,135.16680508647394,97.59658813476562C138.88352394104004,105.92992146809895,138.88352394104004,114.2632548014323,138.88352394104004,118.42992146809895L138.88352394104004,122.59658813476562"
  >
	</path>
</g>

Screenshots

No response

[jgreywolf]

I have created this change locally, and it does not appear to be causing any bad consequences :)

Im going to play with it some more over the next couple of days, and see if I can create any test cases