MD View is a Markdown preview extension for VS Code and Cursor with table-of-contents navigation, synchronized scrolling, Mermaid diagrams, and local image management.
Preview
✨ Features
Markdown Preview and TOC Navigation
Renders Markdown content and automatically generates a table of contents on the left.
Jumps to a heading when you select an item in the table of contents.
Refreshes the preview while you edit the document.
Synchronizes scrolling in both directions between the editor and preview.
Uses the side under the pointer or focus as the scroll source, so preview refreshes will not drag the editor while you type.
Mermaid Diagram Preview
Renders mermaid code blocks automatically and uses ELK layout for complex diagrams.
Switches between diagram and source views.
Provides a large viewer with wheel zoom, drag-to-pan, and reset controls.
Follows the current VS Code or Cursor light/dark theme for diagrams and source code.
Shows the error and original source when Mermaid syntax is invalid.
Paste and Insert Images
Paste images: saves clipboard images to the document's sibling images/ directory and inserts Markdown references.
Insert images: selects local image files from the Command Palette or preview toolbar, with multi-select support.
References images already located under the current document's images/ directory without copying them again.
Displays local images from different workspace directories and supports click-to-enlarge preview.
🚀 Usage
Open Preview
Shortcut: Ctrl+Shift+M on Windows/Linux or Cmd+Shift+M on macOS.
Command Palette: run “MD View: Open Preview” / “MD View: 打开预览”.
Editor title bar: click the MD View preview icon.
Paste a Clipboard Image
Copy a screenshot or image to the clipboard.
Place the cursor at the target position in the Markdown editor.
Press Ctrl+Shift+Alt+V on Windows/Linux or Cmd+Shift+Alt+V on macOS, or click “Paste Image” in the preview toolbar.
The image is saved as images/image-<timestamp>.png, and its Markdown reference is inserted automatically.
Insert Local Images
Save the Markdown file locally and place the cursor at the target position.
Run “MD View: Insert Image” / “MD View: 插入图片”, or click the insert-image button in the preview toolbar.
Select one or more images. They are inserted one per line in selection order.
Press F5 in VS Code to launch an Extension Development Host for testing.
Related Projects
DemoView: A tool for Markdown document preview, sharing, and business demos, with CLI workflow support. To learn more or request access, contact mdview@sikilab.net.
