style elements based on stereotype annotations

Author: darshanr0107

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

@@ -1028,4 +1028,91 @@ class C13["With Città foreign language"]
       { logLevel: 1, htmlLabels: true }
     );
   });
+  it('should render a full class diagram using interface annotation', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+      Class01 <|-- AveryLongClass : Cool
+
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "0" *-- "0..n" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 .. Class08
+      Class09 "many" --> "1" C2 : Where am i?
+      Class09 "0" --* "1..n" C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : #size()
+      Class01 : -int chimp
+      Class01 : +int gorilla
+      Class08 <--> C2: Cool label
+        class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        size()
+        }
+    
+      `,
+      { logLevel: 1, htmlLabels: true }
+    );
+  });
+  it('should render a full class diagram using abstract annotation', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+      Class01 <|-- AveryLongClass : Cool
+
+      &lt;&lt;abstract&gt;&gt; Class01
+      Class03 "0" *-- "0..n" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 .. Class08
+      Class09 "many" --> "1" C2 : Where am i?
+      Class09 "0" --* "1..n" C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : #size()
+      Class01 : -int chimp
+      Class01 : +int gorilla
+      Class08 <--> C2: Cool label
+        class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        size()
+        }
+    
+      `,
+      { logLevel: 1, htmlLabels: true }
+    );
+  });
+  it('should render a full class diagram using enumeration annotation', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+      Class01 <|-- AveryLongClass : Cool
+
+      &lt;&lt;enumeration&gt;&gt; Class01
+      Class03 "0" *-- "0..n" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 .. Class08
+      Class09 "many" --> "1" C2 : Where am i?
+      Class09 "0" --* "1..n" C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : #size()
+      Class01 : -int chimp
+      Class01 : +int gorilla
+      Class08 <--> C2: Cool label
+        class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        size()
+        }
+    
+      `,
+      { logLevel: 1, htmlLabels: true }
+    );
+  });
 });

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

@@ -36,15 +36,44 @@ export async function textHelper<T extends SVGGraphicsElement>(
 
   annotationGroup = shapeSvg.insert('g').attr('class', 'annotation-group text');
   if (node.annotations.length > 0) {
-    const annotation = node.annotations[0];
-    await addText(annotationGroup, { text: `«${annotation}»` } as unknown as ClassMember, 0);
+    await addText(annotationGroup, { text: `` } as unknown as ClassMember, 0);
 
     const annotationGroupBBox = annotationGroup.node()!.getBBox();
     annotationGroupHeight = annotationGroupBBox.height;
   }
 
   labelGroup = shapeSvg.insert('g').attr('class', 'label-group text');
-  await addText(labelGroup, node, 0, ['font-weight: bolder']);
+
+  // Determine styling based on annotations
+  let labelStyles = ['font-weight: bolder']; // Default bold style
+  let labelClass = 'classTitle';
+
+  if (node.annotations && node.annotations.length > 0) {
+    const annotation = node.annotations[0].toLowerCase();
+    switch (annotation) {
+      case 'abstract':
+        labelClass = 'classTitle abstract';
+        labelStyles = [];
+        break;
+      case 'enumeration':
+        labelClass = 'classTitle enumeration';
+        labelStyles = [];
+        break;
+      case 'interface':
+        labelClass = 'classTitle interface';
+        labelStyles = [];
+        break;
+      default:
+        labelClass = 'classTitle';
+        labelStyles = ['font-weight: bolder'];
+        break;
+    }
+  }
+
+  // Apply the CSS class to the label group
+  labelGroup.attr('class', `label-group text ${labelClass}`);
+
+  await addText(labelGroup, node, 0, labelStyles);
   const labelGroupBBox = labelGroup.node()!.getBBox();
   labelGroupHeight = labelGroupBBox.height;
 

packages/mermaid/src/diagrams/class/styles.js

@@ -148,6 +148,17 @@ g.classGroup line {
   stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }
+  .classTitle.abstract {
+  font-style: italic;
+  font-weight: normal;
+}
+.classTitle.enumeration {
+  text-decoration: underline;
+  font-weight: normal;
+}
+.classTitle.interface {
+  font-weight: bold;
+}
 
 .edgeTerminals {
   font-size: 11px;