Mermaid Renderer

将静态的 Mermaid 图表转化为 VitePress 中的交互式动态可视化效果！这款强大的插件能为您的文档注入活力，通过支持缩放、平移和全屏查看等交互功能，让文档栩栩如生。

https://www.npmjs.com/package/vitepress-mermaid-renderer
https://github.com/sametcn99/vitepress-mermaid-renderer

安装

npm

npm install -D vitepress-mermaid-renderer

yarn

yarn add -D vitepress-mermaid-renderer

pnpm

pnpm add -D vitepress-mermaid-renderer

bun

bun add -D vitepress-mermaid-renderer

配置

Theme Config

// .vitepress/theme/index.ts
import { h, nextTick, watchEffect, watch } from "vue"; 
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';

import { useData } from "vitepress"; 
import { createMermaidRenderer } from "vitepress-mermaid-renderer"; 

export default {
  extends: DefaultTheme,
  Layout: () => {
    const { isDark } = useData(); 

    const initMermaid = () => { 
      const mermaidRenderer = createMermaidRenderer({ 
        theme: isDark.value ? "dark" : "neutral", 
        startOnLoad: false, 
        flowchart: { 
          useMaxWidth: true, 
          htmlLabels: true, 
        }, 
        sequence: { 
          diagramMarginX: 50, 
          diagramMarginY: 10, 
        }, 
      }); 

      mermaidRenderer.setToolbar({ 
        showLanguageLabel: false, 
        desktop: { 
          zoomIn: "disabled", 
          zoomLevel: "enabled", 
          positions: { vertical: "top", horizontal: "left" }, 
        }, 
        mobile: { 
          zoomLevel: "disabled", 
          positions: { vertical: "bottom", horizontal: "left" }, 
        }, 
        fullscreen: { 
          zoomLevel: "enabled", 
          positions: { vertical: "top", horizontal: "right" }, 
        }, 
      }); 
    }; 

    nextTick(() => initMermaid()); 

    watch( 
      () => isDark.value, 
      () => { 
        initMermaid(); 
      }, 
    ); 

    return h(DefaultTheme.Layout, null, {});
  },
  enhanceApp({ app, router, siteData }) {

  },
} satisfies Theme;

使用

```mermaid:no-line-numbers
---
config:
  theme: neutral
  darkMode: true
  sequence:
    height: 30
---
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

---
config:
  theme: neutral
  darkMode: true
  sequence:
    height: 30
---
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

更多图表语法，请参考 Mermaid 官方文档。