main #3
192
Flowchart.md
192
Flowchart.md
@ -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
|
|
||||||
|
|
||||||
|
|
||||||
```
|
|
||||||
4
Motor-diagram.svg
Normal file
4
Motor-diagram.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 17 KiB |
193
README.md
193
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
|
## 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
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue
Block a user