MD Viewer - Markdown & Mermaid Preview

A clean and modern Markdown preview extension for VS Code with Mermaid diagram support.

Features

• Clean Markdown Rendering - GitHub-style markdown appearance
• Mermaid Diagram Support - Flowcharts, sequence diagrams, gantt charts and more
• Plan File Support - YAML frontmatter with name, overview, and todos
• Interactive Todos - Click to toggle status, dropdown for quick changes
• Collapsible Sections - Click headings to collapse/expand content
• Multi-Panel Support - Open multiple previews for different files
• PDF Export - Export to PDF with print-friendly styling
• Theme Aware - Automatically adapts to VS Code theme

Usage

1. Open any .md file
2. Press Cmd+Shift+V (Mac) or Ctrl+Shift+V (Windows/Linux)
3. Or click the eye icon in the editor title bar

Plan File Format

You can use YAML frontmatter to create structured plan documents:

---
name: Project Name
overview: Brief description of the project
todos:
  - id: task1
    content: First task description
    status: completed
  - id: task2
    content: Second task description
    status: in_progress
  - id: task3
    content: Third task description
    status: pending
---

Todo Statuses

• pending - Not started
• in_progress - Currently working on
• completed - Finished
• cancelled - No longer needed

Mermaid Support

Create diagrams using mermaid code blocks:

flowchart TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Commands

Development

# Install dependencies
npm install

# Compile
npm run compile

# Package
npm run package

License

MIT