Découverte de Mermaid.js pour la visualisation graphique
Publié le - 13 avril 2025 par Andy Cinquin
VisualisationMermaid.jsGraphique
Il n'y a pas si longtemps que ça, j'ai eu besoin de faire pas mal de recherches de job/missions, clients, et de la communication, ainsi que des statistiques.
Dans ce cadre, j'ai eu besoin de produire des schémas rapidement pour avoir des supports visuels afin de montrer facilement et rapidement ce que j'avais fait, les résultats et pourquoi je l'avais fait. (puis c'est toujours sympa d'avoir des petits graph :") )
Sans plus attendre, je vais vous présenter le super outil que j'ai découvert.
Un truc qui s'appelle "Mermaid.js", une librairie de visualisation graphique, une sorte de GaC (Graphique as Code ?), l'idée étant de venir générer des graphiques plutôt cool.
Il existe une alternative pour avoir des sortes de Flow charts.
Exemple, pour ma recherche de job, je voulais visualiser les réponses que j'avais eues, le taux de réponses, d'entretiens, de propositions.
Par exemple, ça pourrait ressembler à ça :
// Couleurs des nœuds
:Candidatures #4B0082
:Aucune réponse #A9A9A9
:Aucune réponse encore #A9A9A9
:Refus "keep in touch" #FFA07A
:Intéressé pour plus tard #98FB98
:Refus catégorique #FF6347
:Relance #FF69B4
:Autres refus #FFD700
:Entretiens #1E90FF
:Entretien visio RH #1E90FF
:Entretien visio team #1E90FF
:Proposition Job #32CD32
:Discussion co-founding #20B2AA
:Match pas #20B2AA
:Proposition CTO #32CD32
:Ajout sur listes des Freelance #9370DB
:Deuxième salve 3 mois plus tard #4B0082
:Intéressé mais pas de projets #98FB98
:Sans source #A9A9A9
// Flux
Candidatures [264] Aucune réponse
Candidatures [20] Refus "keep in touch"
Candidatures [6] Intéressé pour plus tard
Intéressé pour plus tard [2] Ajout sur listes des Freelance
Candidatures [5] Refus catégorique
Candidatures [4] Autres refus
Candidatures [3] Entretiens
Candidatures [20] Discussion co-founding
Aucune réponse [99] Relance
Relance [97] Aucune réponse encore
Relance [1] Entretiens
Refus "keep in touch" [11] Ajout sur listes des Freelance
Entretiens [1] Entretien visio RH
Entretien visio RH [1] Entretien visio team
Entretien visio team [1] Proposition Job
Entretien visio RH [2] Proposition Job
Entretiens [2] Entretien visio RH
Entretiens [2] Ajout sur listes des Freelance
Discussion co-founding [14] Match pas
Discussion co-founding [6] Proposition CTO
Proposition CTO [4] Proposition Job
Sans source [6] Proposition Job
Deuxième salve 3 mois plus tard [110] Aucune réponse
Deuxième salve 3 mois plus tard [35] Intéressé mais pas de projets
Intéressé mais pas de projets [7] Ajout sur listes des Freelance
Deuxième salve 3 mois plus tard [5] Entretiens
Entretiens [3] Proposition Job
L'idée est de venir décrire chaque flux de manière manuelle. C'est compliqué, chronophage, mais aujourd'hui avec les IA, c'est une méthode facile et visuelle. Pour présenter des choses, c'est le top du top !
Allez voir Mermaid.js et SankeyMATIC ! Ce sont de vrais bangers !
🚀 Merci d'avoir lu jusqu'ici !
Si cet article vous a plu, partagez-le autour de vous.
💡 Une idée en tête ? Discutons-en !☕