Mermaid#
Mermaid の描画はオプトインです。
import { oxContent } from "@ox-content/vite-plugin";
export default {
plugins: [
oxContent({
mermaid: true,
}),
],
};
有効にすると、```mermaid フェンスはビルド中にインライン SVG へ描画されます。読者が得るのは静的画像であり、実行時ライブラリではありません。重い処理は訪問者のブラウザではなく、ビルド時に一度だけ走ります。
描画例#
```mermaid
flowchart LR
Markdown --> Parser
Parser --> AST
AST --> Renderer
Renderer --> HTML
```
flowchart LR
Markdown --> Parser
Parser --> AST
AST --> Renderer
Renderer --> HTML
mermaid が対応する図の種類は、どれも同じように動きます。
```mermaid
sequenceDiagram
participant V as Vite
participant O as Ox Content
participant R as Rust core
V->>O: transform index.md
O->>R: parse + render (native)
R-->>O: HTML + TOC
O-->>V: JS module / static page
```
sequenceDiagram
participant V as Vite
participant O as Ox Content
participant R as Rust core
V->>O: transform index.md
O->>R: parse + render (native)
R-->>O: HTML + TOC
O-->>V: JS module / static page
要件#
描画は mermaid CLI（mmdc）を起動するので、開発依存として足してください。
vp install -D @mermaid-js/mermaid-clipnpm add -D @mermaid-js/mermaid-clibun add -D @mermaid-js/mermaid-clinpm install -D @mermaid-js/mermaid-cliyarn add -D @mermaid-js/mermaid-climmdc が見つからなくてもビルドは失敗しません。mermaid フェンスはコードブロックのまま残り、警告を一度だけ出します。CLI（またはヘッドレスブラウザ）のない CI イメージでも動き続け、図の依存を足すかどうかを後から決められます。