Skip to content

Mermaid Retina

How To Use

From Side Preview

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

From Editor

Create yourfilename.mmd, .mermaid, or Markdown file with Mermaid fences
Write Mermaid graph code
Right-click in editor
Click Mermaid Retina: Open Workbench
Accept browser open prompt
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

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

Links

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:

Copies the full Mermaid code to your clipboard
Opens the workbench in a new browser tab
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