diff --git a/Flowchart.md b/Flowchart.md new file mode 100644 index 0000000..491dae1 --- /dev/null +++ b/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 + + +``` \ No newline at end of file