OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add microsoft/skills --skill wiki-vitepress
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.
npx skills add microsoft/skills --skill wiki-vitepress
Transform generated wiki Markdown files into a polished VitePress static site with dark theme and interactive Mermaid diagrams.
/deep-wiki:build commandGenerate the following structure in a wiki-site/ directory:
config.mts)withMermaid wrapper from vitepress-plugin-mermaidappearance: 'dark' for dark-only themethemeConfig.nav and themeConfig.sidebar from the catalogue structureSet via mermaid.themeVariables as shown above.
custom.css)Target Mermaid SVG elements with !important:
theme/index.ts)Mermaid inline style attributes override everything. Use onMounted + polling to replace them:
Use setup() with onMounted, NOT enhanceApp() — DOM doesn't exist during SSR.
Wrap each .mermaid container in a clickable wrapper that opens a fullscreen modal:
Modal CSS:
Before VitePress build, scan all .md files and fix:
<br/> with <br> (Vue template compiler compatibility)<T> generic parameters in backticks outside code fencestitle and descriptionOutput goes to wiki-site/.vitepress/dist/.
onMounted fires. Must poll.isCustomElement compiler option for bare <T> causes worse crashes — do NOT use itstyle with highest specificity — CSS alone won't fix itenhanceApp() runs during SSR where document doesn't exist — use setup() only.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; }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)
})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)
})
}).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); }cd wiki-site && npm install && npm run docs:build