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