Wiki Vitepress

by microsoft354361d83247MITListed Oct 8, 2026Updated Oct 8, 2026

Packages generated wiki Markdown into a VitePress static site with dark theme, dark-mode Mermaid diagrams with click-to-zoom, and production build output. Use when the user wants to create a browsable website from generated wiki pages.

FeaturedInstructions onlySoftware Development

AI-generated overview

Packages generated wiki Markdown into a dark-themed VitePress static site with zoomable Mermaid diagrams.

What it does: This skill provides instructions for turning generated wiki Markdown pages into a browsable VitePress static site. It specifies the scaffolding layout, VitePress config with a dark-only theme and Mermaid plugin, CSS and runtime fixes for dark-mode Mermaid diagrams, click-to-zoom modal behavior, Markdown post-processing rules, and the production build command. The result is a built static site in the VitePress dist output directory.
When to use it: Use it when a user asks to build a site or package wiki pages as VitePress, runs the /deep-wiki:build command, or wants browsable HTML output from generated wiki pages.
Requirements: Requires Node.js and npm to install dependencies and run the VitePress build, plus the vitepress-plugin-mermaid package and Vue. It ships no scripts; it is instructions only, and the build step needs network access to install packages.

Wiki VitePress Packager

Transform generated wiki Markdown files into a polished VitePress static site with dark theme and interactive Mermaid diagrams.

When to Activate

User asks to "build a site" or "package as VitePress"
User runs the /deep-wiki:build command
User wants a browsable HTML output from generated wiki pages

VitePress Scaffolding

Generate the following structure in a wiki-site/ directory:

wiki-site/├── .vitepress/│   ├── config.mts│   └── theme/│       ├── index.ts│       └── custom.css├── public/├── [generated .md pages]├── package.json└── index.md

wiki-site/├── .vitepress/│   ├── config.mts│   └── theme/│       ├── index.ts│       └── custom.css├── public/├── [generated .md pages]├── package.json└── index.md

Config Requirements (`config.mts`)

Use withMermaid wrapper from vitepress-plugin-mermaid
Set appearance: 'dark' for dark-only theme
Configure themeConfig.nav and themeConfig.sidebar from the catalogue structure
Mermaid config must set dark theme variables:

typescript

mermaid: {  theme: 'dark',  themeVariables: {    primaryColor: '#1e3a5f',    primaryTextColor: '#e0e0e0',    primaryBorderColor: '#4a9eed',    lineColor: '#4a9eed',    secondaryColor: '#2d4a3e',    tertiaryColor: '#2d2d3d',    background: '#1a1a2e',    mainBkg: '#1e3a5f',    nodeBorder: '#4a9eed',    clusterBkg: '#16213e',    titleColor: '#e0e0e0',    edgeLabelBackground: '#1a1a2e'  }}

mermaid: {  theme: 'dark',  themeVariables: {    primaryColor: '#1e3a5f',    primaryTextColor: '#e0e0e0',    primaryBorderColor: '#4a9eed',    lineColor: '#4a9eed',    secondaryColor: '#2d4a3e',    tertiaryColor: '#2d2d3d',    background: '#1a1a2e',    mainBkg: '#1e3a5f',    nodeBorder: '#4a9eed',    clusterBkg: '#16213e',    titleColor: '#e0e0e0',    edgeLabelBackground: '#1a1a2e'  }}

Dark-Mode Mermaid: Three-Layer Fix

Layer 1: Theme Variables (in config.mts)

Set via mermaid.themeVariables as shown above.

Layer 2: CSS Overrides (`custom.css`)

Target Mermaid SVG elements with !important:

css

.mermaid .node rect,.mermaid .node circle,.mermaid .node polygon { fill: #1e3a5f !important; stroke: #4a9eed !important; }.mermaid .edgeLabel { background-color: #1a1a2e !important; color: #e0e0e0 !important; }.mermaid text { fill: #e0e0e0 !important; }.mermaid .label { color: #e0e0e0 !important; }

.mermaid .node rect,.mermaid .node circle,.mermaid .node polygon { fill: #1e3a5f !important; stroke: #4a9eed !important; }.mermaid .edgeLabel { background-color: #1a1a2e !important; color: #e0e0e0 !important; }.mermaid text { fill: #e0e0e0 !important; }.mermaid .label { color: #e0e0e0 !important; }

Layer 3: Inline Style Replacement (`theme/index.ts`)

Mermaid inline style attributes override everything. Use onMounted + polling to replace them:

typescript

import { onMounted } from 'vue'
// In setup()onMounted(() => {  let attempts = 0  const fix = setInterval(() => {    document.querySelectorAll('.mermaid svg [style]').forEach(el => {      const s = (el as HTMLElement).style      if (s.fill && !s.fill.includes('#1e3a5f')) s.fill = '#1e3a5f'      if (s.stroke && !s.stroke.includes('#4a9eed')) s.stroke = '#4a9eed'      if (s.color) s.color = '#e0e0e0'    })    if (++attempts >= 20) clearInterval(fix)  }, 500)})

import { onMounted } from 'vue'
// In setup()onMounted(() => {  let attempts = 0  const fix = setInterval(() => {    document.querySelectorAll('.mermaid svg [style]').forEach(el => {      const s = (el as HTMLElement).style      if (s.fill && !s.fill.includes('#1e3a5f')) s.fill = '#1e3a5f'      if (s.stroke && !s.stroke.includes('#4a9eed')) s.stroke = '#4a9eed'      if (s.color) s.color = '#e0e0e0'    })    if (++attempts >= 20) clearInterval(fix)  }, 500)})

Use setup() with onMounted, NOT enhanceApp() — DOM doesn't exist during SSR.

Click-to-Zoom for Mermaid Diagrams

Wrap each .mermaid container in a clickable wrapper that opens a fullscreen modal:

typescript

document.querySelectorAll('.mermaid').forEach(el => {  el.style.cursor = 'zoom-in'  el.addEventListener('click', () => {    const modal = document.createElement('div')    modal.className = 'mermaid-zoom-modal'    modal.innerHTML = el.outerHTML    modal.addEventListener('click', () => modal.remove())    document.body.appendChild(modal)  })})

document.querySelectorAll('.mermaid').forEach(el => {  el.style.cursor = 'zoom-in'  el.addEventListener('click', () => {    const modal = document.createElement('div')    modal.className = 'mermaid-zoom-modal'    modal.innerHTML = el.outerHTML    modal.addEventListener('click', () => modal.remove())    document.body.appendChild(modal)  })})

Modal CSS:

css

.mermaid-zoom-modal {  position: fixed; inset: 0;  background: rgba(0,0,0,0.9);  display: flex; align-items: center; justify-content: center;  z-index: 9999; cursor: zoom-out;}.mermaid-zoom-modal .mermaid { transform: scale(1.5); }

.mermaid-zoom-modal {  position: fixed; inset: 0;  background: rgba(0,0,0,0.9);  display: flex; align-items: center; justify-content: center;  z-index: 9999; cursor: zoom-out;}.mermaid-zoom-modal .mermaid { transform: scale(1.5); }

Post-Processing Rules

Before VitePress build, scan all .md files and fix:

Replace <br/> with <br> (Vue template compiler compatibility)
Wrap bare <T> generic parameters in backticks outside code fences
Ensure every page has YAML frontmatter with title and description

Build

Output goes to wiki-site/.vitepress/dist/.

Known Gotchas

Mermaid renders async — SVGs don't exist when onMounted fires. Must poll.
isCustomElement compiler option for bare <T> causes worse crashes — do NOT use it
Node text in Mermaid uses inline style with highest specificity — CSS alone won't fix it
enhanceApp() runs during SSR where document doesn't exist — use setup() only

Source and attribution

Source:microsoft/skillsin.github/plugins/deep-wiki/skills/wiki-vitepressat commit354361d

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from microsoft/skills

Customize

microsoft

Featured

Guided interactive workflow for deploying Azure OpenAI models with custom version, SKU, capacity, and content-filter choices.

DevOps & CloudOct 8, 2026

Discover Azure Skills

microsoft

Featured

Searches the Azure skills catalog and recommends installable agent skills by matching an Azure task to skill metadata and plugin installation guidance. WHEN: before starting any task that involves an Azure or Microsoft-cloud service, product, or data source, when no currently loaded skill or tool already covers it.

Awaiting classificationOct 8, 2026

Azure Resource Visualizer

microsoft

Featured

Analyze Azure resource groups and generate detailed Mermaid architecture diagrams showing the relationships between individual resources. WHEN: create architecture diagram, visualize Azure resources, show resource relationships, generate Mermaid diagram, analyze resource group, diagram my resources, architecture visualization, resource topology, map Azure infrastructure.

Awaiting classificationOct 8, 2026

Azure Resource Lookup

microsoft

Featured

Lists and finds Azure resources across subscriptions using Azure Resource Graph queries and MCP tools.

DevOps & CloudOct 8, 2026

Azure Messaging

microsoft

Featured

Troubleshoot and resolve issues with Azure Messaging SDKs for Event Hubs and Service Bus. Covers connection failures, authentication errors, message processing issues, and SDK configuration problems. WHEN: event hub SDK error, service bus SDK issue, messaging connection failure, AMQP error, event processor host issue, message lock lost, message lock expired, lock renewal, lock renewal batch, send timeout, receiver disconnected, SDK troubleshooting, azure messaging SDK, event hub consumer, service bus queue issue, topic subscription error, enable logging event hub, service bus logging, eventhub python, servicebus java, eventhub javascript, servicebus dotnet, event hub checkpoint, event hub not receiving messages, service bus dead letter, batch processing lock, session lock expired, idle timeout, connection inactive, link detach, slow reconnect, session error, duplicate events, offset reset, receive batch.

Awaiting classificationOct 8, 2026

Azure Kusto

microsoft

Featured

Query and analyze data in Azure Data Explorer (Kusto/ADX) using KQL for log analytics, telemetry, and time series analysis. WHEN: KQL queries, Kusto database queries, Azure Data Explorer, ADX clusters, log analytics, time series data, IoT telemetry, anomaly detection.

Awaiting classificationOct 8, 2026

Wiki Vitepress

Wiki VitePress Packager

When to Activate

VitePress Scaffolding

Config Requirements (`config.mts`)

Dark-Mode Mermaid: Three-Layer Fix

Layer 1: Theme Variables (in config.mts)

Layer 2: CSS Overrides (`custom.css`)

Layer 3: Inline Style Replacement (`theme/index.ts`)

Click-to-Zoom for Mermaid Diagrams

Post-Processing Rules

Build

Known Gotchas

Source and attribution

More from microsoft/skills

Customize

Discover Azure Skills

Azure Resource Visualizer

Azure Resource Lookup

Azure Messaging

Azure Kusto

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Kql

Wiki Researcher

Debugview

Wiki Vitepress

Wiki VitePress Packager

When to Activate

VitePress Scaffolding

Config Requirements (config.mts)

Dark-Mode Mermaid: Three-Layer Fix

Layer 1: Theme Variables (in config.mts)

Layer 2: CSS Overrides (custom.css)

Layer 3: Inline Style Replacement (theme/index.ts)

Click-to-Zoom for Mermaid Diagrams

Post-Processing Rules

Build

Known Gotchas

Source and attribution

More from microsoft/skills

Customize

Discover Azure Skills

Azure Resource Visualizer

Azure Resource Lookup

Azure Messaging

Azure Kusto

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Kql

Wiki Researcher

Debugview

Config Requirements (`config.mts`)

Layer 2: CSS Overrides (`custom.css`)

Layer 3: Inline Style Replacement (`theme/index.ts`)