docs: setup mermaid

Author: antfu

docs/.vitepress/config.ts

@@ -4,10 +4,11 @@ import {
   groupIconMdPlugin,
   groupIconVitePlugin,
 } from 'vitepress-plugin-group-icons'
+import { withMermaid } from 'vitepress-plugin-mermaid'
 import { version } from '../../package.json'
 
 // https://vitepress.dev/reference/site-config
-export default defineConfig({
+export default withMermaid(defineConfig({
   title: 'Vite DevTools',
   description: 'Visualize and analyze your Vite build process with powerful developer tools. Extensible architecture for building custom DevTools integrations.',
   head: [
@@ -100,4 +101,4 @@ export default defineConfig({
       groupIconVitePlugin(),
     ],
   },
-})
+}))

docs/kit/index.md

@@ -23,35 +23,32 @@ DevTools Kit offers a complete toolkit for building DevTools integrations:
 
 ## Architecture Overview
 
-```
-┌─────────────────────────────────────────────────────────────┐
-│                      Browser (Client)                       │
-│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
-│  │   Iframe    │  │   Action    │  │   Custom Renderer   │  │
-│  │   Panel     │  │   Button    │  │       Panel         │  │
-│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
-│         │                │                    │             │
-│         └────────────────┼────────────────────┘             │
-│                          │                                  │
-│                    ┌─────┴─────┐                            │
-│                    │ RPC Client│                            │
-│                    └─────┬─────┘                            │
-└──────────────────────────┼──────────────────────────────────┘
-                           │ WebSocket
-┌──────────────────────────┼──────────────────────────────────┐
-│                    ┌─────┴─────┐                            │
-│                    │ RPC Server│                            │
-│                    └─────┬─────┘                            │
-│                          │                                  │
-│  ┌───────────────────────┼───────────────────────────────┐  │
-│  │              DevTools Node Context                    │  │
-│  │  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌──────────┐  │  │
-│  │  │  Docks  │  │  Views  │  │   RPC   │  │  State   │  │  │
-│  │  │  Host   │  │  Host   │  │  Host   │  │  Host    │  │  │
-│  │  └─────────┘  └─────────┘  └─────────┘  └──────────┘  │  │
-│  └───────────────────────────────────────────────────────┘  │
-│                      Node.js (Server)                       │
-└─────────────────────────────────────────────────────────────┘
+```mermaid
+flowchart TB
+  subgraph Browser["Browser (Client)"]
+    direction TB
+    subgraph DockEntries["Dock Entries"]
+      Iframe["Iframe Panel"]
+      Action["Action Button"]
+      Custom["Custom Renderer"]
+    end
+    RpcClient["RPC Client"]
+    DockEntries --> RpcClient
+  end
+
+  RpcClient <-->|WebSocket| RpcServer
+
+  subgraph Server["Node.js (Server)"]
+    direction TB
+    RpcServer["RPC Server"]
+    subgraph Context["DevTools Node Context"]
+      Docks["Docks Host"]
+      Views["Views Host"]
+      Rpc["RPC Host"]
+      State["State Host"]
+    end
+    RpcServer --> Context
+  end
 ```
 
 ## Why DevTools Kit?

docs/kit/rpc.md

@@ -8,21 +8,14 @@ DevTools Kit provides a built-in RPC layer for type-safe bidirectional communica
 
 ## Overview
 
-```
-┌─────────────────────────────────────────────────────────┐
-│                    Browser Client                       │
-│                                                         │
-│   await rpc.call('my-plugin:get-data', id)              │
-│                         │                               │
-│                         ▼                               │
-└─────────────────────────┼───────────────────────────────┘
-                          │ WebSocket
-┌─────────────────────────┼───────────────────────────────┐
-│                         ▼                               │
-│   handler: async (id) => fetchData(id)                  │
-│                                                         │
-│                     Node.js Server                      │
-└─────────────────────────────────────────────────────────┘
+```mermaid
+sequenceDiagram
+  participant Client as Browser Client
+  participant Server as Node.js Server
+
+  Client->>Server: rpc.call('my-plugin:get-data', id)
+  Note over Server: handler: async (id) =><br/>fetchData(id)
+  Server->>Client: { id, data: '...' }
 ```
 
 ## Server-Side Functions

docs/kit/shared-state.md

@@ -8,16 +8,22 @@ DevTools Kit provides a built-in shared state system for synchronizing data betw
 
 ## Overview
 
-```
-┌──────────────────┐     ┌──────────────────┐     ┌──────────────────┐
-│   Client A       │     │     Server       │     │   Client B       │
-│                  │     │                  │     │                  │
-│  state.value()   │◄────│  state.mutate()  │────►│  state.value()   │
-│  { count: 1 }    │     │  { count: 1 }    │     │  { count: 1 }    │
-└──────────────────┘     └──────────────────┘     └──────────────────┘
-         │                        ▲                        │
-         │         WebSocket sync │         WebSocket sync │
-         └────────────────────────┴────────────────────────┘
+```mermaid
+flowchart LR
+  subgraph ClientA["Client A"]
+    A_Value["state.value()<br/>{ count: 1 }"]
+  end
+
+  subgraph Server["Server"]
+    S_Mutate["state.mutate()<br/>{ count: 1 }"]
+  end
+
+  subgraph ClientB["Client B"]
+    B_Value["state.value()<br/>{ count: 1 }"]
+  end
+
+  S_Mutate <-->|RPC sync| A_Value
+  S_Mutate <-->|RPC sync| B_Value
 ```
 
 ## Server-Side Usage

docs/package.json

@@ -10,7 +10,9 @@
   "devDependencies": {
     "@shikijs/vitepress-twoslash": "catalog:docs",
     "@vitejs/devtools": "workspace:*",
+    "mermaid": "catalog:docs",
     "vitepress": "catalog:docs",
-    "vitepress-plugin-group-icons": "catalog:docs"
+    "vitepress-plugin-group-icons": "catalog:docs",
+    "vitepress-plugin-mermaid": "catalog:docs"
   }
 }

package.json

@@ -79,6 +79,7 @@
     "@rolldown/debug": "catalog:deps",
     "chokidar": "catalog:devtools",
     "esbuild": "catalog:build",
+    "langium": "catalog:resolutions",
     "nitropack": "catalog:build",
     "nuxt": "catalog:build",
     "rolldown": "catalog:build",