docs: add mermaid diagram support

Add vitepress-plugin-mermaid for rendering mermaid diagrams in docs.
Alias dayjs to its ESM build to fix CJS default export errors with
VitePress 2.0. Replace ASCII diagram in run.md with a mermaid graph.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: branchseer

docs/.vitepress/config.mts

@@ -3,6 +3,7 @@ import { resolve } from 'node:path';
 import type { VoidZeroThemeConfig } from '@voidzero-dev/vitepress-theme';
 import { extendConfig } from '@voidzero-dev/vitepress-theme/config';
 import { defineConfig, type HeadConfig } from 'vitepress';
+import { withMermaid } from 'vitepress-plugin-mermaid';
 
 const taskRunnerGuideItems = [
   {
@@ -75,7 +76,7 @@ const guideSidebar = [
 ];
 
 export default extendConfig(
-  defineConfig({
+  withMermaid(defineConfig({
     title: 'Vite+',
     titleTemplate: ':title | The Unified Toolchain for the Web',
     description: 'The Unified Toolchain for the Web',
@@ -108,10 +109,13 @@ export default extendConfig(
     vite: {
       resolve: {
         tsconfigPaths: true,
-        alias: {
-          '@local-assets': resolve(__dirname, 'theme/assets'),
-          '@layouts': resolve(__dirname, 'theme/layouts'),
-        },
+        alias: [
+          { find: '@local-assets', replacement: resolve(__dirname, 'theme/assets') },
+          { find: '@layouts', replacement: resolve(__dirname, 'theme/layouts') },
+          // dayjs ships CJS by default; redirect to its ESM build so
+          // mermaid (imported via vitepress-plugin-mermaid) works in dev
+          { find: /^dayjs$/, replacement: 'dayjs/esm' },
+        ],
       },
     },
     themeConfig: {
@@ -206,5 +210,5 @@ export default extendConfig(
 
       return [...ogInfo, canonicalUrlEntry];
     },
-  }),
+  })),
 );

docs/guide/run.md

@@ -225,10 +225,9 @@ When a command contains `vp run`, Vite Task inlines it as separate tasks instead
 
 Running `vp run ci` expands into three tasks:
 
-```
-┌────────┐   ┌────────┐   ┌────────┐
-│  lint  │──▶│  test  │──▶│ build  │
-└────────┘   └────────┘   └────────┘
+```mermaid
+graph LR
+  lint --> test --> build
 ```
 
 Flags also work inside nested scripts. For example, `vp run -r build` inside a script expands into individual build tasks for every package.

docs/package.json

@@ -9,8 +9,10 @@
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",
+    "mermaid": "^11.13.0",
     "reka-ui": "^2.7.0",
     "typewriter-effect": "^2.22.0",
+    "vitepress-plugin-mermaid": "^2.0.17",
     "vue": "^3.5.27",
     "vue3-carousel": "^0.16.0"
   },