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, 2020-01-06,2020-01-10
corriger les bugs           :active,  des2, 2020-01-09, 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, 2020-01-06,2020-01-10 corriger les bugs :active, des2, 2020-01-09, 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);