Skip to content

VitePress Mermaid Renderer

Transform static Mermaid diagrams into interactive visualizations in VitePress. Enable smooth zooming, panning, fullscreen dialogs, and dynamic theme adaptations.

Stay up to date with new releases in the CHANGELOG.

Key Features

  • Smooth Zooming: Incrementally zoom in/out with reactive percentage readouts.
  • Intuitive Panning: Drag to navigate and explore complex, multi-layered diagrams.
  • Single-Click Code Copy: Extract raw Mermaid source code instantly.
  • Instant View Reset: Restore zoom, pan, and transform coordinates to default in one click.
  • Flexible Fullscreen Modes: Choose between native browser Fullscreen API or custom inline modal overlays.
  • Vibrant Adaptive Themes: Smoothly matches Light/Dark mode transitions.
  • Static SVG Mode: Render theme-aware diagrams without controls, navigation, fullscreen, or downloads.
  • High-Quality Downloads: Export and download diagrams as SVG, PNG, or JPG.
  • Complete Customization: Selectively toggle toolbar buttons per display mode (desktop, mobile, fullscreen).
  • i18n Support: Easily localize all tooltips and states dynamically using VitePress locale data.

Documentation & Examples

For full configuration guidelines, advanced security options, custom toolbar settings, multilinguality (i18n) setups, and live sandbox demonstrations, please visit official website:

vitepress-mermaid-renderer.vercel.app


Contributing & Development

Please refer to CONTRIBUTING.md for more details.


If you found this project helpful, please consider giving it a star on GitHub!

About

Transform your static Mermaid diagrams into interactive, dynamic visualizations in VitePress! This powerful plugin brings life to your documentation by enabling interactive features like zooming, panning, and fullscreen viewing.

Topics

Resources

Code of conduct

Contributing

Security policy

Stars

66 stars

Watchers

2 watching

Forks

Releases

Sponsor this project

Used by

Contributors

Languages