fix: Class label not visible if class is already defined

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -539,4 +539,13 @@ class C13["With Città foreign language"]
   `
     );
   });
+
+  it('should render classLabel if class has already been defined earlier', () => {
+    imgSnapshotTest(
+      `classDiagram
+  Animal <|-- Duck
+  class Duck["Duck with text label"]
+`
+    );
+  });
 });

demos/pie.html

@@ -37,7 +37,7 @@
     </pre>
 
     <script type="module">
-      import mermaid from '../packages/mermaid';
+      import mermaid from '../packages/mermaid/src/mermaid';
       mermaid.initialize({
         theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',

packages/mermaid/src/diagrams/class/classDb.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error - d3 types issue
 import { select, Selection } from 'd3';
 import { log } from '../../logger';
 import * as configApi from '../../config';
@@ -44,28 +45,32 @@ const splitClassNameAndType = function (id: string) {
   return { className: className, type: genericType };
 };
 
+export const setClassLabel = function (id: string, label: string) {
+  if (label) {
+    label = sanitizeText(label);
+  }
+
+  const { className } = splitClassNameAndType(id);
+  classes[className].label = label;
+};
+
 /**
  * Function called by parser when a node definition has been found.
  *
  * @param id - Id of the class to add
- * @param label - Optional label of the class
  * @public
  */
-export const addClass = function (id: string, label?: string) {
+export const addClass = function (id: string) {
   const classId = splitClassNameAndType(id);
   // Only add class if not exists
   if (classes[classId.className] !== undefined) {
     return;
   }
 
-  if (label) {
-    label = sanitizeText(label);
-  }
-
   classes[classId.className] = {
     id: classId.className,
     type: classId.type,
-    label: label ?? classId.className,
+    label: classId.className,
     cssClasses: [],
     methods: [],
     members: [],
@@ -354,6 +359,7 @@ const setupToolTips = function (element: Element) {
   const nodes = svg.selectAll('g.node');
   nodes
     .on('mouseover', function () {
+      // @ts-expect-error - select is not part of the d3 type definition
       const el = select(this);
       const title = el.attr('title');
       // Don't try to draw a tooltip if no data is provided
@@ -373,6 +379,7 @@ const setupToolTips = function (element: Element) {
     })
     .on('mouseout', function () {
       tooltipElem.transition().duration(500).style('opacity', 0);
+      // @ts-expect-error - select is not part of the d3 type definition
       const el = select(this);
       el.classed('hover', false);
     });
@@ -417,4 +424,5 @@ export default {
   lookUpDomId,
   setDiagramTitle,
   getDiagramTitle,
+  setClassLabel,
 };

packages/mermaid/src/diagrams/class/parser/classDiagram.jison

@@ -288,7 +288,7 @@ classStatement
 
 classIdentifier
     : CLASS className                                    {$$=$2; yy.addClass($2);}
-    | CLASS className classLabel                         {$$=$2; yy.addClass($2, $3);}
+    | CLASS className classLabel                         {$$=$2; yy.addClass($2);yy.setClassLabel($2, $3);}
     ;
 
 annotationStatement