vitepress-theme-techdoc-shenyun 🚀

企业级技术演讲风 VitePress 增强视觉主题与 Mermaid 交互扩展包
拥有 GitHub Docs 级配色标准、1000% 极速交互缩放、长图浅色进度轴、状态机居中排版与 Badge-as-Copy 语言复制一体化设计。

✨ 核心特性一览 (Key Features)

• 🎨 GitHub Docs 官方设计规范：完美对齐 GitHub Light 与 GitHub Dark 视觉标准，节点柔和清爽，连线与高对比度药丸标签一目了然。
• 🔍 全屏 1000% 极速无级缩放 (MermaidZoom)：
  • 缩放倍率支持最高 1000% (10.0x)。
  • 智能手势识别：超长图在图片内滑动为上下平移，普通图在图片内滑动直接放大缩小。
  • 大图点击放大：弹窗大图模式下点击图片即刻放大，智能区分拖拽平移。
  • 水平图表自适应居中：横向架构图展开时自动在浏览器正中心悬浮呈现。
  • 0 延迟实时锐利：彻底消除 GPU 纹理重绘卡顿，文字即刻高清呈现。
• 📍 长图浅色半透明进度轴：超长图表移动时右侧自动浮现磨砂浅色高亮滑轨与科技蓝滑块，900ms 静止后平滑淡出。
• 📊 状态机（State Diagram）排版优化：彻底解决状态标签断字竖排问题，所有状态水平+垂直绝对居中包裹在药丸框内。
• 📋 Badge-as-Copy 代码块语言复制一体化：
  • 消除代码块右上角双重重合方块。
  • 平时显示大写语言名称（TS, JSON, BASH）。
  • Hover 呈现交互手型与 📋 COPY 提示。
  • 点击后在原位紧凑切换为 ✓ Copied 翡翠绿反馈。

📦 快速安装 (Installation)

在你的 VitePress 项目根目录下运行：

# 使用 pnpm
pnpm add vitepress-theme-techdoc-shenyun vitepress-plugin-mermaid mermaid -D

# 或使用 npm / yarn
npm install vitepress-theme-techdoc-shenyun vitepress-plugin-mermaid mermaid -D

🚀 快速上手 (Quick Start)

步骤 1：在 .vitepress/config.mts 中应用配置

使用提供的 withTechDocMermaid 高阶函数包裹你的 VitePress 配置：

// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { withTechDocMermaid } from "vitepress-theme-techdoc-shenyun";

export default withTechDocMermaid(
  defineConfig({
    title: "My Tech Documentation",
    description: "Documentation powered by vitepress-theme-techdoc-shenyun",
    cleanUrls: true,
    themeConfig: {
      // 你的常规 VitePress 导航与侧边栏配置
    },
  })
);

步骤 2：在 .vitepress/theme/index.ts 中引入主题样式与组件

// .vitepress/theme/index.ts
import DefaultTheme from "vitepress/theme";
import { setupTechDocTheme } from "vitepress-theme-techdoc-shenyun";
import "vitepress-theme-techdoc-shenyun/style.css";

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // 自动注册 MermaidZoom 全屏交互组件及全局 DOM 监听
    setupTechDocTheme(app);
  },
};

🛠️ 项目工程与本地构建

# 安装依赖
pnpm install

# 监听开发模式
pnpm dev

# 编译打包生成 dist/ 产物
pnpm build

📄 开源许可证 (License)

MIT License © 2026 bian.hanzhang