Mermaid Preview Extension

A VS Code extension for previewing and editing Mermaid diagrams with live preview and zoom/pan functionality.

Features

🔍 Live Preview

• Real-time Mermaid diagram rendering
• Side-by-side editing and preview
• Auto-refresh on file changes
• Support for all Mermaid diagram types
• Zoom controls (10% - 10000%)
  • Zoom in/out buttons
  • Direct zoom level input
  • Reset to 100% button
  • Keyboard shortcuts: Cmd+Shift+Plus, Cmd+Shift+Minus, Cmd+Shift+0

📤 Export Functionality

• SVG Export: High-quality vector format preserving all diagram details
• PNG Export: Raster format with 2x scaling for crisp images
• Choose Save Location: Interactive file save dialog to select where to save exported files
• Multiple access methods:
  • Export buttons in the preview toolbar
  • Command palette: "Export as SVG" and "Export as PNG"
  • Context menu in editor and explorer
• Smart file naming with timestamps
• Error handling with detailed feedback
• VS Code Integration: Uses native VS Code save dialog for better user experience

📝 Supported Diagram Types

• Flowcharts (graph, flowchart)
• Sequence Diagrams (sequenceDiagram)
• Class Diagrams (classDiagram)
• State Diagrams (stateDiagram-v2)
• Entity Relationship Diagrams (erDiagram)
• User Journey (journey)
• Gantt Charts (gantt)
• Pie Charts (pie)
• Git Graphs (gitgraph)
• Mindmaps (mindmap)
• Timelines (timeline)
• Sankey Diagrams (sankey-beta)
• XY Charts (xyChart-beta)
• Quadrant Charts (quadrantChart)
• Requirement Diagrams (requirementDiagram)

Usage

Opening a Mermaid File

1. Create or open a file with .mmd or .mermaid extension
2. The file will automatically be recognized as a Mermaid diagram
3. Use the "Open Mermaid Preview" command or click the preview button in the editor title

Code Snippets

Use these prefixes followed by Tab to insert common diagram templates:

• mermaid-flowchart - Basic flowchart
• mermaid-sequence - Sequence diagram
• mermaid-class - Class diagram
• mermaid-state - State diagram
• mermaid-er - ER diagram
• mermaid-gantt - Gantt chart
• mermaid-pie - Pie chart
• mermaid-journey - User journey

Zoom and Pan Controls

Control the preview zoom and navigation for better diagram visibility:

Zoom Controls:

• Zoom In/Out: Use the + and − buttons in the preview toolbar
• Direct Input: Enter a specific zoom percentage (10%-10000%) in the input field
• Reset: Click "100%" to return to default zoom level
• Mouse Wheel: Hold Ctrl and scroll to zoom in/out (natural scrolling)
• Keyboard Shortcuts:
  • Cmd+Shift+Plus (Mac) / Ctrl+Shift+Plus (Windows/Linux): Zoom In
  • Cmd+Shift+Minus (Mac) / Ctrl+Shift+Minus (Windows/Linux): Zoom Out
  • Cmd+Shift+0 (Mac) / Ctrl+Shift+0 (Windows/Linux): Reset Zoom

Pan/Drag Navigation:

• Click and Drag: Click anywhere on the diagram and drag to pan around
• Visual Feedback: Cursor changes to indicate draggable areas (grab/grabbing)
• Reset Position: Use the zoom reset button to return to center position

The zoom and pan features are especially useful for:

• Large, complex diagrams that extend beyond the preview window
• Detailed inspection of specific diagram elements
• Presentations where you need to focus on particular sections
• High-resolution displays where diagrams need scaling
• Navigating through extensive flowcharts, sequence diagrams, or mind maps

Example

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[End]
    C --> E((Result))
    E --> D
    
    subgraph "Processing"
        C
        E
    end
    
    classDef errorClass fill:#f96
    class D errorClass

Commands

The extension provides the following commands:

File Operations

• Open Mermaid Preview: Opens the live preview panel for the current Mermaid file

Export Commands

• Export as SVG: Export the current diagram as an SVG file
• Export as PNG: Export the current diagram as a PNG file

Zoom Commands

• Zoom In: Increase zoom level by 10% (available when preview is open)
• Zoom Out: Decrease zoom level by 10% (available when preview is open)
• Reset Zoom: Reset zoom level to 100% (available when preview is open)

These commands can be accessed via:

• Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
• Editor Title Bar (when editing .mmd files or when preview is active)
• Keyboard Shortcuts (when preview is focused)

File Extensions

The extension recognizes these file extensions:

• .mmd
• .mermaid

Configuration

The extension uses the language configuration file to provide:

• Comment toggling (%% comments)
• Auto-closing brackets and quotes
• Smart indentation rules
• Word pattern recognition

Following extension guidelines

Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.

• Extension Guidelines

Working with Markdown

You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:

• Split the editor (Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
• Toggle preview (Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
• Press Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.

For more information

• Visual Studio Code's Markdown Support
• Markdown Syntax Reference

Enjoy!