コンテンツへスキップ
Fumadocs

グラフビュー

すべてのページをグラフで表示します。

インストール

CLI を使用してインストールできます。

npx @fumadocs/cli add graph-view

TypeScript を使用する場合は、型定義もインストールしてください。

npm i -D @types/d3-force

コンテンツソースで extractLinkReferences を有効にします。

source.config.ts
import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  docs: {
    postprocess: {
      extractLinkReferences: true,
    },
  },
});

使い方

MDX ファイル内や、レイアウトコンポーネント内 (例:page.tsx) で使用できます。

page.tsx
import { GraphView } from '@/components/graph-view';
import { buildGraph } from '@/lib/build-graph';

export function PageBody() {
  return (
    <div>
      <GraphView graph={buildGraph()} />
      {/* ... */}
    </div>
  );
}

How is this guide?

最終更新日