v-beautiful-mermaid

Appearance

Vue Component

Standalone Vue 3 component to render diagrams in any application.

Get Started

VitePress Plugin

VitePress plugin with build-time SVG rendering and full Markdown integration.

Get Started
Powered by Beautiful Mermaid
DSL AST Vector Text Input Parse Layout SVG ASCII Theme Output 
●───●     ╭───────╮     ╭───────╮     ╭────────╮             ╭───────╮     ╭───────╮     ╭────────╮     ╔═══╗
│   │     │       │     │       │     │        │             │       │     │       │     │        │     ║   ║
│   │────►│ Input ├─DSL►│ Parse ├─AST►│ Layout │  ├─Vector──►│  SVG  ├────►│ Theme ├────►│ Output ├────►║   ║
│   │     │       │     │       │     │        │             │       │     │       │     │        │     ║   ║
●───●     ╰───────╯     ╰───────╯     ╰────┬───╯             ╰───────╯     ╰───────╯     ╰────────╯     ╚═══╝
                                           │                                   ▲                             
                                           │                                   │                             
                                           │                                   │                             
                                           │                                   │                             
                                           │                                   │                             
                                           │                 ╭───────╮         │                             
                                           │                 │       │         │                             
                                           └──────Text──────►│ ASCII ├─────────┘                             
                                                             │       │                                       
                                                             ╰───────╯
✨

Beautiful by Default

Uses beautiful-mermaid for a modern and clean look out of the box. No more clunky, outdated diagram styles.

⚡

Build-time Rendering

Diagrams are pre-rendered during build. This means zero runtime overhead, faster page loads, and perfect SEO.

🌐

Full SSR Support

Works perfectly in server-side rendering environments. No browser DOM required for the initial render.