Render Mermaid Markdown View

A VSCode extension for previewing markdown files with mermaid flowchart support.

Features

• Preview markdown files with beautiful styling
• Render mermaid flowchart diagrams with white background
• Right-click context menu integration
• Command palette support
• Explorer context menu support

Installation

From Visual Studio Marketplace

1. Open VSCode
2. Go to Extensions panel (Ctrl+Shift+X)
3. Search for "Render Mermaid Markdown"
4. Click Install

From VSIX File

1. Download the .vsix file
2. In VSCode, open Extensions panel (Ctrl+Shift+X)
3. Click the "..." menu in the top-right corner
4. Select "Install from VSIX..."
5. Select the downloaded .vsix file

Usage

Method 1: Right-click Context Menu

1. Open a markdown file
2. Right-click anywhere in the editor
3. Select "Preview Markdown with Mermaid"

Method 2: Command Palette

1. Open a markdown file
2. Press Ctrl+Shift+P (Cmd+Shift+P on macOS)
3. Type "Preview Markdown with Mermaid"
4. Select the command from the list

Method 3: Explorer Context Menu

1. In the Explorer panel, right-click on a markdown file
2. Select "Preview Markdown with Mermaid"

Features

• Markdown Rendering: Supports all standard markdown features
• Mermaid Diagrams: Renders mermaid flowcharts, diagrams, and graphs with white background
• Syntax Highlighting: Code blocks with syntax highlighting
• Tables: Beautiful table rendering
• Responsive Layout: Adapts to different window sizes

Keyboard Shortcuts

You can add custom keyboard shortcuts by editing keybindings.json:

{
  "key": "ctrl+shift+m",
  "command": "render-mermaid-markdown.preview",
  "when": "editorLangId == markdown"
}

Requirements

• VSCode >= 1.85.0
• Internet connection (for mermaid CDN)

Known Issues

• Mermaid diagrams require an internet connection to load the mermaid library
• Large markdown files may take longer to render

Feedback

If you encounter any issues or have suggestions, please report them in the project repository.

License

MIT

Repository

GitHub

Download

• VSCode Marketplace
• npm Package