Automatiser la génération de graphiques simples avec Mermaid

Une image vaut mieux qu’un long discours

Que l’on écrive un article de blog, un livre ou une formation, on a souvent besoin de générer des graphiques simples.

Dans mon cas, parlant d’automatisation, j’ai fréquemment le cas où je dois avoir des représentations graphiques de processus.

Je pourrais utiliser un logiciel tiers et les créer à la main mais:

  • Cela nécessite une application de plus
  • C’est forcément chronophage car en plus de la création, il faut exporter, nommer correctement et ensuite insérer une référence vers le fichier graphique.

On doit pouvoir faire mieux que cela. On va prendre pour exemple un diagramme simple pour décrire comment envoyer une newsletter avec une video et un suivi différencié suivant la portion de vidéo visionnée.

Automatiser le plus possible

Il existe un utilitaire nommé Mermaid qui permet à l’aide d’une syntaxe « à la markdown » de créer des diagrammes simples (de type diagramme de flux, de séquence, …)

La syntaxe peut paraitre étrange et compliquée, mais il suffit d’en écrire quelques lignes pour en acquérir la base.

Voici donc en langage mermaid (je m’attendais à autre chose niveau chant des sirènes…) notre beau diagramme:

graph TD
A[fa:fa-envelope  Envoi newsletter avec lien video] --> B(fa:fa-clock Attente 24h)
B --> C{%age visionné}
C -->|Pas ouvert| J[.]
C -->|20%| D[fa:fa-tag Intro]
C -->|50%| E[fa:fa-tag Milieu]
C -->|80%| F[fa:fa-tag Intro] 
D--> g(fa:fa-envelope Relance argumentaire 2)
E--> h(fa:fa-envelope Relance argumentaire 3)
F--> i(fa:fa-envelope Relance argumentaire 4)
J--> k(fa:fa-envelope Relance argumentaire 1)

J’utilise Mermaid Cli qui est une version ligne de commande de Mermaid pour générer le résultat.

J’aime bien les outils en ligne de commande. Ca fait très siècle passé et Minitel je sais. Ca peut aussi frustrer de ne pas pouvoir cliquer partout. En revanche pour s’en servir avec un script pour automatiser, c’est juste parfait.

On tape la commande magique suivante:
~/node_modules/.bin/mmdc -i diagram.mmd -c -o diagram.png

Et on obtient:

Diagramme mermaid avec le thème par défaut
Diagramme mermaid avec le thème par défaut. Comment ça c’est moche?

Comment rendre le style plus attrayant?

En l’état, l’information est présente mais visuellement… on a de la marge de progression. Les graphiste n’ont pas (encore!) de soucis à se faire.

On peut via un fichier de config, indiquer des définitions CSS. Il faut l’avouer ce n’est pas super pratique en l’état mais ca permet cependant d’arriver à nos fins.

Code du fichier de config:

{
"theme": "null",
"themeCSS": ".label {font-family: 'trebuchet ms', verdana, arial;} .label foreignObject { overflow: visible; } .node rect,.node circle,.node ellipse,.node polygon {  fill: white;  stroke: #ef8b80;  stroke-width: 3px;} .arrowheadPath {  fill: #ef8b80;}.edgePath .path {  stroke: #ef8b80;  stroke-width: 3px;}"
}

La commande de génération devient alors:
~/node_modules/.bin/mmdc -i diagram.mmd -c mermaid_config.json -o diagram.png -b transparent

On obtient alors un diagramme aux couleurs du blog:

diagram-mermaid
Notre diagramme est devenu tout joli!

Axes d’amélioration

Il y a encore un certains nombre de points que je souhaiterais améliorer:

  • Générer des images au format vectoriel (SVG) ou au pire en haute résolution. Pour le moment, elles peuvent paraitre pixelisées sur certains écrans.
  • Faciliter la gestion du CSS qui, sur une seule ligne, devient vite illisible.

Et toi, quels sont tes attentes et besoin pour gérer des graphiques?

Laisser un commentaire