關聯圖檢視

安裝

您可以透過 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>
  );
}

安裝複製錨點連結

使用方式複製錨點連結

本頁目錄

安裝

使用方式