#1542 Adding gantt to showcases

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

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

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

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

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

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

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