Excalidraw dans Obsidian : des diagrammes dessinés à la main dans les notes

Comme mentionné précédemment, les fichiers Canvas sont au format .canvas et existent séparément des fichiers .md – ils doivent être gérés indépendamment et ne peuvent pas être combinés avec des notes dans le même fichier. Ce chapitre présente un outil qui résout ce problème : le plugin Excalidraw.

Qu’est-ce qu’Excalidraw et en quoi est-ce différent de Canvas ?

Qu’est-ce qu’Excalidraw ?

Excalidraw est un outil de dessin en ligne gratuit et open source avec une version web autonome (excalidraw.com) que vous pouvez utiliser directement dans votre navigateur sans inscription. Son style dessiné à la main est parfait pour les organigrammes, les cartes mentales, les diagrammes d’architecture et autres contenus similaires.

Dans Obsidian, nous utilisons la version plugin tiers – maintenue par des développeurs de la communauté, pas officiellement par Obsidian, donc elle doit être installée manuellement. Les fonctionnalités de base sont les mêmes que la version web, mais avec une intégration plus poussée avec Obsidian.

Différences avec Canvas

Les deux semblent être « du dessin sur un canevas », mais le format de fichier est complètement différent, ce qui constitue la différence fondamentale :

• Canvas : génère un fichier .canvas. C’est un fichier JSON autonome qui existe séparément de vos notes .md et doit être géré indépendamment.
• Excalidraw : les données de dessin peuvent être compressées et intégrées à la fin d’un fichier .md – un seul fichier, texte et dessin coexistent, pas de gestion séparée.

Les deux captures d’écran ci-dessous proviennent du même fichier :

C’est pourquoi je recommande Excalidraw : quand vous ouvrez un fichier, vous voyez le texte ; avec un basculement, vous voyez le dessin. Les deux types de contenu au même endroit.

Installation du plugin Excalidraw

Excalidraw est un plugin tiers et doit être installé manuellement.

Chemin : Paramètres → Plugins tiers → Plugins communautaires → Rechercher « Excalidraw » → Installer → Activer

Après l’installation, activez le plugin et vous verrez une icône Excalidraw apparaître dans la barre latérale gauche.

Créer et utiliser Excalidraw

Comment créer un nouveau fichier

Il y a deux façons :

1. Palette de commandes : Cmd+P (Mac) ou Ctrl+P (Windows), recherchez « Excalidraw : Nouveau dessin », appuyez sur Entrée.
2. Barre latérale gauche : cliquez sur l’icône Excalidraw pour en créer un nouveau directement.

Par défaut, un nouveau fichier est créé en .excalidraw (pas .md). Ne vous inquiétez pas – comment en faire partie d’un fichier .md est l’objet de la section « Deux-en-un » plus loin.

Opérations courantes et raccourcis

Dans la barre d’outils d’Excalidraw, chaque outil affiche un numéro en dessous – c’est le raccourci. Appuyez sur le numéro pour changer d’outil directement sans cliquer sur la barre d’outils :

Une fonctionnalité supplémentaire par rapport à Canvas : Excalidraw dispose d’un outil Dessin à main levée dédié (raccourci 7) qui vous permet de dessiner librement avec votre souris ou trackpad – ce que Canvas ne peut pas faire.

Flux de travail au clavier : dessiner sans quitter le clavier

Excalidraw prend également en charge un flux de travail purement clavier, idéal pour créer rapidement des nœuds, les connecter et écrire du contenu :

Navigation de base (en mode Sélection) :

Ajouter du contenu au canevas

Formes et texte : sélectionnez une forme dans la barre d’outils et cliquez sur le canevas pour la dessiner. Avec l’outil texte, cliquez et commencez à taper – le chinois est pris en charge.

Connexions par flèches : lorsqu’un rectangle est sélectionné, survoler son bord révèle des points de connexion verts. Faites glisser une flèche depuis l’un de ces points vers une autre forme, et elle s’aimantera.

Notes existantes : faites glisser des notes directement depuis l’arborescence de fichiers d’Obsidian dans le canevas Excalidraw – elles seront intégrées sous forme de cartes d’aperçu de notes.

Images : faites glisser des fichiers image sur le canevas pour les afficher directement.

Point clé ! Dessiner Excalidraw avec l’IA

Similaire à la section « Dessiner Canvas avec l’IA » plus tôt, Excalidraw peut également être généré directement par Claude Code.

Contexte

Nous avons précédemment présenté Claude Code et le système de Skills. Canvas utilise le Skill json-canvas, et Excalidraw a également un Skill dédié : excalidraw-diagram. Bien sûr, il existe de nombreux MCP et Skills autour d’Excalidraw – vous pouvez choisir ce dont vous avez besoin.

Il est créé par axtonliu et open-sourcé sur GitHub :

https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/excalidraw-diagram

Après téléchargement, placez-le dans le répertoire ~/.claude/skills/, comme les autres Skills.

Ce Skill génère des fichiers .excalidraw autonomes, adaptés aux scénarios où vous n’avez besoin que du dessin et ne voulez pas qu’il soit mélangé avec le texte de la note.

Si vous souhaitez intégrer le dessin directement dans un fichier .md (le format deux-en-un décrit plus loin), j’ai écrit un Skill étendu : obsidian-excalidraw, spécialement conçu pour cela – le résultat est compressé et intégré à la fin du fichier .md, sans créer de fichiers supplémentaires. Les deux Skills ont des objectifs différents ; choisissez selon vos besoins.

Comment l’utiliser

Dans Claude Code, tapez /excalidraw-diagram, sélectionnez ce Skill, appuyez sur Tab, puis décrivez ce que vous voulez dessiner. Claude Code générera le fichier Excalidraw correspondant.

Démonstration en direct

J’ai utilisé le contenu de ce chapitre comme démonstration – j’ai dit à Claude Code : « Dessine un organigramme de la structure des chapitres de ce contenu Excalidraw, montrant les relations entre les sections. »

Claude Code a lu le contenu et a automatiquement généré un diagramme de structure, intégré directement à la fin du fichier .md. Passez en mode Excalidraw pour le voir. Pas besoin de faire glisser manuellement des nœuds ou de connecter des lignes – beaucoup plus rapide que de dessiner à la main.

Point clé ! Intégrer Excalidraw dans les fichiers .md (Deux-en-un)

Soyons clairs : Par défaut, le plugin Excalidraw crée des fichiers .excalidraw, qui sont séparés des fichiers .md et doivent être gérés indépendamment, tout comme Canvas.

La fonctionnalité « deux-en-un » n’est pas le comportement par défaut ; elle nécessite une configuration supplémentaire. Une fois configurée, les nouveaux fichiers seront au format .md, avec les données de dessin compressées et stockées à la fin du fichier, de sorte que les deux coexistent dans le même fichier.

Canvas ne peut pas faire cela, mais Excalidraw le peut – après configuration, le même fichier .md peut servir à la fois de note ordinaire et de tableau de dessin, le tout dans un seul fichier. C’est la partie la plus précieuse de cet article.

Ci-dessous, je l’ai décomposé en 5 étapes.

5.1 Deux propriétés clés

Les lecteurs attentifs ont peut-être déjà vu ces deux propriétés frontmatter dans mes captures d’écran de notes précédentes :

excalidraw-plugin: parsed
excalidraw-open-md: true

excalidraw-plugin: parsed : indique au plugin Excalidraw que ce fichier .md contient des données Excalidraw qui doivent être analysées. Sans cette propriété, le plugin ne traitera pas le fichier.

excalidraw-open-md: true : ouvre le fichier en mode Markdown par défaut (au lieu d’entrer directement en mode dessin). Réglé sur true, vous verrez d’abord le texte en ouvrant le fichier, et basculerez manuellement lorsque vous aurez besoin de dessiner. Sans cela, chaque fois que vous ouvrez le fichier, il saute directement sur le tableau de dessin, et vous devriez revenir en arrière pour lire le texte – agaçant.

Avec ces deux propriétés dans le frontmatter, le fichier acquiert une capacité « double mode ».

5.2 Créer un fichier modèle

La clé de la configuration deux-en-un est d’enregistrer cette configuration dans un fichier modèle, afin que les nouvelles notes l’incluent automatiquement sans avoir à l’ajouter manuellement à chaque fois.

Étapes :

1. Dans votre dossier de modèles (par exemple 02 Templates/), créez un nouveau fichier .md et nommez-le « Modèle Excalidraw ».
2. Copiez et collez le contenu suivant dedans, puis enregistrez.

---
excalidraw-plugin: parsed
excalidraw-open-md: true
---

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MSgw4CxAHSp6AWzJJMMJTEZgaCANoBdcuihQAymHRg+oCthhEAQulQBrAOb4ujXAGF6mPT4CCAAxABmkVGqnnhm2ABefIycmJgAvuTh2Oq68MDp6UA
```
%%

Ceci est un modèle Excalidraw avec un canevas vide. Les deux propriétés frontmatter (excalidraw-plugin: parsed et excalidraw-open-md: true) indiquent au plugin que ce fichier est au format deux-en-un et doit s’ouvrir en mode Markdown par défaut. Le compressed-json à la fin correspond aux données du canevas vide.

5.3 Paramètres du plugin Excalidraw

Avoir un fichier modèle ne suffit pas – vous devez également indiquer au plugin Excalidraw « où trouver le modèle » et désactiver un paramètre qui interfère avec la gestion des fichiers.

Chemin : Paramètres → Excalidraw

Deux choses à modifier :

① Définir l’emplacement du modèle : dans les paramètres Excalidraw, trouvez l’option « Fichier modèle » et entrez le chemin de votre modèle, par exemple 02 Templates/Modèle Excalidraw. Désormais, chaque fois que vous créez un nouveau fichier avec Excalidraw, il utilisera automatiquement ce modèle, y compris la propriété excalidraw-open-md: true.

② Désactiver « Ajouter la date au nom du nouveau fichier » : par défaut, Excalidraw ajoute la date de création aux noms des nouveaux fichiers, par exemple Dessin 2026-03-12. Cela rend les noms de fichiers verbeux et incompatibles avec la logique de nommage des modèles d’Obsidian. Trouvez cette option et désactivez-la.

5.4 Lier un raccourci clavier

Basculer entre le mode Markdown et le mode dessin via le menu contextuel est trop lent – liez un raccourci clavier pour un basculement instantané.

Chemin : Paramètres → Raccourcis → Rechercher « Excalidraw »

Trouvez cette entrée : « Excalidraw : Basculer entre le mode Excalidraw et le mode Markdown »

Liez-la à Cmd+E (Mac) ou Ctrl+E (Windows). Vérifiez d’abord si cette combinaison de touches est déjà utilisée – le Cmd+E par défaut d’Obsidian est pour l’italique. Si vous utilisez souvent l’italique, choisissez une autre touche, comme Cmd+Shift+E.

Après la liaison, dans un fichier deux-en-un, appuyez sur Cmd+E pour basculer entre « voir le texte » et « voir le dessin » – très pratique.

5.5 Données compressées à la fin du fichier

Après configuration, chaque fois que vous enregistrez du contenu de dessin dans un fichier deux-en-un, un bloc de données est automatiquement généré à la fin du fichier :

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQ...
```
%%

Ce bloc de code compressed-json est le résultat de la compression de toutes les données de dessin – coordonnées, couleurs, contenu textuel, relations de connexion – le tout compressé en cette seule ligne de chaîne.

Trois choses à noter :

• Ne supprimez pas manuellement ce contenu. Si vous le supprimez, les données de dessin sont perdues et le passage en mode Excalidraw affichera un canevas vide.
• %% est la syntaxe de commentaire d’Obsidian. En mode Lecture, ce contenu est caché et ne sera pas affiché, donc cela n’affecte pas la lisibilité de la note.
• La ligne compressed-json doit être une seule ligne complète. Si elle est coupée par un saut de ligne, le fichier générera une erreur et ne pourra pas s’ouvrir.

Résumé

Ce que vous avez appris aujourd’hui :

1. Excalidraw = outil de dessin gratuit et open source : dispose d’une version web autonome ; Obsidian utilise la version plugin tiers, avec un style dessiné à la main et un canevas infini.
2. Différence fondamentale avec Canvas : Canvas génère des fichiers .canvas séparés qui nécessitent une gestion indépendante ; les données de dessin d’Excalidraw peuvent être compressées et intégrées dans des fichiers .md – un seul fichier, deux usages.
3. Installation : Paramètres → Plugins tiers → Plugins communautaires → Rechercher et installer Excalidraw.
4. Raccourcis d’outils : touches numériques 1-8 et 0 pour changer d’outil, Échap pour quitter l’édition, Tab pour passer d’un élément à l’autre, touches fléchées pour se déplacer – rythme de base : touches numériques pour les outils + Échap/Tab pour la navigation.
5. Dessin par IA : le Skill /obsidian-excalidraw permet à Claude Code de générer directement des dessins intégrés, beaucoup plus rapide que de faire glisser des nœuds manuellement.
6. Configuration deux-en-un : ajoutez excalidraw-plugin: parsed + excalidraw-open-md: true dans le frontmatter, configurez via un fichier modèle, définissez le chemin du modèle dans les paramètres Excalidraw, liez Cmd+E pour un basculement rapide de mode.
7. Données en fin de fichier : le bloc ## Drawing + compressed-json est la donnée de dessin compressée, entourée de %%, invisible en mode Lecture – ne le supprimez pas manuellement.

Remerciements : La configuration « Deux-en-un » de ce chapitre s’inspire de la méthode du créateur Bilibili Fiveth_ (vidéo : BV1hyhPzoEcd), mentionné ici.