---
title: "vitepress-mermaid-viewer — interactive Mermaid diagrams for VitePress"
description: "VitePress plugin that renders Mermaid code blocks as interactive diagrams with zoom, pan, fullscreen, and SVG/PNG export. Keyboard accessible."
url: https://symonov.com/projects/vitepress-mermaid-viewer/
---

# vitepress-mermaid-viewer

Mermaid diagrams for VitePress with interactive zoom, pan, and fullscreen viewing.

**2026** · by **Dmytro Symonov** · shipped · `vitepress` `mermaid` `typescript` `vue`

[docs](https://kassaila.github.io/vitepress-mermaid-viewer/) [github ↗](https://github.com/Kassaila/vitepress-mermaid-viewer) [npm ↗](https://www.npmjs.com/package/vitepress-mermaid-viewer)

## the problem

VitePress renders Mermaid code blocks as static SVGs. Complex diagrams — architecture maps, sequence flows, ER schemas — become unreadable at default scale. Existing plugins either don’t support interaction or break on dark mode and touch devices.

## the approach

A VitePress plugin that intercepts ` ```mermaid ` fences and renders them as interactive `<Mermaid>` components. Click any diagram to open a fullscreen viewer with zoom (buttons, mouse wheel, pinch-to-zoom), pan/drag, keyboard navigation, and SVG/PNG download.

Dark/light theme reactivity out of the box. Per-page theme override via `mermaidTheme` frontmatter. Fully keyboard accessible — Enter/Space to open, +/-/0/arrows inside the viewer, ARIA labels and focus management.

Setup is one line with the `withMermaid()` wrapper, or manual via `MermaidPlugin` + `MermaidMarkdown` for fine-grained control.

## stack

- TypeScript, Vue 3
- VitePress plugin architecture (Vite plugin + markdown-it plugin)
- Mermaid.js for diagram rendering

## links — external resources

- docs: [https://kassaila.github.io/vitepress-mermaid-viewer/](https://kassaila.github.io/vitepress-mermaid-viewer/)
- github: [https://github.com/Kassaila/vitepress-mermaid-viewer](https://github.com/Kassaila/vitepress-mermaid-viewer)
- npm: [https://www.npmjs.com/package/vitepress-mermaid-viewer](https://www.npmjs.com/package/vitepress-mermaid-viewer)