diff --git a/Flowchart.md b/Flowchart.md deleted file mode 100644 index 491dae1..0000000 --- a/Flowchart.md +++ /dev/null @@ -1,192 +0,0 @@ -## 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 diff --git a/Motor-diagram.svg b/Motor-diagram.svg new file mode 100644 index 0000000..0460879 --- /dev/null +++ b/Motor-diagram.svg @@ -0,0 +1,4 @@ + + + +
System
System
Input/Output
Input/Output
User
User
4x4 keypad
matrix
4x4 keypad...
Motor
driver
Motor...
Motor
Motor
Conditioning
Conditioning
Matrix decoder
Matrix decoder
Voltage
translation
Voltage...
Motor
telemetry
translation
Motor...
Processing
Processing
MCU
MCU
Text is not SVG - cannot display
\ No newline at end of file diff --git a/README.md b/README.md index b3230bd..6575083 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,192 @@ -# DiagramDemo +## Simple directed graph example +```mermaid +graph TB; + A-->B; + A-->C; + B-->D; + C-->D; +``` -A small demo to show diagram syntax and usage \ No newline at end of file +## 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 + Controller-->Solenoid + subgraph Flowmeter + Sensors-->Solenoid + end + subgraph Communication + WiFi-->microcontroller + end + subgraph Compressor + Controller-->Pump + 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