diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 4f56d9112..7ebcb53ca 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.2.0",
+  "version": "10.2.0-rc.1",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
diff --git a/packages/mermaid/src/diagrams/class/classParser.spec.ts b/packages/mermaid/src/diagrams/class/classParser.spec.ts
new file mode 100644
index 000000000..c479b8272
--- /dev/null
+++ b/packages/mermaid/src/diagrams/class/classParser.spec.ts
@@ -0,0 +1,78 @@
+import { setConfig } from '../../config.js';
+import classDB from './classDb.js';
+// @ts-ignore - no types in jison
+import classDiagram from './parser/classDiagram.jison';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('when parsing class diagram', function () {
+  beforeEach(function () {
+    classDiagram.parser.yy = classDB;
+    classDiagram.parser.yy.clear();
+  });
+
+  it('should parse diagram with direction', () => {
+    classDiagram.parser.parse(`classDiagram
+        direction TB
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides`);
+
+    expect(Object.keys(classDB.getClasses()).length).toBe(3);
+    expect(classDB.getClasses().Student).toMatchInlineSnapshot(`
+      {
+        "annotations": [],
+        "cssClasses": [],
+        "domId": "classId-Student-0",
+        "id": "Student",
+        "label": "Student",
+        "members": [
+          "-idCard : IdCard",
+        ],
+        "methods": [],
+        "type": "",
+      }
+    `);
+    expect(classDB.getRelations().length).toBe(2);
+    expect(classDB.getRelations()).toMatchInlineSnapshot(`
+      [
+        {
+          "id1": "Student",
+          "id2": "IdCard",
+          "relation": {
+            "lineType": 0,
+            "type1": "none",
+            "type2": 0,
+          },
+          "relationTitle1": "1",
+          "relationTitle2": "1",
+          "title": "carries",
+        },
+        {
+          "id1": "Student",
+          "id2": "Bike",
+          "relation": {
+            "lineType": 0,
+            "type1": "none",
+            "type2": 0,
+          },
+          "relationTitle1": "1",
+          "relationTitle2": "1",
+          "title": "rides",
+        },
+      ]
+    `);
+  });
+});
diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index 0e8bc8163..7afba66bc 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -200,7 +200,6 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 
 start
     : mermaidDoc
-    | direction
     | directive start
     | statements
     ;
@@ -272,6 +271,7 @@ statement
     | clickStatement
     | cssClassStatement
     | noteStatement
+    | direction
     | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
     | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
     | acc_descr_multiline_value  { $$=$1.trim();yy.setAccDescription($$); }