Les diagrammes Mermaid sur Visual Studio Code : natif et facile à visualiser

Par:
francoistonic

mer, 10/06/2026 - 07:31

Visual Studio Code a beaucoup amélioré le support Markdown. Dans les dernières versions, deux fonctions importantes sont arrivées : les diagrammes Mermaid et le module previewer. Mermaid permet de créer une grande variété de diagrammes directement en Markdown. A l'origine, il ciblait JavaScript avec une description proche du markdown.

Plus de 30 types sont possibles :

  • Flowchart
  • Sequence
  • Block
  • Class
  • Entity Relationship
  • Gantt
  • Mindmap
  • State
  • Timeline
  • Gitgraph
  • C4
  • Sankey
  • Pie chart
  • Quadrant
  • Requirement
  • User Journey
  • Sankey
  • XY chart
  • Kanban
  • Architecture
  • Packet
  • Radar

C'est la liste des diagrammes supportés par l'extension officielle Mermaid. Désormais, inutile d'utiliser une extension sur VS Code car le support est natif. Depuis la version 1.121, on dispose aussi d'une prévisualisation directement sur l'éditeur. Ce qui est particulièrement pratique pour tester et corriger immédiatement le markdown. Cette fonction supporte les zoom + et -. Sur Mac, sur un fichier .md, il suffit de faire : Maj+Command+V pour afficher le markdown et revenir au code. 

Tous les détails sur le support Markdown sur VS Code : https://code.visualstudio.com/docs/languages/markdown