---
layout: home
title: VitePress Mermaid Viewer — Zoom, Pan & Fullscreen Diagrams
titleTemplate: false
description: Render mermaid code blocks as interactive diagrams in VitePress. Zoom, pan, fullscreen viewer with light/dark theme reactivity.

hero:
  name: Mermaid Viewer
  text: Interactive mermaid diagrams for VitePress
  tagline: Zoom, pan, and fullscreen viewer for mermaid diagrams.
  image:
    src: /logo.svg
    alt: VitePress Mermaid Viewer
  actions:
    - theme: brand
      text: Get Started
      link: /guide/usage
    - theme: alt
      text: Examples
      link: /guide/examples
    - theme: alt
      text: GitHub
      link: https://github.com/Kassaila/vitepress-mermaid-viewer
    - theme: alt
      text: "\u2B50 Star"
      link: https://github.com/Kassaila/vitepress-mermaid-viewer/stargazers

features:
  - icon: "\U0001F4CA"
    title: Mermaid Diagrams
    details: Renders mermaid and mmd code blocks as diagrams. Supports all mermaid diagram types.
  - icon: "\U0001F50D"
    title: Interactive Viewer
    details:
      Click any diagram to open a fullscreen viewer. Zoom with wheel, pinch, or buttons. Pan with
      drag.
  - icon: "\U0001F319"
    title: Theme Reactivity
    details: Automatically switches between light and dark themes.
  - icon: "\U0001F4E6"
    title: Easy Setup
    details: Single wrapper — no extra configuration. Or use granular exports.
---