​

Visualiser les Diagrammes Mermaid dans Cursor

​

🎯 Vue d’ensemble

​

📦 Option 1 : Extension Markdown Mermaid (Recommandée)

​

Installation

1. Ouvrez Cursor
2. Allez dans Extensions (Ctrl+Shift+X ou Cmd+Shift+X)
3. Recherchez “Markdown Preview Mermaid Support” par Matt Bierner
4. Installez l’extension

​

Utilisation

1. Ouvrez un fichier Markdown contenant un diagramme Mermaid (ex: docs/specifications/swing-position-workflow.md)
2. Appuyez sur Ctrl+Shift+V (ou Cmd+Shift+V sur Mac) pour ouvrir la prévisualisation Markdown
3. Le diagramme Mermaid sera rendu automatiquement dans la prévisualisation

​

Avantages

• ✅ Intégration native dans Cursor
• ✅ Prévisualisation en temps réel
• ✅ Support de tous les types de diagrammes Mermaid
• ✅ Pas besoin d’outils externes

​

📦 Option 2 : Extension Mermaid Markdown Syntax Highlighting

​

Installation

1. Recherchez “Mermaid Markdown Syntax Highlighting” par bpruitt-goddard
2. Installez l’extension

​

Utilisation

​

🌐 Option 3 : Visualisation en Ligne

1. Copiez le code Mermaid du fichier
2. Allez sur Mermaid Live Editor
3. Collez le code
4. Le diagramme sera rendu automatiquement

​

Avantages

• ✅ Aucune installation nécessaire
• ✅ Interface dédiée
• ✅ Export possible (PNG, SVG)

​

🖼️ Option 4 : Génération d’Images avec Mermaid CLI

​

Générer une image depuis un fichier Markdown

# Extraire et générer le diagramme depuis un fichier Markdown
npx mmdc -i docs/specifications/swing-position-workflow.md -o docs/specifications/swing-position-workflow.png

​

Générer depuis un fichier .mmd dédié

1. Créez un fichier diagram.mmd avec le code Mermaid
2. Exécutez :

npx mmdc -i diagram.mmd -o diagram.png
# ou pour SVG
npx mmdc -i diagram.mmd -o diagram.svg

​

Options disponibles

# Thème sombre
npx mmdc -i diagram.mmd -o diagram.png -t dark

# Thème par défaut
npx mmdc -i diagram.mmd -o diagram.png -t default

# Format SVG
npx mmdc -i diagram.mmd -o diagram.svg

# Largeur personnalisée
npx mmdc -i diagram.mmd -o diagram.png -w 2000

​

📝 Script NPM pour Faciliter la Génération

{
  "scripts": {
    "mermaid:generate": "mmdc -i docs/specifications/swing-position-workflow.md -o docs/specifications/swing-position-workflow.png"
  }
}

npm run mermaid:generate

​

🔧 Configuration Recommandée

​

Extensions Cursor/VS Code Recommandées

• bierner.markdown-mermaid : Prévisualisation Mermaid dans Markdown
• bpruitt-goddard.mermaid-markdown-syntax-highlighting : Coloration syntaxique

​

Installation Automatique

​

💡 Astuces

​

Prévisualisation Côte à Côte

1. Ouvrez le fichier Markdown
2. Cliquez sur l’icône de prévisualisation en haut à droite
3. Ou utilisez Ctrl+K V (ou Cmd+K V sur Mac) pour ouvrir la prévisualisation côte à côte

​

Édition en Temps Réel

​

Export depuis Mermaid Live Editor

1. Allez sur mermaid.live
2. Collez votre code Mermaid
3. Cliquez sur “Actions” → “Download PNG” ou “Download SVG”

​

🐛 Dépannage

​

Le diagramme ne s’affiche pas dans la prévisualisation

1. Vérifiez que l’extension est installée et activée
2. Vérifiez que le bloc de code est bien marqué comme mermaid
3. Rechargez la fenêtre Cursor (Ctrl+Shift+P → “Reload Window”)

​

Erreurs de syntaxe Mermaid

• Vérifiez la syntaxe sur mermaid.live
• Consultez la documentation Mermaid

​

📚 Ressources

• Documentation Mermaid
• Mermaid Live Editor
• Extension Markdown Preview Mermaid Support
• Mermaid CLI Documentation

​

🎯 Recommandation

• Intégration native
• Prévisualisation en temps réel
• Pas de dépendance externe
• Support complet de tous les diagrammes