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

Add graph/flowchart examples #1

Merged
AllSpiceAlice merged 13 commits from develop into main 2022-10-17 16:38:34 +00:00
Conversation 0 Commits 13 Files Changed 1 +78
1 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a868b9a12f - Show all commits

78
Flowchart.md
View File

@ -52,6 +52,21 @@ flowchart TB;
Circle1((circle)) Circle1((circle))
``` ```
## Subgraphs
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
```mermaid ```mermaid
flowchart TB; flowchart TB;
Hex1{{hexagon are the bestagons}} Hex1{{hexagon are the bestagons}}
@ -100,6 +115,7 @@ Minimum length
C --------> F; C --------> F;
``` ```
## Special characters ## Special characters
```mermaid ```mermaid
flowchart LR; flowchart LR;
@ -109,4 +125,66 @@ Minimum length
D["entity code: #9829;"] D["entity code: #9829;"]
E["Arrow entity codes: #8592; #8593; #8594; #8595; #8596; #8629;"] E["Arrow entity codes: #8592; #8593; #8594; #8595; #8596; #8629;"]
F["#8719; #8721; #8734;"] 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(Start)
id2(Stop)
id3(foo);
id4(bar);
id5(baz);
id6(ddd);
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
``` ```