Rendering Practice (Mermaid)

This handbook uses a component-based Mermaid rendering approach:

• Component: docs/.vitepress/theme/components/MermaidBlock.vue
• Registration: docs/.vitepress/theme/index.ts
• Dependency: mermaid

Usage

<MermaidBlock
  title="Deploy flow"
  chart="flowchart LR; A[Push] --> B[Build]; B --> C[Deploy];"
/>

Why this approach

• More controllable than adding too many markdown plugins.
• Easier rollback and debugging.
• Works well with existing VitePress theme extension.