fix:ComponentQueue_Ext throws lexical error

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-10-18 05:29:40 +02:00 · 2025-10-14 19:00:17 +05:30
13 changed files with 156 additions and 1450 deletions
--- a/.changeset/ten-plums-bet.md
+++ b/.changeset/ten-plums-bet.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Support ComponentQueue_Ext to prevent parsing error
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -33,15 +33,12 @@
      Animal: +mate()

      class Duck{
-    &lt;&lt;injected&gt;&gt;
-          &lt;&lt;interface&gt;&gt;
-    
        +String beakColor
        +swim()
        +quack()
      }
      class Fish{
-        -List~int~ sizeInFeet
+        -Listint sizeInFeet
        -canEat()
      }
      class Zebra{
@@ -59,8 +56,6 @@
    Class01 <|-- AveryLongClass : Cool

    &lt;&lt;interface&gt;&gt; Class01
-    &lt;&lt;injected&gt;&gt; Class01
-    
    Class03 "0" *-- "0..n" Class04
    Class05 "1" o-- "many" Class06
    Class07 .. Class08
@@ -161,7 +156,7 @@
        ~InternalProperty : string
        ~AnotherInternalProperty : List~List~string~~
      }
-      class People List~Person~
+      class People List~List~Person~~
    </pre>
    <hr />
    <pre class="mermaid">
--- a/demos/multiple-annotations-test.html
+++ b/demos/multiple-annotations-test.html
@@ -1,118 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Multiple Annotations Test</title>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
-        background-color: #f5f5f5;
-      }
-      h1,
-      h2 {
-        color: #333;
-      }
-      .mermaid {
-        background: white;
-        border: 1px solid #ddd;
-        border-radius: 5px;
-        padding: 20px;
-        margin: 20px 0;
-      }
-      .description {
-        background: #e8f4fd;
-        border-left: 4px solid #0066cc;
-        padding: 10px;
-        margin: 10px 0;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Multiple Annotations Test - Issue #6680 Fix</h1>
-
-    <div class="description">
-      <strong>Testing:</strong> Multiple stereotypes/annotations should now render correctly using
-      external and inline annotation methods.
-    </div>
-
-    <h2>Baseline - no annotations</h2>
-    <pre class="mermaid">
-classDiagram
-    class Shape
-    class Circle
-    class Triangle
-    </pre>
-
-    <h2>#0 Baseline - single annotation</h2>
-    <pre class="mermaid">
-classDiagram
-    class Shape
-    class Circle
-    class Triangle
-
-    &LT;&LT;injected&GT;&GT; Shape
-    </pre>
-
-    <h2>Method 1: External/Next-line Annotations</h2>
-    <div class="description">
-      External annotations defined on the line after the class definition:
-    </div>
-    <pre class="mermaid">
-    classDiagram
-        class Shape
-        &LT;&LT;interface&GT;&GT; &LT;&LT;injected&GT;&GT; Shape
-        class Circle
-        &LT;&LT;abstract&GT;&GT; &LT;&LT;serializable&GT;&GT; Circle
-        class Triangle
-        &LT;&LT;interface&GT;&GT; &LT;&LT;cached&GT;&GT; &LT;&LT;singleton&GT;&GT; Triangle
-    </pre>
-
-    <h2>Method 2: Inline Annotations</h2>
-    <div class="description">Inline annotations defined directly with the class definition:</div>
-    <pre class="mermaid">
-    classDiagram
-        class Shape &LT;&LT;interface&GT;&GT; &LT;&LT;injected&GT;&GT;
-        class Circle &LT;&LT;abstract&GT;&GT; &LT;&LT;serializable&GT;&GT;
-        class Square &LT;&LT;service&GT;&GT; &LT;&LT;singleton&GT;&GT; &LT;&LT;cached&GT;&GT;
-        class Triangle &LT;&LT;interface&GT;&GT; &LT;&LT;component&GT;&GT; &LT;&LT;transient&GT;&GT;
-    </pre>
-
-    <h2>Method 3: Mixed Methods Test</h2>
-    <div class="description">Combination of both external and inline annotation methods:</div>
-    <pre class="mermaid">
-    classDiagram
-        class Component &LT;&LT;interface&GT;&GT; &LT;&LT;injected&GT;&GT;
-        class Service
-        &LT;&LT;abstract&GT;&GT; &LT;&LT;singleton&GT;&GT; Service
-        class Repository &LT;&LT;dao&GT;&GT; &LT;&LT;cached&GT;&GT;
-        class Controller
-        &LT;&LT;rest&GT;&GT; &LT;&LT;secured&GT;&GT; Controller
-    </pre>
-
-    <h2>Real-world Example</h2>
-    <div class="description">A practical example with relationships and multiple annotations:</div>
-    <pre class="mermaid">
-    classDiagram
-        class BaseService &LT;&LT;abstract&GT;&GT; &LT;&LT;injectable&GT;&GT;
-        class UserService &LT;&LT;service&GT;&GT; &LT;&LT;singleton&GT;&GT;
-        class UserRepository &LT;&LT;repository&GT;&GT; &LT;&LT;cached&GT;&GT;
-        class UserController
-        &LT;&LT;controller&GT;&GT; &LT;&LT;secured&GT;&GT; UserController
-        
-        BaseService <|-- UserService
-        UserService --> UserRepository
-        UserController --> UserService
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        startOnLoad: true,
-        theme: 'default',
-        logLevel: 'debug',
-      });
-    </script>
-  </body>
-</html>
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -21,7 +21,7 @@ title: Animal example
 classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
-    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
@@ -50,7 +50,7 @@ title: Animal example
 classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
-    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
@@ -79,7 +79,7 @@ classDiagram
 UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.
 A single instance of a class in the diagram contains three compartments:

- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation/stereotype text describing the nature of the class.
+- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class.
 - The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
 - The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.

@@ -534,7 +534,7 @@ classDiagram
    Galaxy --> "many" Star : Contains
 ```

-## Annotations on classes (stereotypes)
+## Annotations on classes

 It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:

@@ -543,33 +543,57 @@ It is possible to annotate classes with markers to provide additional metadata a
 - `<<Service>>` To represent a service class
 - `<<Enumeration>>` To represent an enum

-Annotations are defined within the opening `<<` and closing `>>`. There are multiple ways to add an annotation to a class, and any of them will output the same result:
+Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same:

- **Inline with the class definition** (Recommended for consistency):
+> **Tip:**\
+> In Mermaid class diagrams, annotations like `<<interface>>` can be attached in two ways:
+>
+> - **Inline with the class definition** (Recommended for consistency):
+>
+>   ```mermaid-example
+>   classDiagram
+>     class Shape <<interface>>
+>   ```
+>
+>   ```mermaid
+>   classDiagram
+>     class Shape <<interface>>
+>   ```
+>
+> - **Separate line after the class definition**:
+>
+>   ```mermaid-example
+>   classDiagram
+>     class Shape
+>     <<interface>> Shape
+>   ```
+>
+>   ```mermaid
+>   classDiagram
+>     class Shape
+>     <<interface>> Shape
+>   ```
+>
+> Both methods are fully supported and produce identical diagrams.\
+> However, it is recommended to use the **inline style** for better readability and consistent formatting across diagrams.

-  ```mermaid-example
-  classDiagram
-    class Shape <<interface>>
-  ```
+- In a **_separate line_** after a class is defined:

-  ```mermaid
-  classDiagram
-    class Shape <<interface>>
-  ```
+```mermaid-example
+classDiagram
+class Shape
+<<interface>> Shape
+Shape : noOfVertices
+Shape : draw()
+```

- **Separate line after the class definition**:
-
-  ```mermaid-example
-  classDiagram
-    class Shape
-    <<interface>> Shape
-  ```
-
-  ```mermaid
-  classDiagram
-    class Shape
-    <<interface>> Shape
-  ```
+```mermaid
+classDiagram
+class Shape
+<<interface>> Shape
+Shape : noOfVertices
+Shape : draw()
+```

 - In a **_nested structure_** along with the class definition:

@@ -609,30 +633,6 @@ class Color{

 ```

-For the case of multiple annotations the syntax is similar, you can add other annotations on the same line, or in a nested class definition add an annotation on a new line, as follows:
-
-```mermaid-example
-classDiagram
-class Shape{
-    <<interface>>
-    <<injected>>
-    noOfVertices
-    draw()
-}
-
-```
-
-```mermaid
-classDiagram
-class Shape{
-    <<interface>>
-    <<injected>>
-    noOfVertices
-    draw()
-}
-
-```
-
 ## Comments

 Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.
--- a/packages/mermaid/src/diagrams/c4/parser/c4Component.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Component.spec.js
@@ -0,0 +1,58 @@
+import c4Db from '../c4Db.js';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config.js';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe.each([
+  ['Component', 'component'],
+  ['ComponentDb', 'component_db'],
+  ['ComponentQueue', 'component_queue'],
+  ['Component_Ext', 'external_component'],
+  ['ComponentDb_Ext', 'external_component_db'],
+  ['ComponentQueue_Ext', 'external_component_queue'],
+])('parsing a C4 %s', function (macroName, elementName) {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Component correctly', function () {
+    c4.parser.parse(`C4Component
+title Component diagram for Internet Banking Component
+${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toMatchObject({
+      alias: 'ComponentAA',
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+      label: {
+        text: 'Internet Banking Component',
+      },
+      techn: {
+        text: 'Technology',
+      },
+      typeC4Shape: {
+        text: elementName,
+      },
+    });
+  });
+
+  it('should handle a trailing whitespaces after Component', function () {
+    const whitespace = ' ';
+    const rendered = c4.parser.parse(`C4Component${whitespace}
+title Component diagram for Internet Banking Component${whitespace}
+${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")${whitespace}`);
+
+    expect(rendered).toBe(true);
+  });
+});
--- a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
@@ -158,10 +158,10 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 "UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';}
 "UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';}

-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}

 <attribute>",,"                           { return 'ATTRIBUTE_EMPTY';}
 <attribute>","                            { }
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -237,7 +237,6 @@ export class ClassDB implements DiagramDB {
   * @public
   */
  public addAnnotation(className: string, annotation: string) {
-    this.addClass(className);
    const validatedClassName = this.splitClassNameAndType(className).className;
    this.classes.get(validatedClassName)!.annotations.push(annotation);
  }
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -241,31 +241,6 @@ describe('given a basic class diagram, ', function () {
      expect(c1.annotations[0]).toBe('interface');
    });

-    it('should handle multiple external annotations', () => {
-      const str = `classDiagram
-        <<interface>><<service>> Car
-        Car : int size
-        Car : int age`;
-
-      parser.parse(str);
-      const carClass = classDb.getClass('Car');
-      expect(carClass.annotations).toHaveLength(2);
-      expect(carClass.annotations).toContain('interface');
-      expect(carClass.annotations).toContain('service');
-    });
-
-    it('should handle multiple annotations inline with class definition', () => {
-      const str = `classDiagram
-        class Car <<interface>> <<service>>
-        Car : int size`;
-
-      parser.parse(str);
-      const carClass = classDb.getClass('Car');
-      expect(carClass.annotations).toHaveLength(2);
-      expect(carClass.annotations).toContain('interface');
-      expect(carClass.annotations).toContain('service');
-    });
-
    it('should parse a class with text label and css class shorthand', () => {
      const str = 'classDiagram\n' + 'class C1["Class 1 with text label"]:::styleClass';

@@ -947,28 +922,6 @@ foo()
      expect(actual.methods.length).toBe(1);
      expect(actual.annotations[0]).toBe('interface');
    });
-
-    it('should handle multiple consecutive annotations on a single class', function () {
-      const str = 'classDiagram\n' + '<<interface>><<injected>> Class1';
-
-      parser.parse(str);
-
-      const actual = parser.yy.getClass('Class1');
-      expect(actual.annotations.length).toBe(2);
-      expect(actual.annotations).toContain('interface');
-      expect(actual.annotations).toContain('injected');
-    });
-
-    it('should handle multiple separate annotations on a single class', function () {
-      const str = 'classDiagram\n' + '<<interface>> Class1\n' + '<<injected>> Class1';
-
-      parser.parse(str);
-
-      const actual = parser.yy.getClass('Class1');
-      expect(actual.annotations.length).toBe(2);
-      expect(actual.annotations).toContain('interface');
-      expect(actual.annotations).toContain('injected');
-    });
  });
 });

--- a/packages/mermaid/src/diagrams/class/classTypes.attribute.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.attribute.spec.ts
@@ -1,317 +0,0 @@
-import { ClassMember } from './classTypes.js';
-import { vi, describe, it, expect } from 'vitest';
-const spyOn = vi.spyOn;
-
-const staticCssStyle = 'text-decoration:underline;';
-const abstractCssStyle = 'font-style:italic;';
-const abstractStaticCssStyle = 'text-decoration:underline;font-style:italic;';
-
-describe('ClassTypes - Attribute Tests', () => {
-  describe('Basic attribute parsing without classifiers', () => {
-    it('should parse attribute with no modifiers', () => {
-      const str = 'name String';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-
-    it('should parse attribute with public "+" visibility', () => {
-      const str = '+name String';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-
-    it('should parse attribute with protected "#" visibility', () => {
-      const str = '#name String';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('#name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-
-    it('should parse attribute with private "-" visibility', () => {
-      const str = '-name String';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('-name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-
-    it('should parse attribute with internal "~" visibility', () => {
-      const str = '~name String';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('~name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-
-    it('should parse simple attribute name only', () => {
-      const str = 'id';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('id');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-
-    it('should parse attribute with visibility and name only', () => {
-      const str = '+id';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+id');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-  });
-
-  describe('Static classifier ($) attributes', () => {
-    it('should parse static attribute without visibility', () => {
-      const str = 'count int$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('count int');
-      expect(displayDetails.cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should parse static attribute with public visibility', () => {
-      const str = '+count int$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+count int');
-      expect(displayDetails.cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should parse static attribute with protected visibility', () => {
-      const str = '#count int$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('#count int');
-      expect(displayDetails.cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should parse static attribute with private visibility', () => {
-      const str = '-count int$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('-count int');
-      expect(displayDetails.cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should parse static attribute with internal visibility', () => {
-      const str = '~count int$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('~count int');
-      expect(displayDetails.cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should parse static attribute name only', () => {
-      const str = 'MAX_SIZE$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('MAX_SIZE');
-      expect(displayDetails.cssStyle).toBe(staticCssStyle);
-    });
-  });
-
-  describe('Abstract classifier (*) attributes', () => {
-    it('should parse abstract attribute without visibility', () => {
-      const str = 'data String*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('data String');
-      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should parse abstract attribute with public visibility', () => {
-      const str = '+data String*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+data String');
-      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should parse abstract attribute with protected visibility', () => {
-      const str = '#data String*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('#data String');
-      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should parse abstract attribute with private visibility', () => {
-      const str = '-data String*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('-data String');
-      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should parse abstract attribute with internal visibility', () => {
-      const str = '~data String*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('~data String');
-      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should parse abstract attribute name only', () => {
-      const str = 'value*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('value');
-      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
-    });
-  });
-
-  describe('Abstract and Static combined classifiers', () => {
-    it('should parse abstract+static ($*) attribute without visibility', () => {
-      const str = 'config Map$*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('config Map');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse static+abstract (*$) attribute without visibility', () => {
-      const str = 'config Map*$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('config Map');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse abstract+static ($*) attribute with public visibility', () => {
-      const str = '+config Map$*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+config Map');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse static+abstract (*$) attribute with public visibility', () => {
-      const str = '+config Map*$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+config Map');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse abstract+static ($*) attribute with protected visibility', () => {
-      const str = '#registry HashMap$*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('#registry HashMap');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse static+abstract (*$) attribute with protected visibility', () => {
-      const str = '#registry HashMap*$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('#registry HashMap');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse abstract+static ($*) attribute with private visibility', () => {
-      const str = '-cache LRUCache$*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('-cache LRUCache');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse static+abstract (*$) attribute with private visibility', () => {
-      const str = '-cache LRUCache*$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('-cache LRUCache');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse abstract+static ($*) attribute with internal visibility', () => {
-      const str = '~pool ThreadPool$*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('~pool ThreadPool');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse static+abstract (*$) attribute with internal visibility', () => {
-      const str = '~pool ThreadPool*$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('~pool ThreadPool');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse abstract+static ($*) attribute name only', () => {
-      const str = 'INSTANCE$*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('INSTANCE');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse static+abstract (*$) attribute name only', () => {
-      const str = 'INSTANCE*$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('INSTANCE');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('Complex attribute type scenarios', () => {
-    it('should parse generic type attribute with static classifier', () => {
-      const str = '+items List~String~$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+items List<String>');
-      expect(displayDetails.cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should parse nested generic type attribute with abstract classifier', () => {
-      const str = '#mapping Map~String, List~Integer~~*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('#mapping Map~String, List<Integer~>');
-      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should parse complex generic type with abstract+static classifiers', () => {
-      const str = '+factory Function~Map~String, Object~, Promise~Result~~$*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe(
-        '+factory Function<Map>String, Object~, Promise<Result~>'
-      );
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should parse attribute with spaces in type name', () => {
-      const str = '+fullName Full Name String$';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+fullName Full Name String');
-      expect(displayDetails.cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should parse attribute with special characters in name', () => {
-      const str = '+user_name String*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+user_name String');
-      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should parse attribute with numeric suffix', () => {
-      const str = '-value123 int$*';
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('-value123 int');
-      expect(displayDetails.cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-});
--- a/packages/mermaid/src/diagrams/class/classTypes.method.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.method.spec.ts
@@ -1,827 +0,0 @@
-import { ClassMember } from './classTypes.js';
-import { vi, describe, it, expect } from 'vitest';
-const spyOn = vi.spyOn;
-
-const staticCssStyle = 'text-decoration:underline;';
-const abstractCssStyle = 'font-style:italic;';
-const abstractStaticCssStyle = 'text-decoration:underline;font-style:italic;';
-
-describe('given text representing a method, ', function () {
-  describe('when method has no parameters', function () {
-    it('should parse correctly', function () {
-      const str = `getTime()`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(str);
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTime()`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('+getTime()');
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTime()`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('-getTime()');
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTime()`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('#getTime()');
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTime()`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('~getTime()');
-    });
-  });
-
-  describe('when method has single parameter value', function () {
-    it('should parse correctly', function () {
-      const str = `getTime(int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(str);
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTime(int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('+getTime(int)');
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTime(int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('-getTime(int)');
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTime(int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('#getTime(int)');
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTime(int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('~getTime(int)');
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTime(int)$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(int)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTime(int)*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(int)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTime(int)*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(int)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTime(int)$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(int)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method has single parameter type and name (type first)', function () {
-    it('should parse correctly', function () {
-      const str = `getTime(int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(str);
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTime(int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('+getTime(int count)');
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTime(int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('-getTime(int count)');
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTime(int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('#getTime(int count)');
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTime(int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('~getTime(int count)');
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTime(int count)$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(int count)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTime(int count)*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(int count)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTime(int count)*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(int count)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTime(int count)$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(int count)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method has single parameter type and name (name first)', function () {
-    it('should parse correctly', function () {
-      const str = `getTime(count int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(str);
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTime(count int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('+getTime(count int)');
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTime(count int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('-getTime(count int)');
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTime(count int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('#getTime(count int)');
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTime(count int)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('~getTime(count int)');
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTime(count int)$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(count int)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTime(count int)*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(count int)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTime(count int)*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(count int)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTime(count int)$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(count int)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method has multiple parameters', function () {
-    it('should parse correctly', function () {
-      const str = `getTime(string text, int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(str);
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTime(string text, int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(str);
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTime(string text, int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(str);
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTime(string text, int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(str);
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTime(string text, int count)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(str);
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTime(string text, int count)$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(string text, int count)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTime(string text, int count)*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(string text, int count)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTime(string text, int count)*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(string text, int count)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTime(string text, int count)$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime(string text, int count)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method has return type', function () {
-    it('should parse correctly', function () {
-      const str = `getTime() DateTime`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime() : DateTime');
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTime() DateTime`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('+getTime() : DateTime');
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTime() DateTime`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('-getTime() : DateTime');
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTime() DateTime`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('#getTime() : DateTime');
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTime() DateTime`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('~getTime() : DateTime');
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTime() DateTime$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime() : DateTime');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTime()  DateTime*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime() : DateTime');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTime()  DateTime*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime() : DateTime');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTime()  DateTime$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTime() : DateTime');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method parameter is generic', function () {
-    it('should parse correctly', function () {
-      const str = `getTimes(List~T~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>)');
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTimes(List~T~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('+getTimes(List<T>)');
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTimes(List~T~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('-getTimes(List<T>)');
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTimes(List~T~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('#getTimes(List<T>)');
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTimes(List~T~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('~getTimes(List<T>)');
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTimes(List~T~)$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTimes(List~T~)*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTimes(List~T~)*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTimes(List~T~)$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method parameter contains two generic', function () {
-    it('should parse correctly', function () {
-      const str = `getTimes(List~T~, List~OT~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>, List<OT>)');
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTimes(List~T~, List~OT~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('+getTimes(List<T>, List<OT>)');
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTimes(List~T~, List~OT~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('-getTimes(List<T>, List<OT>)');
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTimes(List~T~, List~OT~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('#getTimes(List<T>, List<OT>)');
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTimes(List~T~, List~OT~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('~getTimes(List<T>, List<OT>)');
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTimes(List~T~, List~OT~)$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>, List<OT>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTimes(List~T~, List~OT~)*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>, List<OT>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTimes(List~T~, List~OT~)*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>, List<OT>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTimes(List~T~, List~OT~)$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes(List<T>, List<OT>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method parameter is a nested generic', function () {
-    it('should parse correctly', function () {
-      const str = `getTimetableList(List~List~T~~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimetableList(List<List<T>>)');
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTimetableList(List~List~T~~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('+getTimetableList(List<List<T>>)');
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTimetableList(List~List~T~~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('-getTimetableList(List<List<T>>)');
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTimetableList(List~List~T~~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('#getTimetableList(List<List<T>>)');
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTimetableList(List~List~T~~)`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('~getTimetableList(List<List<T>>)');
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTimetableList(List~List~T~~)$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimetableList(List<List<T>>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTimetableList(List~List~T~~)*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimetableList(List<List<T>>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTimetableList(List~List~T~~)*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimetableList(List<List<T>>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTimetableList(List~List~T~~)$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimetableList(List<List<T>>)');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method parameter is a composite generic', function () {
-    const methodNameAndParameters = 'getTimes(List~K, V~)';
-    const expectedMethodNameAndParameters = 'getTimes(List<K, V>)';
-    it('should parse correctly', function () {
-      const str = methodNameAndParameters;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(expectedMethodNameAndParameters);
-    });
-
-    it('should handle public visibility', function () {
-      const str = '+' + methodNameAndParameters;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        '+' + expectedMethodNameAndParameters
-      );
-    });
-
-    it('should handle private visibility', function () {
-      const str = '-' + methodNameAndParameters;
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        '-' + expectedMethodNameAndParameters
-      );
-    });
-
-    it('should handle protected visibility', function () {
-      const str = '#' + methodNameAndParameters;
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        '#' + expectedMethodNameAndParameters
-      );
-    });
-
-    it('should handle internal visibility', function () {
-      const str = '~' + methodNameAndParameters;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        '~' + expectedMethodNameAndParameters
-      );
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = methodNameAndParameters + '$';
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(expectedMethodNameAndParameters);
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = methodNameAndParameters + '*';
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(expectedMethodNameAndParameters);
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = methodNameAndParameters + '*$';
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(expectedMethodNameAndParameters);
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = methodNameAndParameters + '$*';
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(expectedMethodNameAndParameters);
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method return type is generic', function () {
-    it('should parse correctly', function () {
-      const str = `getTimes() List~T~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes() : List<T>');
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTimes() List~T~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('+getTimes() : List<T>');
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTimes() List~T~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('-getTimes() : List<T>');
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTimes() List~T~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('#getTimes() : List<T>');
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTimes() List~T~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('~getTimes() : List<T>');
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTimes() List~T~$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes() : List<T>');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTimes() List~T~*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes() : List<T>');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTimes() List~T~*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes() : List<T>');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTimes() List~T~$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe('getTimes() : List<T>');
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-
-  describe('when method return type is a nested generic', function () {
-    it('should parse correctly', function () {
-      const str = `getTimetableList() List~List~T~~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        'getTimetableList() : List<List<T>>'
-      );
-    });
-
-    it('should handle public visibility', function () {
-      const str = `+getTimetableList() List~List~T~~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        '+getTimetableList() : List<List<T>>'
-      );
-    });
-
-    it('should handle private visibility', function () {
-      const str = `-getTimetableList() List~List~T~~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        '-getTimetableList() : List<List<T>>'
-      );
-    });
-
-    it('should handle protected visibility', function () {
-      const str = `#getTimetableList() List~List~T~~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        '#getTimetableList() : List<List<T>>'
-      );
-    });
-
-    it('should handle internal visibility', function () {
-      const str = `~getTimetableList() List~List~T~~`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        '~getTimetableList() : List<List<T>>'
-      );
-    });
-
-    it('should return correct css for static classifier', function () {
-      const str = `getTimetableList() List~List~T~~$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        'getTimetableList() : List<List<T>>'
-      );
-      expect(classMember.getDisplayDetails().cssStyle).toBe(staticCssStyle);
-    });
-
-    it('should return correct css for abstract classifier', function () {
-      const str = `getTimetableList() List~List~T~~*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        'getTimetableList() : List<List<T>>'
-      );
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractCssStyle);
-    });
-
-    it('should return correct css for abstract static classifier', function () {
-      const str = `getTimetableList() List~List~T~~*$`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        'getTimetableList() : List<List<T>>'
-      );
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-
-    it('should return correct css for static abstract classifier', function () {
-      const str = `getTimetableList() List~List~T~~$*`;
-
-      const classMember = new ClassMember(str, 'method');
-      expect(classMember.getDisplayDetails().displayText).toBe(
-        'getTimetableList() : List<List<T>>'
-      );
-      expect(classMember.getDisplayDetails().cssStyle).toBe(abstractStaticCssStyle);
-    });
-  });
-});
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -82,10 +82,8 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 <class-body><<EOF>>             return "EOF_IN_STRUCT";
 <class-body>"[*]"               { return 'EDGE_STATE';}
 <class-body>[{]                 return "OPEN_IN_STRUCT";
-<class-body>"<<"                return 'ANNOTATION_START';
-<class-body>">>"                return 'ANNOTATION_END';
 <class-body>[\n]                /* nothing */
-<class-body>[^{}<>\n]*          { return "MEMBER";}
+<class-body>[^{}\n]*            { return "MEMBER";}

 <*>"cssClass"                   return 'CSSCLASS';
 <*>"callback"                   return 'CALLBACK';
@@ -297,21 +295,11 @@ classStatement
    | classIdentifier STRUCT_START members STRUCT_STOP   {yy.addMembers($1,$3);}
    | classIdentifier STRUCT_START STRUCT_STOP           {}
    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);}
-    | classIdentifier STRUCT_START NEWLINE annotationList members STRUCT_STOP   {for(const annotation of $4) { yy.addAnnotation($1, annotation); } yy.addMembers($1,$5);}
-    | classIdentifier STRUCT_START NEWLINE annotationList STRUCT_STOP           {for(const annotation of $4) { yy.addAnnotation($1, annotation); }}
-    | classIdentifier STRUCT_START annotationList members STRUCT_STOP   {for(const annotation of $3) { yy.addAnnotation($1, annotation); } yy.addMembers($1,$4);}
-    | classIdentifier STRUCT_START annotationList STRUCT_STOP           {for(const annotation of $3) { yy.addAnnotation($1, annotation); }}
-    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START NEWLINE annotationList members STRUCT_STOP {yy.setCssClass($1, $3); for(const annotation of $6) { yy.addAnnotation($1, annotation); } yy.addMembers($1,$7);}
-    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START NEWLINE annotationList STRUCT_STOP {yy.setCssClass($1, $3); for(const annotation of $6) { yy.addAnnotation($1, annotation); }}
-    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START annotationList members STRUCT_STOP {yy.setCssClass($1, $3); for(const annotation of $5) { yy.addAnnotation($1, annotation); } yy.addMembers($1,$6);}
-    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START annotationList STRUCT_STOP {yy.setCssClass($1, $3); for(const annotation of $5) { yy.addAnnotation($1, annotation); }}
    ;

 classIdentifier
    : CLASS className                                    {$$=$2; yy.addClass($2);}
    | CLASS className classLabel                         {$$=$2; yy.addClass($2);yy.setClassLabel($2, $3);}
-    | CLASS className annotationList                     {$$=$2; yy.addClass($2); for(const annotation of $3) { yy.addAnnotation($2, annotation); }}
-    | CLASS className classLabel annotationList          {$$=$2; yy.addClass($2);yy.setClassLabel($2, $3); for(const annotation of $4) { yy.addAnnotation($2, annotation); }}
    ;


@@ -322,12 +310,7 @@ emptyBody
    ;

 annotationStatement
-    : annotationList className  { for(const annotation of $1) { yy.addAnnotation($2, annotation); } }
-    ;
-
-annotationList
-    : ANNOTATION_START alphaNumToken ANNOTATION_END { $$ = [$2]; }
-    | annotationList ANNOTATION_START alphaNumToken ANNOTATION_END { $1.push($3); $$ = $1; }
+    : ANNOTATION_START alphaNumToken ANNOTATION_END className  { yy.addAnnotation($4,$2); }
    ;

 members
--- a/packages/mermaid/src/diagrams/class/shapeUtil.ts
+++ b/packages/mermaid/src/diagrams/class/shapeUtil.ts
@@ -36,36 +36,8 @@ export async function textHelper<T extends SVGGraphicsElement>(

  annotationGroup = shapeSvg.insert('g').attr('class', 'annotation-group text');
  if (node.annotations.length > 0) {
-    let yOffset = 0;
-    const annotationElements: any[] = [];
-    let maxAnnotationWidth = 0;
-
-    // First pass: create all annotation elements and find the maximum width
-    for (const annotation of node.annotations) {
-      const annotationEl = annotationGroup.insert('g').attr('class', 'annotation-text');
-      const height = await addText(
-        annotationEl,
-        { text: `«${annotation}»` } as unknown as ClassMember,
-        0
-      );
-      const annotationBBox = annotationEl.node()!.getBBox();
-
-      annotationElements.push({
-        element: annotationEl,
-        width: annotationBBox.width,
-        height: height,
-        yOffset: yOffset,
-      });
-
-      maxAnnotationWidth = Math.max(maxAnnotationWidth, annotationBBox.width);
-      yOffset += height + TEXT_PADDING;
-    }
-
-    // Second pass: center each annotation relative to the maximum width
-    for (const annotation of annotationElements) {
-      const centerOffset = (maxAnnotationWidth - annotation.width) / 2;
-      annotation.element.attr('transform', `translate(${centerOffset}, ${annotation.yOffset})`);
-    }
+    const annotation = node.annotations[0];
+    await addText(annotationGroup, { text: `«${annotation}»` } as unknown as ClassMember, 0);

    const annotationGroupBBox = annotationGroup.node()!.getBBox();
    annotationGroupHeight = annotationGroupBBox.height;
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -15,7 +15,7 @@ title: Animal example
 classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
-    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
@@ -44,7 +44,7 @@ classDiagram
 UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.
 A single instance of a class in the diagram contains three compartments:

- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation/stereotype text describing the nature of the class.
+- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class.
 - The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
 - The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.

@@ -349,7 +349,7 @@ classDiagram
    Galaxy --> "many" Star : Contains
 ```

-## Annotations on classes (stereotypes)
+## Annotations on classes

 It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:

@@ -358,22 +358,38 @@ It is possible to annotate classes with markers to provide additional metadata a
 - `<<Service>>` To represent a service class
 - `<<Enumeration>>` To represent an enum

-Annotations are defined within the opening `<<` and closing `>>`. There are multiple ways to add an annotation to a class, and any of them will output the same result:
+Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same:

- **Inline with the class definition** (Recommended for consistency):
+> **Tip:**  
+> In Mermaid class diagrams, annotations like `<<interface>>` can be attached in two ways:
+>
+> - **Inline with the class definition** (Recommended for consistency):
+>
+>   ```mermaid-example
+>   classDiagram
+>     class Shape <<interface>>
+>   ```
+>
+> - **Separate line after the class definition**:
+>
+>   ```mermaid-example
+>   classDiagram
+>     class Shape
+>     <<interface>> Shape
+>   ```
+>
+> Both methods are fully supported and produce identical diagrams.  
+> However, it is recommended to use the **inline style** for better readability and consistent formatting across diagrams.

-  ```mermaid-example
-  classDiagram
-    class Shape <<interface>>
-  ```
+- In a **_separate line_** after a class is defined:

- **Separate line after the class definition**:
-
-  ```mermaid-example
-  classDiagram
-    class Shape
-    <<interface>> Shape
-  ```
+```mermaid-example
+classDiagram
+class Shape
+<<interface>> Shape
+Shape : noOfVertices
+Shape : draw()
+```

 - In a **_nested structure_** along with the class definition:

@@ -395,19 +411,6 @@ class Color{

 ```

-For the case of multiple annotations the syntax is similar, you can add other annotations on the same line, or in a nested class definition add an annotation on a new line, as follows:
-
-```mermaid-example
-classDiagram
-class Shape{
-    <<interface>>
-    <<injected>>
-    noOfVertices
-    draw()
-}
-
-```
-
 ## Comments

 Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.