diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 8f0e3331b..fc7857420 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -78,7 +78,7 @@ stateDiagram-v2
       <div class="mermaid" style="width: 50%; height: 20%;">
         %%{init: {'theme': 'base'}}%%
 
-        graph TB
+        flowchart TB
         subgraph apa
           a --> A %% comment
           a --> a{apa} %% comment
diff --git a/cypress/platform/showcase_base.html b/cypress/platform/showcase_base.html
index cce19c9d3..a7f2e56e2 100644
--- a/cypress/platform/showcase_base.html
+++ b/cypress/platform/showcase_base.html
@@ -93,6 +93,31 @@
                 John-->Alice: Great!
             end
       </div>
+      <div class="mermaid width height" >
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
       <div class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
diff --git a/cypress/platform/showcase_dark.html b/cypress/platform/showcase_dark.html
index 76f7faab8..8cec30f58 100644
--- a/cypress/platform/showcase_dark.html
+++ b/cypress/platform/showcase_dark.html
@@ -88,6 +88,31 @@
               loop Every minute
                 John-->Alice: Great!
             end
+      </div>
+            <div class="mermaid width height" >
+%%{init: {'theme':'dark'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
       </div>
       <div class="mermaid width height">
 gantt
diff --git a/cypress/platform/showcase_default.html b/cypress/platform/showcase_default.html
index 18d98ddfa..1b8c88765 100644
--- a/cypress/platform/showcase_default.html
+++ b/cypress/platform/showcase_default.html
@@ -88,6 +88,29 @@
                 John-->Alice: Great!
             end
       </div>
+      <div class="mermaid width height" >
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
       <div class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
diff --git a/cypress/platform/showcase_forest.html b/cypress/platform/showcase_forest.html
index 6f85f3686..196e697ee 100644
--- a/cypress/platform/showcase_forest.html
+++ b/cypress/platform/showcase_forest.html
@@ -89,6 +89,31 @@
                 John-->Alice: Great!
             end
       </div>
+      <div class="mermaid width height" >
+%%{init: {'theme':'forest'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
       <div class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
diff --git a/cypress/platform/showcase_neutral.html b/cypress/platform/showcase_neutral.html
index 710f96e80..997224b12 100644
--- a/cypress/platform/showcase_neutral.html
+++ b/cypress/platform/showcase_neutral.html
@@ -89,6 +89,31 @@
                 John-->Alice: Great!
             end
       </div>
+      <div class="mermaid width height" >
+%%{init: {'theme':'neutral'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
       <div class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
diff --git a/docs/theming.md b/docs/theming.md
index a7d0c9b2a..f8571b2ca 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -143,6 +143,35 @@ When adjusting a theme it might be helpful to look at the theme with these diagr
             end
 ```
 
+### class diagram
+
+```mermaid
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+
+```
+
 ### Gantt
 
 ```mermaid