From 239fad94ee142a114f8c3c710c1072c0821edbe4 Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Mon, 4 Dec 2023 13:28:31 -0800
Subject: [PATCH 01/13] Grammar/rendering for setting style on class node

---
 .../rendering/classDiagram-v2.spec.js         | 10 ++++++++
 docs/syntax/classDiagram.md                   | 23 ++++++++++++++++-
 packages/mermaid/src/dagre-wrapper/nodes.js   |  1 +
 .../mermaid/src/diagrams/class/classDb.ts     | 20 +++++++++++++++
 .../class/classDiagram-styles.spec.js         | 13 ++++++++++
 .../src/diagrams/class/classRenderer-v2.ts    |  2 +-
 .../mermaid/src/diagrams/class/classTypes.ts  |  1 +
 .../diagrams/class/parser/classDiagram.jison  | 25 ++++++++++++++++++-
 8 files changed, 92 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 37e9cada02..20a1aea0ab 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -571,4 +571,14 @@ class C13["With Città foreign language"]
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
+  it('should render a simple class diagram with style definition', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        class Class10
+        style Class10 fill:#f9f,stroke:#333,stroke-width:4px
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
 });
diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index 2f2c3da888..b2d5a8c897 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -768,7 +768,28 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ### Styling a node
 
-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
+It is possible to apply specific styles such as a thicker border or a different background color to a node.
+
+```mermaid-example
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+```mermaid
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+#### Classes
+
+More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
+should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
 
 ```html
 <style>
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 325322798c..f990db9cce 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -1013,6 +1013,7 @@ const class_box = (parent, node) => {
   });
 
   rect
+    .attr('style', node.style)
     .attr('class', 'outer title-state')
     .attr('x', -maxWidth / 2 - halfPadding)
     .attr('y', -(maxHeight / 2) - halfPadding)
diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index 312dda7a69..effcbe1005 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -84,6 +84,7 @@ export const addClass = function (_id: string) {
     methods: [],
     members: [],
     annotations: [],
+    styles: [],
     domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
   } as ClassNode;
 
@@ -454,6 +455,24 @@ export const addClassesToNamespace = function (id: string, classNames: string[])
   }
 };
 
+export const setCssStyle = function (id: string, style: string[]) {
+  if (style !== undefined && style !== null) {
+    const thisClass = classes[id];
+    if (thisClass !== undefined) {
+      style.forEach(function (s) {
+        if (s.includes(',')) {
+          const styles = s.split(',');
+          styles.forEach(function (newStyle) {
+            thisClass.styles.push(newStyle);
+          });
+        } else {
+          thisClass.styles.push(s);
+        }
+      });
+    }
+  }
+};
+
 export default {
   setAccTitle,
   getAccTitle,
@@ -490,4 +509,5 @@ export default {
   addClassesToNamespace,
   getNamespace,
   getNamespaces,
+  setCssStyle,
 };
diff --git a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
index a693fbbeab..9571884014 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
+++ b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
@@ -56,5 +56,18 @@ describe('class diagram, ', function () {
       expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
       expect(parser.yy.getClass('Class02').cssClasses[0]).toBe('exClass');
     });
+    it('should be possible to apply a style to an individual node', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class01\n class Class02\n style Class01 fill:#f9f,stroke:#333,stroke-width:4px';
+
+      parser.parse(str);
+
+      const styleElements = parser.yy.getClass('Class01').styles;
+
+      expect(styleElements[0]).toBe('fill:#f9f');
+      expect(styleElements[1]).toBe('stroke:#333');
+      expect(styleElements[2]).toBe('stroke-width:4px');
+    });
   });
 });
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
index 97106a169d..a01b1427b5 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -104,7 +104,7 @@ export const addClasses = function (
        */
       const cssClassStr = vertex.cssClasses.join(' ');
 
-      const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
+      const styles = getStylesFromArray(vertex.styles);
 
       // Use vertex id as text in the box if no text is provided by the graph definition
       const vertexText = vertex.label ?? vertex.id;
diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts
index f112dd4dde..3b6c3694ed 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.ts
@@ -15,6 +15,7 @@ export interface ClassNode {
   linkTarget?: string;
   haveCallback?: boolean;
   tooltip?: string;
+  styles?: string[];
 }
 
 export type Visibility = '#' | '+' | '~' | '-' | '';
diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index b1c2fad0ee..70e9753f14 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -60,6 +60,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 <string>["]                     this.popState();
 <string>[^"]*                   return "STR";
 <*>["]                          this.begin("string");
+"style"                         return 'STYLE';
 
 <INITIAL,namespace>"namespace"  { this.begin('namespace'); return 'NAMESPACE'; }
 <namespace>\s*(\r?\n)+          { this.popState(); return 'NEWLINE'; }
@@ -127,6 +128,10 @@ line was introduced with 'click'.
 <*>\-                           return 'MINUS';
 <*>"."                          return 'DOT';
 <*>\+                           return 'PLUS';
+":"                             return 'COLON';
+","                             return 'COMMA';
+\#                              return 'BRKT';
+"#"                             return 'BRKT';
 <*>\%                           return 'PCT';
 <*>"="                          return 'EQUALS';
 <*>\=                           return 'EQUALS';
@@ -198,6 +203,7 @@ line was introduced with 'click'.
 [\uFFD2-\uFFD7\uFFDA-\uFFDC]
                                 return 'UNICODE_TEXT';
 <*>\s                           return 'SPACE';
+\s                              return 'SPACE';
 <*><<EOF>>                      return 'EOF';
 
 /lex
@@ -254,6 +260,7 @@ statement
     | memberStatement
     | annotationStatement
     | clickStatement
+    | styleStatement
     | cssClassStatement
     | noteStatement
     | direction
@@ -365,10 +372,26 @@ clickStatement
     | CLICK className HREF STR STR LINK_TARGET          {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);}
     ;
 
+styleStatement
+    :STYLE ALPHA stylesOpt                              {$$ = $STYLE;yy.setCssStyle($2,$stylesOpt);}
+    ;
+
 cssClassStatement
-    : CSSCLASS STR alphaNumToken  {yy.setCssClass($2, $3);}
+    : CSSCLASS STR stylesOpt                            {yy.setCssClass($2, $3);}
+    ;
+
+stylesOpt
+    : style {$$ = [$style]}
+    | stylesOpt COMMA style {$stylesOpt.push($style);$$ = $stylesOpt;}
     ;
 
+style
+    : styleComponent
+    | style styleComponent  {$$ = $style + $styleComponent;}
+    ;
+
+styleComponent: ALPHA | NUM | COLON | UNIT | SPACE | BRKT | STYLE | PCT | LABEL;
+
 commentToken   : textToken | graphCodeTokens ;
 
 textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFAULT;

From ca386ab5970548eb095bf3eb326b803be71e3dc3 Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Tue, 5 Dec 2023 07:10:45 -0800
Subject: [PATCH 02/13] Update docs

---
 .../mermaid/src/docs/syntax/classDiagram.md   | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index f02ae67be9..242a8f8ce5 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -145,7 +145,7 @@ class BankAccount{
 
 Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
 
-Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
+Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function (note that any references to the class later in diagram code is used without the type )
 
 ```mermaid-example
 classDiagram
@@ -520,7 +520,28 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ### Styling a node
 
-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
+It is possible to apply specific styles such as a thicker border or a different background color to a node.
+
+```mermaid-example
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+```mermaid
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+#### Classes
+
+More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
+should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
 
 ```html
 <style>

From 02b2d71eb3eb4c7b6e81348528ae85639fe1046c Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Tue, 5 Dec 2023 07:57:39 -0800
Subject: [PATCH 03/13] Update packages/mermaid/src/diagrams/class/classDb.ts

Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>
---
 .../mermaid/src/diagrams/class/classDb.ts     | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index 2141c93a28..4b2231dc14 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -457,20 +457,16 @@ export const addClassesToNamespace = function (id: string, classNames: string[])
   }
 };
 
-export const setCssStyle = function (id: string, style: string[]) {
-  if (style !== undefined && style !== null) {
-    const thisClass = classes[id];
-    if (thisClass !== undefined) {
-      style.forEach(function (s) {
-        if (s.includes(',')) {
-          const styles = s.split(',');
-          styles.forEach(function (newStyle) {
-            thisClass.styles.push(newStyle);
-          });
-        } else {
-          thisClass.styles.push(s);
-        }
-      });
+export const setCssStyle = function (id: string, styles: string[]) {
+  const thisClass = classes[id];
+  if (!styles || !thisClass) {
+    return;
+  }
+  for (const s of styles) {
+    if (s.includes(',')) {
+      thisClass.styles = thisClass.styles.concat(s.split(','));
+    } else {
+      thisClass.styles.push(s);
     }
   }
 };

From b51ca4fb15317a188a3e6a65e02e01fe93270cd9 Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Sun, 10 Dec 2023 13:25:16 -0800
Subject: [PATCH 04/13] Address potential undefined

---
 packages/mermaid/src/diagrams/class/classDb.ts    | 4 ++--
 packages/mermaid/src/diagrams/class/classTypes.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index 4b2231dc14..bf326970e2 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -464,9 +464,9 @@ export const setCssStyle = function (id: string, styles: string[]) {
   }
   for (const s of styles) {
     if (s.includes(',')) {
-      thisClass.styles = thisClass.styles.concat(s.split(','));
+      thisClass.styles = [...thisClass.styles, ...s.split(',')];
     } else {
-      thisClass.styles.push(s);
+      thisClass.styles?.push(s);
     }
   }
 };
diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts
index 3b6c3694ed..85be3a4e87 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.ts
@@ -10,12 +10,12 @@ export interface ClassNode {
   members: ClassMember[];
   annotations: string[];
   domId: string;
+  styles: string[];
   parent?: string;
   link?: string;
   linkTarget?: string;
   haveCallback?: boolean;
   tooltip?: string;
-  styles?: string[];
 }
 
 export type Visibility = '#' | '+' | '~' | '-' | '';

From b92b344844256287f038c7455210ca8546f9f308 Mon Sep 17 00:00:00 2001
From: jgreywolf <jgreywolf@users.noreply.github.com>
Date: Sun, 10 Dec 2023 21:28:26 +0000
Subject: [PATCH 05/13] Update docs

---
 docs/syntax/classDiagram.md | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index b2d5a8c897..e600554138 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -242,7 +242,7 @@ class BankAccount{
 
 Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
 
-Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
+Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function (note that any references to the class later in diagram code is used without the type )
 
 ```mermaid-example
 classDiagram
@@ -786,6 +786,22 @@ classDiagram
   style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
+```mermaid-example
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+```mermaid
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
 #### Classes
 
 More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that

From 24957f44df150f7a9914023524228d0fcaa9942f Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Mon, 11 Dec 2023 04:44:53 -0800
Subject: [PATCH 06/13] Update packages/mermaid/src/diagrams/class/classDb.ts

Co-authored-by: Alois Klink <alois@mermaidchart.com>
---
 packages/mermaid/src/diagrams/class/classDb.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index bf326970e2..abfc238dc2 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -466,7 +466,7 @@ export const setCssStyle = function (id: string, styles: string[]) {
     if (s.includes(',')) {
       thisClass.styles = [...thisClass.styles, ...s.split(',')];
     } else {
-      thisClass.styles?.push(s);
+      thisClass.styles.push(s);
     }
   }
 };

From 3dce04e0a9414e7bb1c8f1cd51bb1ea26b176719 Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Mon, 11 Dec 2023 04:45:16 -0800
Subject: [PATCH 07/13] Update packages/mermaid/src/docs/syntax/classDiagram.md

Co-authored-by: Alois Klink <alois@mermaidchart.com>
---
 packages/mermaid/src/docs/syntax/classDiagram.md | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index 242a8f8ce5..5f08c2d429 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -530,14 +530,6 @@ classDiagram
   style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
-```mermaid
-classDiagram
-  class Animal
-  class Mineral
-  style Animal fill:#f9f,stroke:#333,stroke-width:4px
-  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-```
-
 #### Classes
 
 More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that

From 668bf327d5d97d34d8d8ecfd204de79838233ef2 Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Mon, 11 Dec 2023 04:45:48 -0800
Subject: [PATCH 08/13] Update packages/mermaid/src/diagrams/class/classDb.ts

Co-authored-by: Alois Klink <alois@mermaidchart.com>
---
 packages/mermaid/src/diagrams/class/classDb.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index abfc238dc2..5600a4006d 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -464,7 +464,7 @@ export const setCssStyle = function (id: string, styles: string[]) {
   }
   for (const s of styles) {
     if (s.includes(',')) {
-      thisClass.styles = [...thisClass.styles, ...s.split(',')];
+      thisClass.styles.push(...s.split(','));
     } else {
       thisClass.styles.push(s);
     }

From 70b4a374cda3502d1d9ff9069bd15a063b9a795f Mon Sep 17 00:00:00 2001
From: jgreywolf <jgreywolf@users.noreply.github.com>
Date: Mon, 11 Dec 2023 12:48:49 +0000
Subject: [PATCH 09/13] Update docs

---
 docs/syntax/classDiagram.md | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index e600554138..a07078a64c 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -786,22 +786,6 @@ classDiagram
   style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
-```mermaid-example
-classDiagram
-  class Animal
-  class Mineral
-  style Animal fill:#f9f,stroke:#333,stroke-width:4px
-  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-```
-
-```mermaid
-classDiagram
-  class Animal
-  class Mineral
-  style Animal fill:#f9f,stroke:#333,stroke-width:4px
-  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-```
-
 #### Classes
 
 More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that

From 237518ba3bdf4620d8be145da0c06a3c7155802b Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Thu, 14 Dec 2023 06:47:37 -0800
Subject: [PATCH 10/13] Update classDiagram.md

---
 packages/mermaid/src/docs/syntax/classDiagram.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index a808d9317b..12143b1186 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -520,7 +520,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ### Styling a node
 
-It is possible to apply specific styles such as a thicker border or a different background color to a node.
+It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.(v<MERMAID_RELEASE_VERSION>+)
 
 ```mermaid-example
 classDiagram

From 1babceb63c5ea281b1499655b188c299520b8379 Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Thu, 14 Dec 2023 06:48:13 -0800
Subject: [PATCH 11/13] Update classDiagram.md

---
 packages/mermaid/src/docs/syntax/classDiagram.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index 12143b1186..95ad0db63c 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -518,9 +518,9 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node
+### Styling a node (v<MERMAID_RELEASE_VERSION>+)
 
-It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.(v<MERMAID_RELEASE_VERSION>+)
+It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
 
 ```mermaid-example
 classDiagram

From 7ec5bdcca41d89b7034df9d76ccd8d8c07fd22b5 Mon Sep 17 00:00:00 2001
From: jgreywolf <jgreywolf@users.noreply.github.com>
Date: Thu, 14 Dec 2023 14:52:40 +0000
Subject: [PATCH 12/13] Update docs

---
 docs/syntax/classDiagram.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index 1b9be0943c..b20ccccb30 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -766,9 +766,9 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node
+### Styling a node (v\<MERMAID_RELEASE_VERSION>+)
 
-It is possible to apply specific styles such as a thicker border or a different background color to a node.
+It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
 
 ```mermaid-example
 classDiagram

From c5220bd92d2e0ead5728f43d16387e8947d0c4e2 Mon Sep 17 00:00:00 2001
From: Justin Greywolf <jgreywolf@users.noreply.github.com>
Date: Mon, 18 Dec 2023 06:27:10 -0800
Subject: [PATCH 13/13] Fixed parser/tests

---
 packages/mermaid/src/diagrams/class/classDb.ts                | 2 +-
 packages/mermaid/src/diagrams/class/classDiagram.spec.ts      | 1 +
 packages/mermaid/src/diagrams/class/parser/classDiagram.jison | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index 5600a4006d..0e18d1e0fa 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -215,7 +215,7 @@ export const cleanupLabel = function (label: string) {
 };
 
 /**
- * Called by parser when a special node is found, e.g. a clickable element.
+ * Called by parser when assigning cssClass to a class
  *
  * @param ids - Comma separated list of ids
  * @param className - Class to add
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index fb719658ec..e3dbb17f14 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -409,6 +409,7 @@ class C13["With Città foreign language"]
             },
           ],
           "methods": [],
+          "styles": [],
           "type": "",
         }
       `);
diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index 70e9753f14..ed4e72027f 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -377,7 +377,7 @@ styleStatement
     ;
 
 cssClassStatement
-    : CSSCLASS STR stylesOpt                            {yy.setCssClass($2, $3);}
+    : CSSCLASS STR ALPHA                            {yy.setCssClass($2, $3);}
     ;
 
 stylesOpt