Intégration draw.io dans GitLab : créez et gérez vos diagrammes directement dans vos wikis
GitLab franchit une nouvelle étape dans l’amélioration de sa collaboration technique avec l’intégration native de draw.io, l’éditeur de diagrammes open source, directement dans son éditeur de wiki. À partir de la version 15.10, prévue pour le 22 mars 2023, les utilisateurs pourront insérer, modifier et versionner des diagrammes au format SVG directement depuis l’interface de GitLab, sans avoir à quitter leur projet. Une avancée majeure pour les équipes DevOps, les développeurs et les architectes qui souhaitent documenter visuellement leurs infrastructures, workflows ou architectures logicielles, le tout en un seul endroit.
Une intégration transparente dans l’éditeur de wiki
L’intégration de draw.io dans GitLab s’intègre parfaitement à deux modes d’édition du wiki : le Markdown et le rich text editor. Dans l’éditeur Markdown, il suffit de cliquer sur « Insérer ou modifier un diagramme » dans la barre d’outils pour ouvrir un éditeur blanc de type tableau blanc (Sketch) directement dans l’interface. Les utilisateurs peuvent alors choisir parmi une large bibliothèque de modèles et de formes pour créer des diagrammes UML, des schémas réseau, des organigrammes ou encore des maquettes d’interface utilisateur.
Une fois le diagramme finalisé, il est automatiquement sauvegardé sous forme de fichier .drawio.svg dans le contenu Markdown de la page. Ce fichier contient à la fois l’image SVG visible et le code source du diagramme, ce qui permet une édition ultérieure sans perte de données. Les modifications sont versionnées comme n’importe quel autre fichier GitLab, offrant ainsi une traçabilité complète des évolutions.
Édition simplifiée avec l’éditeur riche
Pour les utilisateurs préférant l’éditeur riche de GitLab, l’intégration est tout aussi intuitive. Il suffit de sélectionner un diagramme existant et de cliquer sur « Modifier le diagramme » dans la barre d’outils flottante qui apparaît. Pour en ajouter un nouveau, il faut s’assurer qu’aucun autre diagramme n’est sélectionné, puis cliquer sur le bouton « + » et choisir « Créer ou modifier un diagramme ».
La prévisualisation des pages contenant des diagrammes est également optimisée : un simple clic sur « Aperçu » permet de visualiser le rendu final, incluant les diagrammes, avant publication. Cette fonctionnalité réduit les allers-retours et améliore la qualité de la documentation technique.
Stocker ses diagrammes dans GitLab
draw.io va plus loin en permettant de stocker les fichiers de diagrammes individuellement dans les dépôts GitLab. Lors de la création d’un nouveau diagramme, il est possible de sélectionner « GitLab » comme destination de sauvegarde. Sinon, la fonction « Enregistrer sous » permet de déplacer un diagramme existant vers un projet spécifique. Cette approche offre plusieurs avantages :
- Centralisation : Tous les diagrammes sont regroupés avec le code source et la documentation, facilitant leur maintenance.
- Collaboration : Les équipes peuvent travailler ensemble sur les mêmes fichiers, avec un historique des modifications clair.
- Sécurité : Les diagrammes sont protégés par les mêmes mécanismes de contrôle d’accès que le reste du projet.
Pour utiliser cette fonctionnalité, il est nécessaire d’autoriser draw.io à accéder à ses dépôts GitLab. draw.io utilise une autorisation directe côté client, ce qui signifie que le mot de passe n’est jamais partagé avec les serveurs de draw.io, renforçant ainsi la sécurité des données.
Intégration avec VSCode pour les développeurs
Les développeurs qui utilisent Visual Studio Code peuvent également profiter de cette intégration grâce à deux extensions complémentaires. D’abord, l’extension GitLab Workflow permet de gérer ses projets GitLab directement depuis l’IDE. Ensuite, l’extension non officielle draw.io pour VSCode (développée par Henning Dieterichs) permet de visualiser et éditer les fichiers .drawio stockés dans les dépôts.
Une fois configurées, ces extensions offrent une expérience fluide : il est possible de modifier un diagramme, de commiter les changements et de pousser les modifications vers GitLab sans quitter VSCode. Cette intégration est particulièrement utile pour les équipes qui travaillent en mode « shift-left », où la documentation est intégrée dès les premières phases du développement.
Un outil polyvalent pour la documentation technique
L’intégration de draw.io dans GitLab répond à un besoin croissant de documentation visuelle et dynamique dans les environnements DevOps. Que ce soit pour documenter une architecture cloud, un pipeline CI/CD, une base de données ou un workflow métier, les diagrammes deviennent un élément central de la collaboration technique. Contrairement aux images statiques, les fichiers .drawio.svg permettent une édition ultérieure sans perte de qualité, tout en conservant une trace des modifications.
Cette fonctionnalité est particulièrement pertinente pour les équipes qui utilisent GitLab comme plateforme unique pour le développement, l’intégration continue et la documentation. Elle élimine le besoin de recourir à des outils externes comme Lucidchart ou Visio, réduisant ainsi les coûts et simplifiant les processus.
À noter que cette intégration est encore en développement jusqu’à sa sortie officielle. Des ajustements mineurs pourraient être apportés d’ici le 22 mars, mais la version finale promet d’être un atout majeur pour les utilisateurs de GitLab.
Conclusion : une documentation plus intelligente et collaborative
L’intégration de draw.io dans GitLab marque une avancée significative pour les équipes techniques qui cherchent à unifier leur documentation et leur code source. En permettant la création, l’édition et le versionnage des diagrammes directement dans l’écosystème GitLab, cette fonctionnalité réduit les frictions entre les outils et améliore la productivité. Que ce soit via l’éditeur de wiki, VSCode ou un stockage direct dans les dépôts, les utilisateurs disposent désormais d’une solution flexible et sécurisée pour documenter leurs projets.
Avec cette intégration, GitLab confirme sa position de plateforme tout-en-un pour les développeurs et les équipes DevOps, tout en offrant une alternative open source aux solutions propriétaires. Une raison de plus de migrer ou de rester sur GitLab pour ses projets techniques !
Pour découvrir cette fonctionnalité dès sa sortie, gardez un œil sur la version 15.10 de GitLab, prévue pour le 22 mars 2023.
Source : https://www.drawio.com/blog/gitlab-wiki-integration
