diff --git a/docs/getting-started/theming.md b/docs/getting-started/theming.md
index dca2e7211..80a9a15dd 100644
--- a/docs/getting-started/theming.md
+++ b/docs/getting-started/theming.md
@@ -336,7 +336,23 @@ In the following examples, the directive `init` is used, with the `theme` being
 
 ### Flowchart (beta)
 ```
-mermaid
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+        flowchart TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[Another]
+          C ==>|One| D[Laptop]
+          C x--x|Two| E[iPhone]
+          C o--o|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -355,10 +371,26 @@ mermaid
 ```
 
 ### Sequence diagram
-
+```
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+        sequenceDiagram
+          autonumber
+          par Action 1
+            Alice->>John: Hello John, how are you?
+          and Action 2
+            Alice->>Bob: Hello Bob, how are you?
+          end
+          Alice->>+John: Hello John, how are you?
+          Alice->>+John: John, can you hear me?
+          John-->>-Alice: Hi Alice, I can hear you!
+          Note right of John: John is perceptive
+          John-->>-Alice: I feel great!
+              loop Every minute
+                John-->Alice: Great!
+            end
+```
 ```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-
         sequenceDiagram
           autonumber
           par Action 1
@@ -376,8 +408,32 @@ mermaid
             end
 ```
 
-### class diagram
+### Class diagram
+```
+%%{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()
+	}
+```
 ```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 
@@ -468,7 +524,6 @@ gantt
 
 ### State diagram
 ```
-mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
       stateDiagram
         [*] --> Active