Mermaid version update #1533
Description
Proposal
Issue Title Suggestion: Persistent "Syntax error in graph mermaid version 8.8.0" in Markdown Preview When Rendering Copilot-Generated Mermaid Diagrams
Description:
I'm experiencing a recurring syntax error in the Markdown preview when trying to render Mermaid diagrams generated by GitHub Copilot in VS Code. The error message is consistently "Syntax error in graph mermaid version 8.8.0", which appears every time I generate and preview a Mermaid graph (e.g., via Copilot Chat prompting "@workspace Create a Mermaid graph TD for a simple workflow"). This prevents proper visualization of diagrams in the built-in Markdown preview, even for basic syntax that works fine in external tools like the Mermaid Live Editor.
This issue seems tied to an outdated Mermaid version (8.8.0) being used by the preview renderer, as modern Copilot outputs often include features (e.g., conditional edge labels like -->|Label|) that aren't fully supported in older versions. I've tried the workarounds from the extension's FAQ (e.g., restarting VS Code, disabling other extensions, and reloading with extensions disabled), but the error persists. Installing the separate "Markdown Preview Mermaid Support" extension (as recommended in the FAQ) also doesn't resolve it—the preview still defaults to the old version.
Steps to Reproduce:
Ensure "Markdown All in One" extension is installed and enabled.
Open a new .md file in VS Code.
Use GitHub Copilot Chat (via Ctrl+Shift+P > "Copilot: Open Chat") and prompt: "Generate a Mermaid graph TD flowchart for a user authentication workflow, including conditional branches."
Paste the generated Mermaid code into the .md file within a code block (e.g., mermaid ... ).
Open the Markdown preview (Ctrl+Shift+V).
Observe the error: "Syntax error in graph mermaid version 8.8.0" in the preview pane, with the diagram failing to render.
Expected Behavior:
The Mermaid diagram should render correctly using a modern version (e.g., 10.x+), compatible with Copilot's generated syntax, without syntax errors.
Environment Details:
VS Code Version: 1.94.0 (or latest stable as of September 20, 2025)
Extension Version: Markdown All in One v3.6.2 (or latest)
GitHub Copilot Version: v1.200.0 (or latest)
OS: Windows 11
Mermaid Code Example Causing Error (from Copilot generation):
text
graph TD
A[User Input] --> B[InputValidation.tsx]
B --> C[ContextualPrompts.tsx]
C --> D[generateSmartPrompts]
D --> E["Stage-specific Bubbles"]
E --> F[handlePromptSelection]
F --> G[PageRendering.tsx]
G --> H[AI Service Selection]
H --> I{Strategy Decision}
I --> J[Direct AI Processing]
I --> K[Dual AI Comparison]
J --> L[ai.service.ts]
K --> L
L --> M[getSystemPrompt]
M --> N["Stage-specific Prompts"]
N --> O[AI Model Processing]
O --> P[Response Analysis]
P --> Q[Stage Progression Logic]
Q --> R[Updated Conversation State]
R --> A
Error Log (from VS Code Output > "Markdown" channel): Syntax error in graph mermaid version 8.8.0 (no additional stack trace or line-specific details provided)
Additional Context:
This happens specifically with Copilot-generated diagrams but also affects manually pasted modern Mermaid syntax. The FAQ points to installing the "Markdown Preview Mermaid Support" extension[marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid), but it doesn't override the renderer in your extension's preview. Updating to integrate Mermaid 10.x+ natively (as done in Visual Studio's Markdown editor per recent Microsoft updates) would resolve this permanently and improve Copilot integration.
Proposed Fix Suggestions (from research):
Bundle or force-require the latest Mermaid.js (10.x+) in the preview renderer.
Add a config option like markdown.mermaid.version to select the renderer version.
Auto-detect and warn on incompatible syntax, suggesting syntax tweaks for older versions.
Ensure compatibility with "Mermaid Preview" or "Mermaid Chart" extensions for seamless Copilot workflows.
I'd be happy to test a development build or provide more logs/profiles if needed. Thanks for maintaining this essential extension—looking forward to a resolution!