Mermaid

Mermaid est intégré à Yeswiki. 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

""<pre 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
</pre>""
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


""<pre 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


""<pre class="mermaid">
pie
    title Les trucs que j'adore
    "du cirque" : 28
    "voir le lapin" : 7
    "Lire" : 7
    "Voir les copines" :  6
</pre>""
donne
pie
    title Les trucs que j'adore
    "du cirque" : 28
    "voir le lapin" : 7
    "Lire" : 7
    "Voir les copines" :  6


""<pre class="mermaid">
graph LR
   A --- B{Let me think}
   B-->C[fa:fa-ban forbidden]
   B-->D(fa:fa-spinner);
</pre>""
donne
graph LR
   A --- B{Let me think}
   B-->C[fa:fa-ban forbidden]
   B-->D(fa:fa-spinner);