Mermaid
Ces derniers mois ont été assez compliqués en termes de planning, et je n’ai pas eu autant de temps que je l’aurais souhaité pour publier sur le blog. Pour reprendre le rythme, voici un petit billet rapide pour vous faire découvrir un formidable outil Javascript : Mermaid !
Celui-ci permet de générer des diagrammes (séquence, état, Gantt…) à partir d’un syntaxe textuelle proche du Markdown. Le moteur de blog que j’utilise, Hugo, inclut un shortcode pour intégrer des diagrammes Mermaid directement dans un article.
Diagramme de flux
Je me suis inspiré d’internet pour celui-ci (qui m’a beaucoup fait rire :D) : https://pile.goodevilgenius.org/2018/04/Operating_System_Choice_Flowchart/.
A noter que l’on peut aller assez loin dans la personnalisation, que ce soit au niveau de l’orientation du graphe, des formes de chaque noeud, des styles de liens et même jusqu’à l’intégration de style CSS et d’icônes (FontAwesome).
Voici le code ayant permis de générer ce diagramme :
graph TD
A[Choosing an OS] --> B{Do you fear technology ?}
B -->|Yes| C{Is your daddy rich ?}
C -->|Yes| E(fa:fa-apple Mac OS);
C -->|No| F(fa:fa-chrome Chrome OS);
B -->|No| D{Do you care about freedom/privacy ?}
D -->|Yes| G{Do you have a life ?}
D -->|No| H(fa:fa-windows Windows);
G -->|Yes| I(fa:fa-ubuntu Ubuntu);
G -->|Yes| K(fa:fa-fedora Fedora);
G -->|No| L(fa:fa-linux Archlinux);
G -->|No| M(fa:fa-shield Backtrack);
style A fill:#0094FF,stroke:#333,stroke-width:4px,color:#fff
style E fill:#808080,stroke:#333,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
style F fill:#808080,stroke:#333,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
style H fill:#004A7F,stroke:#333,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
style I fill:#FF6A00,stroke:#333,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
style K fill:#FF6A00,stroke:#333,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
style L fill:#7F0000,stroke:#333,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
style M fill:#7F0000,stroke:#333,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Diagramme de séquence
Etant assez peu inspiré, j’ai repris l’exemple de la documentation officielle…
Diagramme de Gantt
Très pratique pour faire de l’ordonnancement ou pour suivre/planifier un projet.
Git <3 <3 <3 !!!
Rien que pour cette fonctionnalité, Mermaid mérite sa place auprès des plus grands ;)
Camembert
Il y a plein d’autres sur ce site.
Il en existe plusieurs autres, comme un diagramme d’état, un diagramme de classes, un diagramme de parcours utilisateur (“User journey workflow”)… Je vous laisserai consulter la documentation pour découvrir tout ça ;)
A noter, il existe l’outil Mermaid Live Editor qui permet de tester et visualiser en live les possibilités de Mermaid.
Je vous laisse le GitHub ainsi que le lien vers la documentation. Have fun ;)