Flowchart.md

@@ -0,0 +1,192 @@
+## Simple directed graph example
+```mermaid
+graph TB;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+## Flowchart left to right
+```mermaid
+flowchart LR;
+    Flow1[Flowcharts are easy] --> Flow2[and fast];
+```
+
+### Flowchart top to bottom
+```mermaid
+flowchart TB;
+    Flow1[Flowcharts are flexible] --> Flow2[and informative];
+```
+
+### Flowchart bottom to top
+```mermaid
+flowchart BT;
+    Flow1[Data Acquisition Unit] --> |USB-1.1| Flow2[PC];
+```
+
+### Flowchart right to left
+```mermaid
+flowchart RL;
+    Flow1[Flowcharts flow] --> Flow2[in any direction];
+```
+
+### Directed Graph
+```mermaid
+flowchart TB;
+    Flow1[Test Computer] --> |JTAG| Flow2[Motor Controller-DUT];
+    Flow1[Test Computer] --> |USB C| Flow3[Test Fixture];
+    Flow3[Test Fixture]  --> Flow2[Engine Controller]
+    Flow2[Motor Controller-DUT] --> |Production Cable| Flow4[Production Motor]    
+```
+
+## Shapes
+
+```mermaid
+flowchart TB;
+    RectRound1(rounded rectangles)
+    Rect1[rectangle]
+    Pill1([pill shaped])
+    FancyRect1[[fancy rectangle]]
+    DataBase1[(database)]
+    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}}
+    Flag1>Flag]
+    Rhombus1{rhombus}
+    Parallelagram1[/Parallelagram/]
+    Parallelagram2[\Parallelagram-R2L\]
+    Trapezoid1[/Trapezoid 1\]
+    Trapezoid2[\Trapezoid 2/]
+```
+
+## Links
+```mermaid
+    flowchart LR;
+        Start[Line]    --- End[Line];
+        EndR2L[Line]   --> StartR2L[Arrow];
+        Start4[Dotted] -.- End4[Line];
+        StartThick2[Thick] === EndThick2[Line];
+        StartThick[Thick] ==> EndThick[Arrow];
+        Chain1b[Chain] --> Chain2b[Link] --> Chain3b[Nodes];
+        Start2[Line]   --> |text in link| End2[Arrow];
+        Start3[Line]   --- |text in link| End3[Line];
+        Start5[Dotted] -.- |text in link| End5[Line];
+        StartThick3[Thick] ==> |text in link| EndThick3[Arrow];
+        StartThick4[Thick] === |text in link| EndThick4[Line];
+        Chain1[Chain] -- text in link --> Chain2[Link] -- text in link --> Chain3[Nodes];
+        a --> b & c --> d;    
+        A & B --> C & D;
+        StartCircle[Line] --o EndCircle[Circle]; 
+        StartCross[Line]  --x EndCross[Cross];
+```
+Multiple lines
+```mermaid
+    flowchart LR;
+    A o--o B <--> C x--x D;
+        
+```
+
+Minimum length
+```mermaid
+    flowchart LR;
+        A --> B;
+        B --> C;
+        B ----> D;
+        B ------> E;
+        C --------> F;
+        
+```
+
+## Special characters
+```mermaid
+    flowchart LR;
+        A["use quotes to create a string"];
+        B["quotes, quotation example #quot; #quot;"];
+        C["use quotes to display (special characters)"];
+        D["entity code: #9829;"]
+        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(White)
+        id2(Yellow)
+        id3(Red);
+        id4(Pink);
+        id5(Teal);
+        id6(Green);
+        id7(Grey);
+        id8(Blue);
+        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
+        
+        
+```