Test Mermaid
Mermaid simplifie les diagrammes complexes. Il s'agit d'un outil de création de diagrammes et de graphiques basé sur Javascript qui rend des définitions de texte inspirées de Markdown pour créer et modifier des diagrammes de manière dynamique.
Quelques exemples
""<div class="mermaid">
journey
title Les activités d'amélie
section A la maison
Lire: 5: Amélie
faire les devoirs: 2: Amélie
section Avec les copines
Lyne: 5: Amélie
Yasmine: 4: Amélie
Ilana: 4: Amélie
section Virtuellement
Bazar form: 5: Laurent
Livrer Doryphore version beta: 4: Florian
section En vacance
Test de liseuse: 3: Laurent
</div>""
""<div class="
donne
journey
title Les activités d'amélie
section A la maison
Lire: 5: Amélie
faire les devoirs: 2: Amélie
section Avec les copines
Lyne: 5: Amélie
Yasmine: 4: Amélie
Ilana: 4: Amélie
section Virtuellement
Bazar form: 5: Laurent
Livrer Doryphore version beta: 4: Florian
section En vacance
Test de liseuse: 3: Laurent
""<div class="mermaid">
gantt
dateFormat DD-MM-YYYY
title Les taches à faire dans YesWiki
excludes weekdays 2020-01-10
section Doryphore
préparer la beta :done, des1, 06-01-2020,10-01-2020
corriger les bugs :active, des2, 09-01-2020, 3d
Faire une sortie officielle : des3, after des2, 5d
Célébrer : des4, after des3, 5d
</div>""
donne
gantt
dateFormat DD-MM-YYYY
title Les taches à faire dans YesWiki
excludes weekdays 2020-01-10
section Doryphore
préparer la beta :done, des1, 06-01-2020,10-01-2020
corriger les bugs :active, des2, 09-01-2020, 3d
Faire une sortie officielle : des3, after des2, 5d
Célébrer : des4, after des3, 5d
""<div class="mermaid">
pie
title Les trucs que j'adore
"du cirque" : 28
"voir le lapin" : 7
"Lire" : 7
"Voir les copines" : 6
</div>""
donne
pie
title Les trucs que j'adore
"du cirque" : 28
"voir le lapin" : 7
"Lire" : 7
"Voir les copines" : 6
""<div class="mermaid">
graph LR
A --- B{Let me think}
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>""
donne
graph LR
A --- B{Let me think}
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);