Feature Request: Native Mermaid Support in Markdown Preview

[iwangbowen]

Type: Feature Request

Feature Request: Native Mermaid Support in Markdown Preview

Summary

Add built-in Mermaid diagram rendering support to VS Code's native Markdown preview functionality, eliminating the need for third-party extensions.

Motivation

Currently, VS Code requires additional extensions to preview Mermaid diagrams in Markdown files. With the increasing adoption of AI coding agents and tools that frequently generate Markdown content containing Mermaid diagrams, native support would significantly improve the developer experience.

Current State

• Users must install third-party extensions to view Mermaid diagrams
• This creates friction when sharing projects or onboarding new team members
• Inconsistent experience across different setups and extension configurations

Expected Behavior

• Mermaid code blocks (```mermaid) should automatically render as diagrams in the Markdown preview
• Support for common Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, state diagrams, etc.
• Live preview updates when editing Mermaid syntax
• Export capabilities for rendered diagrams

Use Cases

1. AI-Generated Documentation: Modern AI coding assistants frequently generate Markdown files with embedded Mermaid diagrams for architecture documentation, flowcharts, and system designs
2. Technical Documentation: Teams commonly use Mermaid for documenting workflows, database schemas, and system architectures
3. Project Collaboration: Native support would ensure consistent diagram rendering across all team members without requiring extension setup

Benefits

• Improved out-of-the-box experience for Markdown users
• Reduced dependency on third-party extensions
• Better integration with VS Code's existing Markdown ecosystem
• Enhanced support for modern documentation workflows

VS Code version: Code - Insiders 1.102.0-insider (dd48c7f, 2025-06-16T05:04:17.418Z)
OS version: Windows_NT x64 10.0.26100
Modes: