From 84931c13127778b7368abd309ac33fd17d55155d Mon Sep 17 00:00:00 2001 From: Massimeddu Cireddu Date: Mon, 18 Feb 2019 12:47:01 +0100 Subject: [PATCH] Update documentation --- exampleSite/content/shortcodes/mermaid.en.md | 182 ++++++++++++++++++- exampleSite/content/shortcodes/mermaid.fr.md | 182 ++++++++++++++++++- 2 files changed, 362 insertions(+), 2 deletions(-) diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md index 8963aedd21..e5b7400539 100644 --- a/exampleSite/content/shortcodes/mermaid.en.md +++ b/exampleSite/content/shortcodes/mermaid.en.md @@ -8,6 +8,7 @@ description : "Generation of diagram and flowchart from text in a similar manner Just insert your mermaid code in the `mermaid` shortcode and that's it. ## Flowchart example + {{}} graph LR; A[Hard edge] -->|Link text| B(Round edge) @@ -26,6 +27,28 @@ graph LR; C -->|Two| E[Result two] {{< /mermaid >}} +or you can use this alternative syntax: + +
+```mermaid
+graph LR;
+  A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+```
+
+ +renders as + +```mermaid +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +``` + ## Sequence example {{}} @@ -58,6 +81,40 @@ sequenceDiagram Bob-->John: Jolly good! {{< /mermaid >}} +or you can use this alternative syntax: + +
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts 
prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+```
+
+ +renders as + +```mermaid +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +``` + ## GANTT Example {{}} @@ -79,7 +136,7 @@ sequenceDiagram {{}} -render as +renders as {{}} gantt @@ -99,5 +156,128 @@ gantt Add to mermaid :1d {{}} +or you can use this alternative syntax: +
+```mermaid
+gantt
+        dateFormat  YYYY-MM-DD
+        title Adding GANTT diagram functionality to mermaid
+        section A section
+        Completed task            :done,    des1, 2014-01-06,2014-01-08
+        Active task               :active,  des2, 2014-01-09, 3d
+        Future task               :         des3, after des2, 5d
+        Future task2               :         des4, after des3, 5d
+        section Critical tasks
+        Completed task in the critical line :crit, done, 2014-01-06,24h
+        Implement parser and jison          :crit, done, after des1, 2d
+        Create tests for parser             :crit, active, 3d
+        Future task in critical line        :crit, 5d
+        Create tests for renderer           :2d
+        Add to mermaid                      :1d
+```
+
+renders as + +```mermaid +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +``` + +### Class example + +
+```mermaid
+classDiagram
+  Class01 <|-- AveryLongClass : Cool
+  Class03 *-- Class04
+  Class05 o-- Class06
+  Class07 .. Class08
+  Class09 --> C2 : Where am i?
+  Class09 --* C3
+  Class09 --|> Class07
+  Class07 : equals()
+  Class07 : Object[] elementData
+  Class01 : size()
+  Class01 : int chimp
+  Class01 : int gorilla
+  Class08 <--> C2: Cool label
+```
+
+ +renders as + +```mermaid +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +``` + +### Git example + +
+```mermaid
+gitGraph:
+options
+{
+  "nodeSpacing": 150,
+  "nodeRadius": 10
+}
+end
+  commit
+  branch newbranch
+  checkout newbranch
+  commit
+  commit
+  checkout master
+  commit
+  commit
+  merge newbranch
+```
+
+ +renders as + +```mermaid +gitGraph: +options +{ + "nodeSpacing": 150, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +``` \ No newline at end of file diff --git a/exampleSite/content/shortcodes/mermaid.fr.md b/exampleSite/content/shortcodes/mermaid.fr.md index ac66d845e9..e59e178488 100644 --- a/exampleSite/content/shortcodes/mermaid.fr.md +++ b/exampleSite/content/shortcodes/mermaid.fr.md @@ -26,6 +26,28 @@ graph LR; C -->|Deux| E[Résultat deux] {{< /mermaid >}} +or you can use this alternative syntax: + +
+```mermaid
+graph LR;
+	A[Bords droits] -->|Lien texte| B(Bords arondis)
+	B --> C{Décision}
+	C -->|Un| D[Résultat un]
+	C -->|Deux| E[Résultat deux]
+```
+
+ +renders as + +```mermaid +graph LR; + A[Bords droits] -->|Lien texte| B(Bords arondis) + B --> C{Décision} + C -->|Un| D[Résultat un] + C -->|Deux| E[Résultat deux] +``` + ## Sequence example {{}} @@ -58,6 +80,40 @@ sequenceDiagram Bob-->John: Au top! {{< /mermaid >}} +or you can use this alternative syntax: + +
+```mermaid
+sequenceDiagram
+	participant Alice
+	participant Bob
+	Alice->>John: Salut John, comment vas-tu?
+	loop Vérification
+		John->John: Se bat contre l'hyponcodrie.
+	end
+	Note right of John: Les pensées rationnelles
prédominent...
+	John-->Alice: Super!
+	John->Bob: Et toi?
+	Bob-->John: Au top!
+```
+
+ +renders as + +```mermaid +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Salut John, comment vas-tu? + loop Vérification + John->John: Se bat contre l'hyponcodrie. + end + Note right of John: Les pensées rationnelles
prédominent... + John-->Alice: Super! + John->Bob: Et toi? + Bob-->John: Au top! +``` + ## GANTT Example {{}} @@ -79,7 +135,7 @@ sequenceDiagram {{}} -render as +renders as {{}} gantt @@ -100,4 +156,128 @@ gantt {{}} +or you can use this alternative syntax: +
+```mermaid
+gantt
+		dateFormat  YYYY-MM-DD
+		title Ajout de la fonctionnalité de GANTT à Mermaid
+		section Une section
+		Tâche complétée            :done,    des1, 2014-01-06,2014-01-08
+		Tâche en cours             :active,  des2, 2014-01-09, 3d
+		Future tâche               :         des3, after des2, 5d
+		Future tâche 2             :         des4, after des3, 5d
+		section Tâches critiques
+		Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h
+		Implémenter le parser et jison          :crit, done, after des1, 2d
+		Créer des tests pour le parser             :crit, active, 3d
+		Future tâche dans le chemin critique        :crit, 5d
+		Créer des tests pour le renderer           :2d
+		Ajout à Mermaid                      :1d
+```
+
+ +renders as + +```mermaid +gantt + dateFormat YYYY-MM-DD + title Ajout de la fonctionnalité de GANTT à Mermaid + section Une section + Tâche complétée :done, des1, 2014-01-06,2014-01-08 + Tâche en cours :active, des2, 2014-01-09, 3d + Future tâche : des3, after des2, 5d + Future tâche 2 : des4, after des3, 5d + section Tâches critiques + Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h + Implémenter le parser et jison :crit, done, after des1, 2d + Créer des tests pour le parser :crit, active, 3d + Future tâche dans le chemin critique :crit, 5d + Créer des tests pour le renderer :2d + Ajout à Mermaid :1d +``` + +### Class example + +
+```mermaid
+classDiagram
+  Class01 <|-- AveryLongClass : Cool
+  Class03 *-- Class04
+  Class05 o-- Class06
+  Class07 .. Class08
+  Class09 --> C2 : Where am i?
+  Class09 --* C3
+  Class09 --|> Class07
+  Class07 : equals()
+  Class07 : Object[] elementData
+  Class01 : size()
+  Class01 : int chimp
+  Class01 : int gorilla
+  Class08 <--> C2: Cool label
+```
+
+ +renders as + +```mermaid +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +``` + +### Git example + +
+```mermaid
+gitGraph:
+options
+{
+  "nodeSpacing": 150,
+  "nodeRadius": 10
+}
+end
+  commit
+  branch newbranch
+  checkout newbranch
+  commit
+  commit
+  checkout master
+  commit
+  commit
+  merge newbranch
+```
+
+ +renders as + +```mermaid +gitGraph: +options +{ + "nodeSpacing": 150, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +```