From fbd3e0871ebda28b2c8e4e1cac467440b346d587 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 19:25:50 +0000 Subject: [PATCH 01/13] Add hello world graph --- Flowchart.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 Flowchart.md diff --git a/Flowchart.md b/Flowchart.md new file mode 100644 index 0000000..d7487b1 --- /dev/null +++ b/Flowchart.md @@ -0,0 +1,5 @@ +graph GraphName; + A-->B; + A-->C; + B-->D; + C-->D; \ No newline at end of file -- 2.40.1 From 9665e599757e2251342ab8d276096615b2686cd2 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 19:27:36 +0000 Subject: [PATCH 02/13] Change graph name to TD --- Flowchart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Flowchart.md b/Flowchart.md index d7487b1..577e633 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -1,4 +1,4 @@ -graph GraphName; +graph TD; A-->B; A-->C; B-->D; -- 2.40.1 From 4ac2bd39c7b55b8253d2640a0b34715c0bb3e65d Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 19:30:39 +0000 Subject: [PATCH 03/13] Add ```mermaid``` syntax --- Flowchart.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Flowchart.md b/Flowchart.md index 577e633..c8f7a18 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -1,5 +1,8 @@ +```mermaid graph TD; A-->B; A-->C; B-->D; - C-->D; \ No newline at end of file + C-->D; + +``` \ No newline at end of file -- 2.40.1 From 306e81e8620f0d5a95cb74a656e0d871a0cfb9ef Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 19:54:07 +0000 Subject: [PATCH 04/13] Add examples for directed graph --- Flowchart.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/Flowchart.md b/Flowchart.md index c8f7a18..2583190 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -1,8 +1,30 @@ +## Simple directed graph example ```mermaid graph TD; 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 TD; + Flow1[Flowcharts are flexible] --> Flow2[and informative]; +``` + +## Directed Graph +```mermaid +flowchart TD; + 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] ``` \ No newline at end of file -- 2.40.1 From 35833371f5742e03b1f3a0114007c3067a3ee145 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 20:00:01 +0000 Subject: [PATCH 05/13] Add flowchart direction examples --- Flowchart.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/Flowchart.md b/Flowchart.md index 2583190..548a766 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -1,6 +1,6 @@ ## Simple directed graph example ```mermaid -graph TD; +graph TB; A-->B; A-->C; B-->D; @@ -15,13 +15,25 @@ flowchart LR; ## Flowchart top to bottom ```mermaid -flowchart TD; +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 TD; +flowchart TB; Flow1[Test Computer] --> |JTAG| Flow2[Motor Controller-DUT]; Flow1[Test Computer] --> |USB C| Flow3[Test Fixture]; Flow3[Test Fixture] --> Flow2[Engine Controller] -- 2.40.1 From a1e693a1ed08719bb1d8952e273816abb1c4489b Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 20:07:47 +0000 Subject: [PATCH 06/13] Add shape examples --- Flowchart.md | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/Flowchart.md b/Flowchart.md index 548a766..255b1e7 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -13,30 +13,41 @@ flowchart LR; Flow1[Flowcharts are easy] --> Flow2[and fast]; ``` -## Flowchart top to bottom +### Flowchart top to bottom ```mermaid flowchart TB; Flow1[Flowcharts are flexible] --> Flow2[and informative]; ``` -## Flowchart bottom to top +### Flowchart bottom to top ```mermaid flowchart BT; Flow1[Data Acquisition Unit] --> |USB-1.1| Flow2[PC]; ``` -## Flowchart right to left +### Flowchart right to left ```mermaid flowchart RL; Flow1[Flowcharts flow] --> Flow2[in any direction]; ``` -## Directed Graph +### 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] - + 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}} ``` \ No newline at end of file -- 2.40.1 From f5fac10ecca04a4bd7314e12ecde7b980208f949 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 20:16:55 +0000 Subject: [PATCH 07/13] Add shape examples --- Flowchart.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/Flowchart.md b/Flowchart.md index 255b1e7..547390e 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -49,5 +49,16 @@ flowchart TB; Pill1([pill shaped]) FancyRect1[[fancy rectangle]] DataBase1[(database)] - Circle1{{circle}} + Circle1((circle)) +``` + +```mermaid +flowchart TB; + Hex1{{hexagon are the bestagons}} + Flag1>Flag] + Rhombus1{rhombus} + Parallelagram1[/Parallelagram/] + Parallelagram2[\Parallelagram-R2L\] + Trapezoid1[/Trapezoid 1\] + Trapezoid2[\Trapezoid 2/] ``` \ No newline at end of file -- 2.40.1 From a9805275c5e810f9569e32cd32fa74325f54dde8 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 21:01:18 +0000 Subject: [PATCH 08/13] Add link examples --- Flowchart.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/Flowchart.md b/Flowchart.md index 547390e..9250ac7 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -61,4 +61,24 @@ flowchart TB; 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]; + + + ``` \ No newline at end of file -- 2.40.1 From a2090c19cf34122dccc70875d2e74c6d91c417e1 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 21:47:04 +0000 Subject: [PATCH 09/13] Add special characters examples --- Flowchart.md | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/Flowchart.md b/Flowchart.md index 9250ac7..0953374 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -78,7 +78,35 @@ flowchart TB; 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;"] ``` \ No newline at end of file -- 2.40.1 From a868b9a12f6a849467ab60ab02158d91385cd217 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 22:10:59 +0000 Subject: [PATCH 10/13] Add colors --- Flowchart.md | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/Flowchart.md b/Flowchart.md index 0953374..a2d2de7 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -52,6 +52,21 @@ flowchart TB; 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}} @@ -100,6 +115,7 @@ Minimum length C --------> F; ``` + ## Special characters ```mermaid flowchart LR; @@ -109,4 +125,66 @@ Minimum length 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(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 + + ``` \ No newline at end of file -- 2.40.1 From e5519dcb816f51c319de9d024dc10f99a0bc1419 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 22:11:40 +0000 Subject: [PATCH 11/13] Add git graph example --- gitgraph.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 gitgraph.md diff --git a/gitgraph.md b/gitgraph.md new file mode 100644 index 0000000..464e2d9 --- /dev/null +++ b/gitgraph.md @@ -0,0 +1,17 @@ +```mermaid + + gitGraph + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + commit id:"TWO" + cherry-pick id:"A" + commit id:"THREE" + checkout develop + commit id:"C" +``` \ No newline at end of file -- 2.40.1 From 2f5c1374261c5daa46e7cfc7444a28b447d02f75 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Fri, 14 Oct 2022 22:15:10 +0000 Subject: [PATCH 12/13] remove git graph example --- gitgraph.md | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100644 gitgraph.md diff --git a/gitgraph.md b/gitgraph.md deleted file mode 100644 index 464e2d9..0000000 --- a/gitgraph.md +++ /dev/null @@ -1,17 +0,0 @@ -```mermaid - - gitGraph - commit id: "ZERO" - branch develop - commit id:"A" - checkout main - commit id:"ONE" - checkout develop - commit id:"B" - checkout main - commit id:"TWO" - cherry-pick id:"A" - commit id:"THREE" - checkout develop - commit id:"C" -``` \ No newline at end of file -- 2.40.1 From fa5c7e96d9098b55b7def97c2bb8fcc1bed68ed0 Mon Sep 17 00:00:00 2001 From: AllSpiceUser Date: Mon, 17 Oct 2022 16:37:22 +0000 Subject: [PATCH 13/13] Update color names --- Flowchart.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/Flowchart.md b/Flowchart.md index a2d2de7..491dae1 100644 --- a/Flowchart.md +++ b/Flowchart.md @@ -171,12 +171,14 @@ Minimum length ## Node colors ```mermaid flowchart LR - id1(Start) - id2(Stop) - id3(foo); - id4(bar); - id5(baz); - id6(ddd); + 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 -- 2.40.1