Animer un schéma Draw.io et l'exporter en GIF sous Linux

Comment ajouter des animations à un schéma Draw.io et le convertir en GIF sous Linux, sans outil propriétaire.
3 April 2026 334 words Reading: 2 min Authors:
  • Loïs Dutour
Table of Contents

Je trouve un schéma animé plus lisible d’un PNG statique pour documenter une architecture, les flux, les relations entre composants, les directions de communication deviennent immédiatement plus clairs.

draw.io supporte les animations nativemet, mais l’export en GIF ne l’est pas. Sous Windows, un ScreenToGIF sufit. Sous Linux, ça demande un peu plus de bidouillage !

Étape 1 : Animer un schéma Draw.io

  1. Ouvrir le schéma .drawio
  2. Sélectionner le ou les éléments à animer
  3. Dans la barre latérale droite → onglet “Style” → activer “Animation”
  4. Dans “Properties”, configurer :
    • Type d’animation (ex : Bounce In, Fade, Flow…)
    • Durée (ex : 1000ms)

Étape 2 : Exporter en SVG

Le GIF se génère à partir du SVG — c’est le format qui préserve les animations Draw.io.

Fichier → Exporter sous → SVG

Options recommandées :

  • Cocher “Inclure une copie du schéma” si vous souhaitez pouvoir rééditer
  • Décocher “Intégrer les images” si le fichier devient trop lourd

Étape 3 — Convertir le SVG animé en GIF

Aller sur html5animationtogif.com/svg-to-gif et suivre les étapes du site.

Défaut connu : le logo du site est ajouté en filigrane en bas à droite du GIF.

Étape 4 — Supprimer le filigrane avec GIMP

  1. Ouvrir le GIF dans GIMP (Fichier → Ouvrir)
  2. GIMP importe chaque frame comme un calque séparé — visible dans Fenêtres → Calques
  3. Se rendre sur le calque “Arrière Plan”: :
    • Sélectionner le calque
    • Outil Rectangle de sélection → sélectionner la zone du logo
    • Édition → Remplir avec la couleur d’arrière-plan (pipette sur le fond adjacent pour matcher la couleur)
  4. Une fois toutes les frames traitées : Fichier → Exporter sous → choisir .gif → cocher “En tant qu’animation” et “Boucle infinie” et mettre une durée de 50ms entre les frames → Exporter

💡 Si le fond est uniforme, l’outil Clone ou Correction par zones de GIMP donne un résultat plus propre que le remplissage couleur.

Le GIF obtenu peut être intégré directement dans un README GitHub ou dans un article Hugo via la syntaxe standard :

![Architecture homelab](schema_architecture_infra.gif)