Skip to content

Render Mermaid Markdown

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

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

From VSIX File

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

Usage

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

Method 2: Command Palette

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

In the Explorer panel, right-click on a markdown file
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