Wiki VitePress Packager

Wandelt generierte Wiki-Markdown-Dateien in eine ansprechende statische VitePress-Website mit dunklem Design und interaktiven Mermaid-Diagrammen um.

Wann aktivieren?

• Der Benutzer fordert an, eine Website zu erstellen oder als VitePress zu verpacken
• Der Benutzer führt den Befehl /deep-wiki:build aus
• Der Benutzer wünscht sich eine im Browser anzeigbare HTML-Ausgabe der generierten Wiki-Seiten

VitePress-Gerüst

Erstellen Sie die folgende Struktur im Verzeichnis „wiki-site/ “:

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

Konfigurationsanforderungen (config.mts)

• Verwenden Sie den „withMermaid “-Wrapper aus dem vitepress-plugin-mermaid
• Setzen Sie „appearance: 'dark'“ für ein ausschließlich dunkles Theme
• Konfigurieren Sie themeConfig.nav und themeConfig.sidebar entsprechend der Katalogstruktur
• Die Mermaid-Konfiguration muss die Variablen für das dunkle Design festlegen:

mermaid: {
  theme: 'dark',
  themeVariables: {
    primaryColor: '#1e3a5f',
    primaryTextColor: '#e0e0e0',
    primaryBorderColor: '#4a9eed',
    lineColor: '#4a9eed',
    secondaryColor: '#2d4a3e',
    tertiaryColor: '#2d2d3d',
    background: '#1a1a2e',
    Haupthintergrund: '#1e3a5f',
    Knotenrand: '#4a9eed',
    Cluster-Hintergrund: '#16213e',
    Titel-Farbe: '#e0e0e0',
    Hintergrundfarbe für Kantenbeschriftung: '#1a1a2e'
  }
}

Dark-Mode Mermaid: Dreischichtige Korrektur

Ebene 1: Theme-Variablen (in config.mts)

Wie oben gezeigt über ` mermaid.themeVariables ` festlegen.

Ebene 2: CSS-Überschreibungen (custom.css)

Mermaid-SVG-Elemente mit !important ansprechen:

.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; }

Ebene 3: Ersetzen von Inline-Stilen (theme/index.ts)

Die Inline -Stilattribute von Mermaid überschreiben alles. Verwende `onMounted ` + Polling, um sie zu ersetzen:

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)
})

Verwende setup() mit onMounted, NICHT enhanceApp() – das DOM existiert während SSR nicht.

Klick-zum-Zoomen für Mermaid-Diagramme

Umschließe jeden .mermaid -Container mit einem anklickbaren Wrapper, der ein Vollbild-Modalfenster öffnet:

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)
  })
})

CSS für das 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); }

Regeln für die Nachbearbeitung

Vor dem VitePress-Build alle .md -Dateien scannen und Folgendes korrigieren:

• Ersetzen
durch
(Kompatibilität mit dem Vue-Template-Compiler)
• Umschließe freie generische Parameter außerhalb von Code-Blöcken in Backticks ein
• Stelle sicher, dass jede Seite YAML-Frontmatter mit Titel und Beschreibung enthält

Erstellen

cd wiki-site && npm install && npm run docs:build

Die Ausgabe erfolgt in wiki-site/.vitepress/dist/.

Bekannte Fallstricke

• Mermaid rendert asynchron – SVGs sind noch nicht vorhanden, wenn „onMounted“ ausgelöst wird. Es muss nachfragen.
• Die Compiler-Option „isCustomElement“ für „bare“ führt zu schwerwiegenderen Abstürzen – bitte NICHT verwenden
• Node-Text in Mermaid verwendet Inline -Stile mit höchster Spezifität – CSS allein reicht nicht aus, um das Problem zu beheben
• „enhanceApp()“ wird während SSR ausgeführt, wenn das Dokument noch nicht existiert – verwende ausschließlich „setup()“