AllSpice-Demos/Markdown-diagram-demo
24
Fork 0
Files Issues 1 Design Reviews 1 Actions NEW Releases Activity

Git Diagram #4

Open
AllSpiceAlice wants to merge 2 commits from develop into main
pull from: develop
merge into: AllSpice-Demos:main
Conversation 1 Commits 2 Files Changed 1 +195 -194
3 changed files with 195 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 01cc91d6f0 - Show all commits

192
Flowchart.md
View File

@ -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
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

193
README.md
View File

@ -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
```