diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index 7fe2e3a73..66c852a14 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -806,7 +806,8 @@ const addNodeFromVertex = (
       labelStyle: '',
       parentId,
       padding: config.flowchart?.padding || 8,
-      cssStyles: vertex.styles.join(' '),
+      cssStyles: vertex.styles,
+      cssCompiledStyles: getCompiledStyles(vertex.classes),
       cssClasses: vertex.classes.join(' '),
       shape: getTypeFromVertex(vertex),
       dir: vertex.dir,
@@ -820,6 +821,22 @@ const addNodeFromVertex = (
   }
 };
 
+function getCompiledStyles(classDefs: string[]) {
+  let compiledStyles: string[] = [];
+  for (const customClass of classDefs) {
+    const cssClass = classes.get(customClass);
+    if (cssClass) {
+      if (cssClass.styles) {
+        compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])];
+      }
+      if (cssClass.textStyles) {
+        compiledStyles = [...compiledStyles, ...(cssClass.textStyles ?? [])];
+      }
+    }
+  }
+  return compiledStyles;
+}
+
 export const getData = () => {
   const config = getConfig();
   const nodes: Node[] = [];
@@ -844,7 +861,7 @@ export const getData = () => {
       labelStyle: '',
       parentId: parentDB.get(subGraph.id),
       padding: config.flowchart?.padding || 8,
-      cssStyles: '',
+      cssStyles: [],
       cssClasses: '',
       shape: 'rect',
       dir: subGraph.dir,