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