Un diagramme dessiné dans un logiciel graphique est difficile à mettre à jour : il faut rouvrir le fichier, retrouver le calque, réexporter. Quand un chiffre change, le schéma reste périmé. Voici une méthode plus robuste : décrire le diagramme dans un fichier JSON, et laisser un script le dessiner.
Étape 1 : décrire le schéma en JSON
Un schéma en étapes se décrit par un titre, une source et une liste de libellés :
{
"type": "flow",
"title": "Les six contrôles",
"source": "Méthode de la rédaction",
"steps": [
{ "label": "Tester avec des données fictives" },
{ "label": "Sortir les identifiants", "note": "coffre de secrets" }
]
}
Le fichier se range à côté des autres, un par article. Il contient les chiffres et les sources, pas la mise en page : c'est le script qui décide des couleurs, des tailles et des retours à la ligne.
Étape 2 : dessiner en SVG
Le SVG est un format texte, donc lisible et versionnable. Le script produit des boîtes arrondies, des flèches et des barres, avec une fonction de découpe qui coupe les libellés trop longs.
Deux pièges reviennent souvent : les caractères & et < doivent être échappés, sinon le XML est invalide ; et une police absente du système change la largeur du texte. Une marge généreuse dans chaque boîte évite les chevauchements.
Étape 3 : convertir en PNG
On passe le SVG en PNG avec sharp, la bibliothèque d'image de Node.js :
await sharp(Buffer.from(svg)).png({ compressionLevel: 9 }).toFile('diagram-1.png');
Le PNG est la version à mettre dans l'article : il s'affiche partout, y compris dans les aperçus de réseaux sociaux.
Étape 4 et 5 : placer et référencer
Les images vont dans public/images/blog/<slug>/, avec un nom explicite. Dans le Markdown, une simple ligne suffit :
Le texte alternatif décrit le contenu du schéma, pas seulement son titre : c'est ce que lisent les lecteurs d'écran et les moteurs de recherche.
Ce que la méthode ne fait pas
Le générateur ne remplace pas un outil de dessin pour un schéma complexe avec des formes libres. Il convient aux diagrammes explicatifs : étapes, chronologies, comparaisons chiffrées. C'est le cas de la plupart de nos articles.
Pour un tour d'horizon des outils d'automatisation qui peuvent aussi produire ces contenus, voir notre comparatif n8n et Zapier.
Versionner les visuels
Les fichiers JSON et les PNG générés se gardent dans le dépôt git, au même titre que le texte. Quand un chiffre change, on modifie le JSON, on relance le script et on commit les deux. L'historique montre alors quel chiffre a changé, à quelle date, et pourquoi : une information précieuse pour un média qui doit pouvoir corriger ce qu'il publie.
Vérifier le rendu avant publication
Ouvrez chaque PNG généré. Un libellé trop long peut déborder d'une boîte, et une police différente sur un autre système peut changer la largeur du texte. Une relecture rapide évite de publier un schéma illisible.
Un schéma par idée
Un diagramme doit illustrer une seule idée. Si un visuel contient six niveaux de lecture, scindez-le en deux figures. Le script se prête bien à cela : chaque fiche JSON produit un fichier PNG distinct, réutilisable dans d'autres articles.
Un exemple de fiche complète
Une fiche JSON complète décrit à la fois la couverture et les diagrammes d'un article : un identifiant de dossier, un titre de rubrique, puis la liste des visuels. Le script lit cette fiche, produit une image par visuel et les range dans le dossier de l'article. Le résultat s'utilise tel quel dans le Markdown, sans étape manuelle entre l'idée et la publication.
Sources
- Script
scripts/build-visuals.mjsdu dépôt du média, octobre 2026. - Documentation de la bibliothèque sharp.
