Mermaid vers GIF : comment transformer un diagramme en quelque chose qui bouge
Réponse courte : Mermaid n'exporte pas de GIF et n'anime pas. Aller de Mermaid au GIF suppose de rendre le diagramme en dehors de Mermaid et d'assembler vous-même les images, d'utiliser l'un des scripts communautaires qui automatisent cette opération, ou de générer une version animée à partir de la même définition avec un outil conçu pour ça. Le choix dépend entièrement de ce que vous voulez : une image qui bouge, ou un diagramme qui se construit dans l'ordre où vous l'expliquez.
Ce ne sont pas les mêmes demandes, et la plupart des outils les confondent.
Pourquoi Mermaid n'exporte-t-il pas de GIF ?
Mermaid produit du SVG dans un navigateur. C'est tout son travail. Le résultat rendu n'a pas de ligne de temps, pas d'images clés, et aucune notion d'étape survenant après une autre — les flèches d'un diagramme de séquence sont tracées dans l'ordre du source, toutes en même temps, en un seul rendu.
La demande d'animation est ancienne et bien documentée. Le dépôt Mermaid porte depuis des années des tickets ouverts réclamant des diagrammes animés ainsi qu'un export vers PowerPoint et Google Slides, et les contournements communautaires ont comblé le vide : des scripts qui rendent un diagramme plusieurs fois avec un nœud de plus à chaque passe, des bidouilles CSS artisanales appliquées au SVG rendu, et de petits outils en ligne de commande qui assemblent les PNG obtenus en GIF.
Tout cela fonctionne. Et tout cela suit la même forme : rendre N fois, collecter N images, encoder. Comprendre cette forme, c'est ce qui vous permet de juger les options.
Quels sont les moyens de passer de Mermaid à un GIF animé ?
L'assemblage d'images
Prenez votre définition Mermaid. Produisez-en plusieurs versions, chacune révélant un nœud ou un message de plus que la précédente. Rendez chacune en PNG avec le CLI Mermaid. Passez les PNG à un encodeur comme ImageMagick ou ffmpeg en précisant un délai entre les images.
C'est ce que les scripts communautaires automatisent, et c'est réellement la voie la plus maîtrisable : vous décidez exactement du contenu de chaque image.
Deux choses coincent. D'abord, Mermaid recalcule la mise en page à chaque rendu : un diagramme qui gagne un nœud d'une image à l'autre peut voir toute sa disposition se décaler, et l'« animation » devient un tremblement. Vous l'évitez en rendant le diagramme complet à chaque fois et en masquant les éléments pas encore révélés plutôt qu'en les omettant. Ensuite, le GIF est limité à 256 couleurs, et le texte d'un diagramme en petite taille se tramifie mal. Exportez plus grand que nécessaire.
L'animation CSS sur le SVG rendu
Mermaid génère un SVG avec des noms de classes raisonnablement prévisibles, vous pouvez donc attacher des animations CSS aux nœuds et aux liens après le rendu. C'est la voie derrière la plupart des articles de blog sur les « bidouilles épouvantables », et elle donne de très bons résultats dans un navigateur.
Elle ne produit pas de fichier. Un SVG animé en CSS ne joue que là où un navigateur le joue, ce qui exclut PowerPoint, Keynote et la plupart des endroits où l'on a réellement besoin du diagramme. Vous voilà ramené à l'enregistrement d'écran, c'est-à-dire l'assemblage d'images avec des étapes en plus.
Un outil qui génère l'animation
La troisième voie saute complètement les images : lire la définition Mermaid, en comprendre la structure, et en produire une animation. Le convertisseur Mermaid de FluxDiagram prend une définition Mermaid ou PlantUML — flowchart, séquence, classes, Gantt ou camembert — en extrait les nœuds et les liens, et génère une version animée qui construit le diagramme dans le sens de lecture que votre source déclare déjà. Exportez en GIF pour une boucle, ou en MP4 et WebM quand vous voulez maîtriser la lecture.
Le compromis est honnête : vous avez moins de contrôle image par image qu'avec un script, et vous obtenez un résultat en quelques secondes plutôt qu'en un après-midi.
Quelle approche pour quel usage ?
| Approche | Coût de mise en place | Résultat | Stabilité de la mise en page | S'intègre aux diapositives | Idéal pour | |---|---|---|---|---|---| | Assemblage d'images avec le CLI + ffmpeg | Élevé, scripté | GIF ou MP4 | Médiocre sauf si vous masquez au lieu d'omettre | Oui | Les chaînes reproductibles en CI | | CSS sur le SVG rendu | Moyen | Navigateur uniquement | Bonne | Non | Les sites de documentation et les pages web | | Enregistrement d'écran d'un éditeur en direct | Faible | GIF ou MP4 | Bonne | Oui | Un cas isolé, avec le curseur visible | | Génération à partir de la définition | Faible | GIF, MP4, WebM | Bonne | Oui | Les diapositives que vous devez commenter |
GIF, MP4 ou WebM — que faut-il vraiment exporter ?
Demandez un GIF et vous en obtiendrez un, mais c'est rarement le bon format.
Le GIF boucle automatiquement, se lit partout et ne demande aucun contrôle. Il plafonne à 256 couleurs et le poids des fichiers grimpe vite : la construction d'un diagramme sur 20 secondes donne un fichier lourd qui rend moins bien qu'un de 3 secondes. Bien pour un badge de README ou une boucle qui tourne derrière vous pendant que vous parlez.
Le MP4 vous donne toutes les couleurs, des fichiers légers et la maîtrise de la lecture. Sur une diapositive, cette maîtrise compte plus qu'on ne le croit : vous voulez que la construction démarre quand vous appuyez sur la touche, pas quand la diapositive apparaît, et qu'elle s'arrête sur la dernière image au lieu de repartir pendant vos explications.
Le WebM en est l'équivalent web, utile pour un site de documentation ou une page d'accueil où vous voulez de la transparence ou un poids réduit.
La règle générale : GIF pour une boucle, MP4 pour une présentation, WebM pour le web.
Un GIF animé aide-t-il vraiment ?
Pas toujours, et autant être direct, car « animer le diagramme » est souvent la mauvaise réponse.
Un GIF en boucle où un flowchart se dessine encore et encore, derrière un orateur, c'est de la décoration. Il attire l'œil à répétition et n'apprend rien de nouveau au public à la deuxième boucle.
Ce qui aide, c'est une séquence liée au commentaire : le diagramme apparaît dans l'ordre où vous l'expliquez, de sorte qu'à chaque instant la seule chose visible est celle dont vous parlez. C'est pour ça que les scripts d'assemblage d'images existent, et c'est la vraie raison de vouloir animer un diagramme Mermaid. Nous avons traité le fond du sujet en détail dans transformer des diagrammes Mermaid en visuels de présentation animés, et les questions de format dans Mermaid vers PowerPoint.
Si le diagramme est assez petit pour se lire d'un coup d'œil, laissez tomber l'animation. Exportez un SVG et passez à la suite.
FAQ
Le CLI Mermaid peut-il exporter directement un GIF ?
Non. `mmdc` produit du SVG, du PNG et du PDF. Tout ce qui est animé exige de rendre plusieurs images fixes et de les encoder vous-même, ou de passer par un outil séparé.
Comment empêcher le diagramme de sauter d'une image à l'autre ?
Rendez le diagramme complet dans chaque image et masquez les éléments que vous n'avez pas encore révélés, au lieu de les supprimer de la définition. Mermaid recalcule la mise en page à partir des nœuds existants : retirer un nœud déplace donc tout le reste.
Un GIF animé se lit-il dans PowerPoint et Google Slides ?
Oui. Les deux traitent un GIF comme une image et le lisent en boucle automatiquement en mode présentation, mais pas toujours en mode édition. Pour une construction que vous voulez déclencher puis figer, insérez plutôt un MP4 en tant que média : vous obtenez une commande de lecture et la boucle s'arrête.
Essayez avec votre propre définition
Si vous avez un diagramme Mermaid qui a besoin de bouger, partez du source plutôt que de la capture d'écran.
Collez votre code Mermaid dans le convertisseur.
FluxDiagram génère des diagrammes animés que vous intégrez dans le deck que vous avez déjà, dans PowerPoint, Google Slides ou Keynote.