From d1c7f1c2e35122c2bfe50ac69eb9afe40a6e482c Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 28 Jan 2022 09:14:12 +0100 Subject: [PATCH 1/5] fix: switch to real mermaid diagrams instaead of images in readme --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fd13915f4..60fe012f9 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,13 @@ C -->|One| D[Result 1] C -->|Two| E[Result 2] - +
+ flowchart TD + A[Hard] -->|Text| B(Round) + B --> C{Decision} + C -->|One| D[Result 1] + C -->|Two| E[Result 2] +
From 9c04595ae8d1f6519334a78afc3910034b1c6ece Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 28 Jan 2022 09:19:07 +0100 Subject: [PATCH 2/5] fix: update 2 --- README.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 60fe012f9..7809c3298 100644 --- a/README.md +++ b/README.md @@ -50,13 +50,7 @@ C -->|One| D[Result 1] C -->|Two| E[Result 2] -
- flowchart TD - A[Hard] -->|Text| B(Round) - B --> C{Decision} - C -->|One| D[Result 1] - C -->|Two| E[Result 2] -
+ @@ -230,3 +224,11 @@ A quick note from Knut Sveidqvist: --- *Mermaid was created by Knut Sveidqvist for easier documentation.* + +```mermaid +flowchart TD +A[Hard] -->|Text| B(Round) +B --> C{Decision} +C -->|One| D[Result 1] +C -->|Two| E[Result 2] +``` \ No newline at end of file From 4130386447f3772e1ea09f75e80e527ded95b273 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 28 Jan 2022 09:49:07 +0100 Subject: [PATCH 3/5] fix: formatting test --- README.md | 35 +++++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 7809c3298..2c24ad1e0 100644 --- a/README.md +++ b/README.md @@ -35,26 +35,29 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo ## Examples __The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. Click here jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__ - - - - - - +``` +```mermaid +flowchart LR +A[Hard] -->|Text| B(Round) +B --> C{Decision} +C -->|One| D[Result 1] +C -->|Two| E[Result 2] +``` + + +
- Flow
- [docs - live editor] -
-flowchart TD
+
+## Flowchart [docs - live editor]
+
+```
+flowchart LR
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
-
- -
Sequence
[docs - live editor] @@ -225,10 +228,14 @@ A quick note from Knut Sveidqvist: *Mermaid was created by Knut Sveidqvist for easier documentation.* +|test|apa| +|----|---| +|flow| ```mermaid flowchart TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2] -``` \ No newline at end of file +``` +|sxt \ No newline at end of file From ff3bdfd2820d3e7afb86e83a879a67b01a322ee5 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 28 Jan 2022 10:26:10 +0100 Subject: [PATCH 4/5] fix: using real diagrams in the readme file --- README.md | 148 ++++++++++++++---------------------------------------- 1 file changed, 37 insertions(+), 111 deletions(-) diff --git a/README.md b/README.md index 2c24ad1e0..6e43248dc 100644 --- a/README.md +++ b/README.md @@ -55,15 +55,9 @@ C -->|Two| E[Result 2] ``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Sequence
- [docs - live editor] -
+##Sequence [docs - live editor]
+
+```mermaid
 sequenceDiagram
 Alice->>John: Hello John, how are you?
 loop Healthcheck
@@ -73,40 +67,24 @@ Note right of John: Rational thoughts!
 John-->>Alice: Great!
 John->>Bob: How about you?
 Bob-->>John: Jolly good!
-
- -
- Gantt
- [docs - live editor] -
+```
+
+## Gantt [docs - live editor]
+
+```mermaid
 gantt
-section Section
-Completed :done,    des1, 2014-01-06,2014-01-08
-Active        :active,  des2, 2014-01-07, 3d
-Parallel 1   :         des3, after des1, 1d
-Parallel 2   :         des4, after des1, 1d
-Parallel 3   :         des5, after des3, 1d
-Parallel 4   :         des6, after des4, 1d
-
- -
- Class
- [docs - live editor] -
+    section Section
+    Completed :done,    des1, 2014-01-06,2014-01-08
+    Active        :active,  des2, 2014-01-07, 3d
+    Parallel 1   :         des3, after des1, 1d
+    Parallel 2   :         des4, after des1, 1d
+    Parallel 3   :         des5, after des3, 1d
+    Parallel 4   :         des6, after des4, 1d
+```
+
+## Class [docs - live editor]
+
+```mermaid
 classDiagram
 Class01 <|-- AveryLongClass : Cool
 <<interface>> Class01
@@ -123,19 +101,10 @@ class Class10 {
   int id
   size()
 }
-
 - -
- State
- [docs - live editor] -
+```
+
+##State [docs - live editor]
+```mermaid
 stateDiagram-v2
 [*] --> Still
 Still --> [*]
@@ -143,46 +112,22 @@ Still --> Moving
 Moving --> Still
 Moving --> Crash
 Crash --> [*]
-
 - -
- Pie
+``` + +### Pie
[docs - live editor] -
+
+```mermaid
 pie
 "Dogs" : 386
 "Cats" : 85
 "Rats" : 15
-
 - -
- Git
- [experimental - live editor] -
Coming soon!
- User Journey
- [docs - live editor] -
- 
+```
+
+## Git [experimental - live editor]
+
+## User Journey [docs - live editor]
+```mermaid
   journey
     title My working day
     section Go to work
@@ -192,14 +137,7 @@ pie
     section Go home
       Go downstairs: 5: Me
       Sit down: 3: Me
-
 - User Journey Diagram -
+``` ## Related projects @@ -226,16 +164,4 @@ A quick note from Knut Sveidqvist: --- -*Mermaid was created by Knut Sveidqvist for easier documentation.* - -|test|apa| -|----|---| -|flow| -```mermaid -flowchart TD -A[Hard] -->|Text| B(Round) -B --> C{Decision} -C -->|One| D[Result 1] -C -->|Two| E[Result 2] -``` -|sxt \ No newline at end of file +*Mermaid was created by Knut Sveidqvist for easier documentation.* \ No newline at end of file From c19319f1159fbe4cf249908313bef3806536cb4b Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 28 Jan 2022 10:39:48 +0100 Subject: [PATCH 5/5] fix: adding example code --- README.md | 88 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 76 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 6e43248dc..e8ffba65c 100644 --- a/README.md +++ b/README.md @@ -55,8 +55,19 @@ C -->|Two| E[Result 2] ``` -##Sequence [docs - live editor] +## Sequence diagram [docs - live editor] +``` +sequenceDiagram +Alice->>John: Hello John, how are you? +loop Healthcheck + John->>John: Fight against hypochondria +end +Note right of John: Rational thoughts! +John-->>Alice: Great! +John->>Bob: How about you? +Bob-->>John: Jolly good! +``` ```mermaid sequenceDiagram Alice->>John: Hello John, how are you? @@ -69,8 +80,18 @@ John->>Bob: How about you? Bob-->>John: Jolly good! ``` -## Gantt [docs - live editor] +## Gantt chart [docs - live editor] +``` +gantt + section Section + Completed :done, des1, 2014-01-06,2014-01-08 + Active :active, des2, 2014-01-07, 3d + Parallel 1 : des3, after des1, 1d + Parallel 2 : des4, after des1, 1d + Parallel 3 : des5, after des3, 1d + Parallel 4 : des6, after des4, 1d +``` ```mermaid gantt section Section @@ -82,12 +103,12 @@ gantt Parallel 4 : des6, after des4, 1d ``` -## Class [docs - live editor] +## Class diagram [docs - live editor] -```mermaid +``` classDiagram -Class01 <|-- AveryLongClass : Cool -<<interface>> Class01 +Class01 <|-- AveryLongClass : Cool +<> Class01 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 @@ -97,13 +118,40 @@ Class01 : size() Class01 : int chimp Class01 : int gorilla class Class10 { - <<service>> + <> + int id + size() +} +``` +```mermaid +classDiagram +Class01 <|-- AveryLongClass : Cool +<> Class01 +Class09 --> C2 : Where am i? +Class09 --* C3 +Class09 --|> Class07 +Class07 : equals() +Class07 : Object[] elementData +Class01 : size() +Class01 : int chimp +Class01 : int gorilla +class Class10 { + <> int id size() } ``` -##State [docs - live editor] +## State diagram [docs - live editor] +``` +stateDiagram-v2 +[*] --> Still +Still --> [*] +Still --> Moving +Moving --> Still +Moving --> Crash +Crash --> [*] +``` ```mermaid stateDiagram-v2 [*] --> Still @@ -114,9 +162,14 @@ Moving --> Crash Crash --> [*] ``` -### Pie
- [docs - live editor] +### Pie chart [docs - live editor] +``` +pie +"Dogs" : 386 +"Cats" : 85 +"Rats" : 15 +``` ```mermaid pie "Dogs" : 386 @@ -124,9 +177,20 @@ pie "Rats" : 15 ``` -## Git [experimental - live editor] +## Git graph [experimental - live editor] -## User Journey [docs - live editor] +## User Journey diagram [docs - live editor] +``` + journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 3: Me +``` ```mermaid journey title My working day