VS Code Extensions
Mermaid Retina

Mermaid Retina

by NipunSGeeTH

Mermaid Retina is a VS Code extension for live Mermaid diagram preview and export, supporting Markdown, .mmd, and .mermaid files with PNG, JPG, PDF, SVG, and MMD export options, customization, and large-graph clipboard transfer.

Downloads

646

Rating

5.0 / 5 (1)

Version

0.0.9

Last updated

Apr 20, 2026

How To Use

From Side Preview

  1. Open any .md, .mmd, or .mermaid file
  2. Right-click and select Mermaid Retina: Open Side Preview
  3. Right-click on any graph in the preview panel
  4. Click Export graph to open workbench with that specific graph

From Editor

  1. Create yourfilename.mmd, .mermaid, or Markdown file with Mermaid fences
  2. Write Mermaid graph code
  3. Right-click in editor
  4. Click Mermaid Retina: Open Workbench
  5. Accept browser open prompt
  6. Browser workbench opens with your code

Large Graph Handling

  • Automatic clipboard transfer: Graphs too large for URL transfer are automatically copied to your clipboard
  • Seamless workflow: If prompted, simply paste (Ctrl+V / Cmd+V) the code in the workbench
  • No data loss: Full graph code is preserved regardless of size

Video Preview

Features

Export & Sharing

  • Right-click export from editor to workbench
  • Context menu export from preview panel
  • Automatic clipboard transfer for large graphs (no truncation)
  • Full-code preservation for all graph sizes

Formats

  • PNG export (high-quality)
  • JPG export
  • PDF export
  • SVG export
  • MMD source

Customization

  • Theme presets
  • Scale control
  • PDF size options
  • Transparent background
  • Canvas background color

VS Code Integration

  • Right-click context menu
  • Command palette support
  • Mermaid syntax highlighting
  • Mermaid language support
  • Custom file icons for .mmd and .mermaid files

Default URL

  • Website
  • https://mermaid.nipunsgeeth.top
  • Website: https://mermaid.nipunsgeeth.top
  • Repository: https://github.com/NipunSGeeTH/Mermaid-Retina

Commands

Mermaid Retina: Open Workbench

  • Opens the Mermaid Retina workbench in your browser
  • From editor: launches with active file code (if it's a valid Mermaid graph)
  • From preview: select a graph and use Export graph to send it to workbench
  • Supports large graphs with automatic clipboard fallback

Mermaid Retina: Open Side Preview

  • Opens a live preview panel alongside your editor
  • Renders Mermaid graphs in real-time as you edit
  • Right-click any graph to access Export graph option
  • Supports Markdown files with Mermaid code fences and dedicated .mmd/.mermaid files

Side Preview Features

  • Live rendering: Graphs update instantly as you type
  • Markdown support: Full Markdown rendering with embedded graphs
  • Syntax highlighting: Code blocks displayed with language highlighting
  • Context menu: Right-click on graphs to export or copy
  • Multi-graph support: Preview and export individual graphs from large documents

Settings

  • mermaidRetina.workbenchUrl: Custom workbench URL (defaults to https://mermaid.nipunsgeeth.top)

Clipboard Transfer

When exporting large graphs, the extension automatically detects if the code exceeds safe URL limits and:

  1. Copies the full Mermaid code to your clipboard
  2. Opens the workbench in a new browser tab
  3. Shows a notification to paste the code (Ctrl+V / Cmd+V)

This ensures no data loss for complex or large Mermaid diagrams.

License

  • MIT License