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/.

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

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…

sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Diagramme de Gantt

Très pratique pour faire de l’ordonnancement ou pour suivre/planifier un projet.

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

Git <3 <3 <3 !!!

Rien que pour cette fonctionnalité, Mermaid mérite sa place auprès des plus grands ;)

gitGraph: options { "nodeSpacing": 150, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch

Camembert

Il y a plein d’autres sur ce site.

pie title Content of a pop song "Baby" : 35 "Ooh" : 35 "Yeah" : 20 "Actual lyrics" : 10

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 ;)