Flowchart.md

@@ -52,6 +52,21 @@ flowchart TB;
     Circle1((circle))
 ```
 
+## Subgraphs
+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+```
+
 ```mermaid
 flowchart TB;
     Hex1{{hexagon are the bestagons}}
@@ -100,6 +115,7 @@ Minimum length
         C --------> F;
         
 ```
+
 ## Special characters
 ```mermaid
     flowchart LR;
@@ -110,3 +126,65 @@ Minimum length
         E["Arrow entity codes: #8592; #8593; #8594; #8595; #8596; #8629;"]
         F["#8719; #8721; #8734;"]
 ```
+
+## Subgraphs
+```mermaid
+    flowchart TB
+        c1-->a2
+        subgraph one
+            a1-->a2
+        end
+        subgraph two
+            b1-->b2
+        end
+        subgraph three [FOO]
+            c1-->c2
+        end
+```
+
+## Styling a node
+```mermaid
+    flowchart LR
+        subgraph TOP
+            direction TB
+            subgraph B1
+                direction RL
+                i1 -->f1
+            end
+            subgraph B2
+                direction BT
+                i2 -->f2
+            end
+        end
+        A --> TOP --> B
+        B1 --> B2
+```
+
+## Node Style
+```mermaid  
+    flowchart LR
+        id1(Start)-->id2(Stop)
+        style id1 fill:#f9f,stroke:#333,stroke-width:4px
+        style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+## Node colors
+```mermaid  
+    flowchart LR
+        id1(Start)
+        id2(Stop)
+        id3(foo);
+        id4(bar);
+        id5(baz);
+        id6(ddd);
+        style id1 fill:#fff,stroke:#333,stroke-width:4px
+        style id2 fill:#ff8,stroke:#333,stroke-width:4px
+        style id3 fill:#f88,stroke:#333,stroke-width:4px
+        style id4 fill:#f8f,stroke:#333,stroke-width:4px
+        style id5 fill:#8ff,stroke:#333,stroke-width:4px
+        style id6 fill:#8f8,stroke:#333,stroke-width:4px
+        style id7 fill:#888,stroke:#333,stroke-width:4px
+        style id8 fill:#88f,stroke:#333,stroke-width:4px
+        
+        
+```