I. Présentation
Dans cet article, je vous présente une application web simple d’utilisation pour faire vos schémas, diagrammes et graphiques en toute simplicité : Excalidraw.
Excalidraw est une application web open source qui vous permet de réaliser des graphiques et des schémas de toute sorte rapidement. Elle supporte un tas de fonctionnalités comme l’import d’image, le partage des schémas, l’utilisation de différents styles, etc. Voyons cela de plus près.
II. Utilisation en ligne ou installation locale
Pour une utilisation classique sur des données non sensibles, vous pouvez utiliser Excalidraw via le site suivant : excalidraw.com.
Il est permis d’utiliser un seul grand schéma, dont le contenu peut être exporté en local. Cela permet de réimporter ensuite les schémas que nous souhaitons visionner ou modifier.
Il existe aussi un système d’abonnement pour accéder à Excalidraw+, autorisant alors plusieurs schémas, des fonctionnalités collaboratives, de gestion d’équipe/partages et d’export supplémentaires.
Le projet est également hébergé par Framalab :
Si la confidentialité est de mise, il est aussi possible de déployer Excalidraw sur un serveur local, et même de l’intégrer dans des applications web plus large :
Extrait de la documentation du dépôt Github (https://github.com/excalidraw/excalidraw)
Pour ma part, je mise plutôt sur le déploiement rapide via un conteneur Docker. L’éditeur maintient d’ailleurs une image sur le Docker Hub :
Pour la déployer facilement, commençons par la télécharger :
# Déploiement rapide d’excalidraw via Docker
docker pull excalidraw/excalidraw
Puis, nous pouvons déployer cette image et rendre disponible l’interface web sur le port 5000/TCP par exemple :
docker run –rm -dit –name excalidraw -p 5000:80 excalidraw/excalidraw:latest
Dans tous les cas, voici l’interface web sur laquelle nous atterrissons une fois sur l’application web :
Page d’accueil Excalidraw
III. Excalidraw : une appli simple et efficace pour les schémas
A. Créer rapidement des schémas réseau
Excalidraw est particulièrement utile pour les administrateurs système et les étudiants qui ont besoin de créer des schémas réseau. Pour ma part, je l’utilise aussi pour représenter graphiquement des idées ou apporter un élément visuel lors d’une présentation rapide. Voici quelques fonctionnalités clés :
Dessin libre et formes graphiques
Excalidraw propose plusieurs outils pour le dessin libre, le placement d’éléments graphique, de texte, de liaison entre les éléments, de pointage laser facilitant une explication orale, etc :
Exemple de graphique Excalidraw et des principaux objets.
Les différentes formes sont personnalisables très facilement avec de simples éléments rapides d’utilisation. Cela permet de réaliser des schémas très agréables à consulter sans que l’utilisation de l’application ne soit trop lourde :
Exemple de schéma réseau via Excalidraw.
Ce schéma réseau basique a été créé en quelques secondes sur Excalidraw.
À l’image de l’application Visio proposée Microsoft, nous pouvons aussi placer des liaisons intelligentes entre les éléments graphiques. Celles-ci y restent attachées lorsque l’on change ces éléments de position pour faciliter l’édition. Également, leur type, leur style, forme ou couleur peut être modifiée.
Les bibliothèques sont des ensembles d’icônes et éléments graphiques que l’on peut facilement intégrer dans nos schémas Excalidraw. Pour les obtenir, il faut cliquer sur Bibliothèque en haut à droite de l’écran, puis Parcourir les bibliothèques :
Accès aux bibliothèques Excalidraw.
Vous aurez alors accès à plusieurs ensembles d’éléments graphique que vous pourrez retrouver dans votre bibliothèque et insérer dans vos schémas.
Exemple de schéma intégrant des éléments d’une bibliothèque.
En complément, on peut bien sûr intégrer nos propres images et icônes.
B. Synthétiser et visualiser
Au-delà des schémas réseau, Excalidraw peut-être utilisé pour représenter rapidement une idée ou synthétiser un sujet complexe à l’image d’une Mindmap. Sa simplicité d’utilisation permet la création rapide et simple d’élément visuels à intégrer à des présentations :
Exemple de graphique créé via Excalidraw.
C. Collaboration et partage
Une fonctionnalité très intéressante en équipe est celle de la collaboration en temps réel, possible sur une instance locale, mais aussi sur l’instance en ligne dans sa version gratuite :
Représentation des intervenants sur un schéma collaboratif Excalidraw.
La synchronisation des modifications se fait en temps réel et nous pouvons voir l’identité des différentes personnes connectées. Le partage d’un schéma se fait via une URL disposant un lien unique :
Partage d’un schéma sur Excalidraw.
Une fois votre schéma terminé, vous pouvez facilement l’exporter au format PNG, SVG, ou même sous forme de fichier Excalidraw pour une réimportation ou modification ultérieure. Cela facilite le partage avec vos collègues ou l’intégration dans des documents et des présentations.
IV. Conclusion
Excalidraw est un outil puissant et flexible pour créer des schémas et des diagrammes rapidement et efficacement. Que vous soyez un administrateur système cherchant à documenter une infrastructure réseau ou un étudiant travaillant sur un projet, Excalidraw vous sera certainement utile. Il y a un tas de fonctionnalités dont je n’ai pas parlé dans cet article, y compris la conversation du format Mermaid en élément graphique, le pointeur laser pour les présentations, l’intégration web d’un dessin, etc.
Excalidraw peut être intégré dans des environnements plus larges, comme des wikis d’entreprise ou des applications de gestion de projet. Cela en fait un outil polyvalent pour les équipes techniques.
Co-fondateur d’IT-Connect.fr.
Auditeur/Pentester chez Orange Cyberdéfense.