Guides en français

Afficher les diagrammes Mermaid dans VS Code

VS Code n’a pas d’aperçu Mermaid intégré. Installez l’extension gratuite Mermaid Viewer, ouvrez un fichier .mmd ou .mermaid et cliquez sur l’icône d’aperçu en haut à droite de l’éditeur. Le diagramme suit votre saisie. Sur un fichier Markdown, l’aperçu liste chaque bloc mermaid. Mermaid 12.3.0 est inclus dans l’extension, donc l’aperçu et l’export PNG ou SVG sont gratuits et fonctionnent hors ligne, sans connexion à un compte. Zovo Pro (19 USD, payé une seule fois) ajoute l’export PDF, l’export de tous les diagrammes de l’espace de travail et l’export à l’enregistrement, avec 3 essais gratuits pour chacun.

Gratuit, licence MIT. ID de l’extension zovo.mermaid-viewer, version 0.3.3.

Ce guide existe aussi en English · Deutsch · Español · Italiano · 日本語 · Polski · Português (Brasil) · 简体中文

Étapes dans VS Code

1. Installez Mermaid Viewer depuis le Marketplace, ou appuyez sur Ctrl+P (Cmd+P sur macOS) et lancez ext install zovo.mermaid-viewer.
2. Ouvrez un fichier .mmd ou .mermaid et cliquez sur l’icône d’aperçu dans la barre de titre de l’éditeur, ou appuyez sur Ctrl+K V (Cmd+K V sur macOS). Vous pouvez aussi lancer « Mermaid Viewer: Open Diagram Editor (Text + Live Preview) » depuis la Command Palette.
3. Pour un fichier Markdown avec des blocs ```mermaid, cliquez sur la même icône d’aperçu. L’aperçu liste chaque diagramme, chacun avec sa propre ligne d’erreur et ses propres boutons d’export.
4. Cliquez sur « Edit diagram » au-dessus d’un bloc du fichier Markdown pour le modifier à côté d’un aperçu en direct. Enregistrez, et le texte retourne dans son bloc.
5. Utilisez la molette pour zoomer sous le pointeur et glissez pour vous déplacer. Fit et 100% sont dans la barre d’outils.
6. Cliquez sur Export pour Save PNG (1x, 2x ou 4x, ou une largeur ou une hauteur exacte), Save SVG, Copy PNG ou Copy SVG code.

Ce qui est gratuit et ce qu’ajoute Zovo Pro

L’aperçu en direct, l’éditeur de diagrammes, Edit diagram pour les blocs Markdown, la complétion, le soulignement des erreurs, les 15 modèles, le plan Mermaid Diagrams, ainsi que l’export et la copie en PNG et SVG sont gratuits. Il n’y a ni compte, ni connexion, ni IA.

Export All Diagrams in Workspace écrit chaque diagramme de chaque fichier .mmd, .mermaid et Markdown du dossier en SVG, en PNG ou dans les deux formats, dans mermaid-export/, avec les mêmes sous-dossiers que les sources. Les diagrammes impossibles à dessiner sont listés à la fin. Vous n’avez plus à ouvrir et exporter chaque diagramme à la main quand votre documentation change.

Utiliser Export All Diagrams in Workspace (Zovo Pro)

7. Ouvrez le dossier dans VS Code. Lancez « Mermaid Viewer: Export All Diagrams in Workspace (SVG/PNG) (Pro) » depuis la Command Palette, ou cliquez sur « Export All Diagrams in Workspace » dans la ligne « Pro tools » sous la barre d’outils de l’aperçu.
8. Choisissez SVG, PNG ou SVG et PNG.
9. Gardez le dossier par défaut mermaid-export (réglage mermaidViewer.exportFolder) ou choisissez « Choose a folder… ». Un essai ne compte que si les fichiers sont écrits. Avec Échap, vous gardez votre essai.

Export All Diagrams in Workspace fonctionne 3 fois sur votre ordinateur avant de demander une licence. Il n’y a ni fenêtre surgissante ni compte à rebours.

Zovo Pro coûte 19 USD, payés une seule fois. Ce n’est pas un abonnement, et la licence active les outils Pro de toutes les extensions Zovo, pas seulement de Mermaid Viewer. Après le paiement par carte (Stripe), votre clé de licence s’affiche sur la page suivante. Dans VS Code, lancez « Zovo Pro: Enter Zovo Pro license key » depuis la Command Palette et collez la clé. Elle est vérifiée sur votre ordinateur, sans connexion réseau. Avec GitHub Sponsors, choisissez le palier "$19 one time", puis lancez « Zovo Pro: I already paid: unlock with GitHub Sponsors ».

Une équipe de 5 personnes paie 59 USD une seule fois (par carte). Toutes les règles et tous les outils Pro sont sur la page Zovo Pro (en anglais).

Étapes dans Cursor, Windsurf ou VSCodium

1. Ouvrez la vue Extensions avec Ctrl+Maj+X (Cmd+Maj+X sur macOS).
2. Cherchez zovo.mermaid-viewer et cliquez sur Install. Cursor, Windsurf et VSCodium installent les extensions depuis Open VSX, où celle-ci s’appelle zovo/mermaid-viewer.
3. Si votre éditeur n’a pas de galerie, téléchargez le fichier .vsix sur la page Open VSX et lancez « Extensions: Install from VSIX... ».
4. Ensuite, tout fonctionne comme dans VS Code.

Ce que fait Mermaid Viewer

• Flowchart, sequence, class, state, ER, Gantt, pie, gitGraph, mindmap, timeline, sankey, XY chart, block, C4, architecture et les autres types que connaît Mermaid 12.3.0.
• Les erreurs sont soulignées sur leur ligne et listées dans le panneau Problems. Le dernier diagramme correct reste affiché, et un bloc cassé dans un fichier Markdown ne cache pas les autres.
• Zoom de 1 % à 3 200 % sous le pointeur, avec déplacement et pincement au trackpad.
• Export SVG avec des libellés en texte simple pour les wikis Azure DevOps et GitHub.
• Fond à la couleur de l’éditeur, blanc, transparent ou d’une couleur au choix, utilisé aussi pour les exports.

Ce qu’il ne fait pas

• L’extension n’ajoute pas de diagrammes à l’aperçu Markdown de VS Code. Elle ouvre son propre panneau d’aperçu.
• Les formules dans les libellés ($$...$$) peuvent mal s’afficher, car les polices KaTeX ne sont pas incluses.
• Les packs d’icônes que Mermaid charge depuis Internet ne sont pas chargés. Les icônes intégrées fonctionnent.
• Les diagrammes de plus de 500 000 caractères ou de 2 000 liens ne sont pas dessinés tant que vous n’augmentez pas la limite (réglages mermaidViewer.maxTextSize et mermaidViewer.maxEdges).
• Un dessin qui prend plus de 10 secondes est arrêté (réglage mermaidViewer.renderTimeoutSeconds).

Questions fréquentes

Pour aller plus loin

Le guide en anglais donne plus de détails et d’autres options. Chaque fonction et chaque réglage sont décrits sur la page de Mermaid Viewer (en anglais).

Faits vérifiés le 12 novembre 2026 sur la version actuelle du Marketplace.