Diagrammes Mermaid

Mermaid dans Notion, Obsidian et les outils de documentation

Notion et Obsidian affichent Mermaid nativement à partir d’un bloc de code réglé sur Mermaid. Les générateurs de documentation comme Docusaurus et MkDocs le prennent en charge via une extension officielle, tandis que Confluence demande en général une application de la marketplace.

Par Flowchartio · Mis à jour le 25 octobre 2026 · 2 min de lecture

Notion

Ajoutez un bloc de code, choisissez le langage Mermaid et collez le diagramme. Notion propose un affichage du code, de l’aperçu ou des deux, ce qui permet de ne montrer que le diagramme sur la page. C’est pratique pour garder une procédure et son schéma au même endroit, par exemple quand vous transformez une procédure en logigramme.

Obsidian

Obsidian affiche les blocs de code marqués mermaid en mode lecture et en aperçu en direct, sans extension. Comme les notes sont de simples fichiers Markdown, le même diagramme s’affiche aussi si le coffre est poussé sur GitHub ; voir Mermaid sur GitHub et GitLab.

Générateurs de documentation

Docusaurus : activez le thème Mermaid officiel, puis utilisez des blocs mermaid dans vos pages.
MkDocs (thème Material) : configurez l’extension SuperFences avec un bloc personnalisé pour Mermaid.
Wikis Azure DevOps : utilisez la syntaxe de bloc Mermaid propre au wiki (::: mermaid … :::).

Vérifiez la documentation de chaque outil pour la configuration exacte de votre version.

Confluence

Confluence n’affiche pas Mermaid par défaut. Les équipes installent généralement une application Mermaid depuis la marketplace, ou insèrent le schéma comme image. Dans ce cas, un SVG reste net ; voir PNG, SVG ou Mermaid.

Exporter depuis une base de connaissances

Si une page contenant un diagramme Mermaid est exportée en PDF ou partagée hors de l’outil, vérifiez le résultat : certains exports conservent l’image rendue, d’autres seulement le code. Dans le doute, joignez aussi un export image.

Conseils pour les bases de connaissances

Un diagramme par section, à côté du texte qu’il illustre.
Les mêmes noms de couloirs que dans votre organigramme, pour que les lecteurs reconnaissent les responsables.
Quand le processus change, modifiez le bloc de code plutôt que de téléverser une nouvelle image.
La syntaxe de base uniquement : les outils n’embarquent pas tous la même version de Mermaid.

Pour créer le diagramme, écrivez-le avec l’aide-mémoire de la syntaxe ou décrivez le processus et exportez-le depuis un générateur IA.