Utiliser Excalidraw : le dessin collaboratif en quelques clics

Excalidraw est un outil de tableau blanc collaboratif. Il permet en quelques secondes de commencer à dessiner, partager des idées ou animer une rétrospective !

Solution OpenSource gratuite, initiée par Christophe Chedeau @Vjeux, c’est par Twitter que j’en ai entendu parler, et que j’ai tout de suite été conquis par le style des dessins créés. Il suffit de se rendre sur excalidraw.com pour démarrer une session de dessin. Vous arrivez alors sur une page blanche, prête à accueillir vos plus belles œuvres !! 

Quelques éléments à savoir sur Excalidraw

• Un projet OpenSource, à l’écoute d’idées d’améliorations et PullRequests 
• Accessible en ligne sur excalidraw.com, mais qui peut être hébergé très simplement, il suffit de tirer et démarrer l’image Docker 
  • docker build -t excalidraw/excalidraw
  • docker run –rm -dit –name excalidraw -p 5000:80 excalidraw/excalidraw:latest
• Actuellement en version auto-hébergée il n’y a pas de fonctionnalités de partage
• Développé avec React, Rough.js (pour le coté crayonné :<3: ), TypeScript et Vercel
• Par défaut une session en solo n’est pas partagée avec le serveur
• Par contre quand vous générez un lien et que vous invitez d’autres personnes à participer, les transactions sont stockées et encryptées de bout-en-bout (plus d’info sur le blog : https://blog.excalidraw.com/end-to-end-encryption/) 

Vous pouvez initier une session avant un atelier ou une rétrospective, et simplement copier l’URI pour la partager à votre équipe !

Et pour aller plus loin ?

Pour faire un exemple concret, j’ai voulu initier quelques logos qui serviront à illustrer une prochaine série d’articles. J’ai commencé avec quelques logos, et je me suis pris au jeu !

Une fois les formes générées, on peut très facilement jouer avec les effets de rendu. Ici un exemple avec le logo de Slack :

Le projet a été poussé sur GitHub : https://github.com/pclainchard/excalidrawLib , le ReadMe détaille comment importer les icônes en tant qu’objets de librairie.

L’exercice est assez simple mais cela permet de voir comment versionner les images avec Git, les fonctionnalités d’export en SVG ou en PNG.

N’hésitez pas à l’essayer, récupérer ces icônes ou bien à créer les vôtres

En conclusion

Gratuit, léger, convivial et super simple à utiliser, je recommande cet outil pour des sessions de dessin rapides ou bien pour la préparation de supports. Idéal pour une équipe confinée qui souhaite partager rapidement !!