192 lines
4.4 KiB
Markdown
192 lines
4.4 KiB
Markdown
## 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
|
|
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
|
|
|
|
|
|
``` |