diff --git a/cypress/integration/rendering/classDiagram-v3.spec.js b/cypress/integration/rendering/classDiagram-v3.spec.js
index cccb185f7..626d6fcea 100644
--- a/cypress/integration/rendering/classDiagram-v3.spec.js
+++ b/cypress/integration/rendering/classDiagram-v3.spec.js
@@ -990,4 +990,42 @@ class C13["With Città foreign language"]
       { logLevel: 1, htmlLabels: true, look: 'handDrawn' }
     );
   });
+  it('should render a full class diagram using elk', () => {
+    imgSnapshotTest(
+      `
+---
+  config:
+    layout: elk
+---
+    classDiagram
+      note "I love this diagram!\nDo you love it?"
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      note for Class10 "Cool class\nI said it's very cool class!"
+      `,
+      { logLevel: 1, htmlLabels: true }
+    );
+  });
 });
diff --git a/packages/mermaid/scripts/docs.spec.ts b/packages/mermaid/scripts/docs.spec.ts
index 68677d4c9..4ed61e9ff 100644
--- a/packages/mermaid/scripts/docs.spec.ts
+++ b/packages/mermaid/scripts/docs.spec.ts
@@ -172,6 +172,7 @@ This Markdown should be kept.
         "| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
         | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
         | Card                              | Notched Rectangle      | \`notch-rect\`   | Represents a card              | \`card\`, \`notched-rectangle\`                                      |
+        | Class Box                         | Class Box              | \`classBox\`     | Class Box                      | \`class-box\`                                                      |
         | Collate                           | Hourglass              | \`hourglass\`    | Represents a collate operation | \`collate\`, \`hourglass\`                                           |
         | Com Link                          | Lightning Bolt         | \`bolt\`         | Communication link             | \`com-link\`, \`lightning-bolt\`                                     |
         | Comment                           | Curly Brace            | \`brace\`        | Adds a comment                 | \`brace-l\`, \`comment\`                                             |
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index 766a87540..003d09fa1 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -494,7 +494,7 @@ class C13["With Città foreign language"]
         ],
         methods: [],
         annotations: [],
-        cssClasses: [],
+        cssClasses: ['default'],
       });
 
       expect(classDb.getClasses().size).toBe(3);
@@ -504,7 +504,7 @@ class C13["With Città foreign language"]
           "cssClasses": [
             "default",
           ],
-          "domId": "classId-Student-134",
+          "domId": "classId-Student-141",
           "id": "Student",
           "label": "Student",
           "members": [