Reviewer - PlantUML & Mermaid Viewer

Transform PlantUML and Mermaid diagrams into interactive SVG previews directly within VS Code, powered by the ReViewer engine.
100% offline & client-side — zero server dependencies, no external Java / Graphviz installation needed.

📄 License: MIT | ⚡ Zero Server Dependencies

✨ Features

• Instant Live Preview: Automatically updates diagrams in real time as you edit your .puml, .mmd, or markdown files.
• Interactive Zoom & Pan:
  • Smooth mouse wheel zoom (zooms precisely towards the cursor).
  • Drag-and-drop canvas panning.
  • Quick-access controls: Zoom In (+), Zoom Out (-), Reset (100%), and Fit to Window.
• Copy to Clipboard:
  • Copy SVG: 1-click copy of standard SVG markup.
  • Copy PNG: High-resolution bitmap image copied directly to clipboard.
• Export to File:
  • Save diagram as .svg vector file via VS Code save dialog.
  • Save diagram as .png image file.
• Theme Synchronization: Adapts automatically to VS Code Dark, Light, and High Contrast color themes.
• 100% Offline & Private: Renders diagrams locally using render.min.js. Your diagram code never leaves your computer.

🚀 Quick Start

1. Open a Diagram File

Open any PlantUML file (.puml, .plantuml, .wsd, .iuml) or Mermaid file (.mmd, .mermaid) in your editor.

2. Launch the Preview

You can open the live preview in two ways:

• Click the Reviewer: Open Preview to the Side icon in the editor title bar.
• Open the Command Palette (Cmd+Shift+P on macOS / Ctrl+Shift+P on Windows/Linux) and run:
  • ReViewer: Open Preview
  • ReViewer: Open Preview to the Side
  • ReViewer: Open Locked Preview to the Side

3. Live Editing

Edit your diagram source code and watch the preview update instantly side-by-side.

📊 Supported Diagram Types

PlantUML Diagrams

• Sequence Diagrams (@startuml ... @enduml)
• Activity Diagrams (start ... stop, if (...) then (...))
• Class & Object Diagrams (class, interface, relationships)
• Use Case Diagrams (@startusecase or usecase ... as ...)
• Mindmaps (@startmindmap ... @endmindmap)
• Work Breakdown Structure (WBS) (@startwbs ... @endwbs)
• Timing Diagrams (@starttiming ... @endtiming)
• Gantt Charts (@startgantt ... @endgantt)
• State Diagrams (@startstate ... @endstate)
• Data Diagrams (@startjson, @startyaml)

Mermaid Diagrams

• Sequence Diagrams (sequenceDiagram)
• Class Diagrams (classDiagram)
• Entity-Relationship (ER) Diagrams (erDiagram)
• Mindmaps (mindmap)
• Use Case Diagrams (usecase-beta)
• Gantt Charts (gantt)
• State Diagrams (stateDiagram, stateDiagram-v2)

💬 Support & Inquiries

• Author: Marius & Alexandru
• Website: https://www.chirila.ch
• Email Support: info@chirila.ch
• License: MIT (included in package)