docusaurus-plugin-graph-view

An interactive, knowledge graph for your Docusaurus site.

Features

• Force-Directed Graph — Powered by d3-force and rendered on 2D Canvas for smooth performance, even with large document sets.
• Semantic Zoom — Labels appear progressively as you zoom in; tag and neighbor labels are always visible on hover.
• Tag-Based Clustering — Frontmatter tags are automatically extracted and rendered as hub nodes, connecting related documents visually.
• Multi-Path Scanning — Aggregate notes from multiple content directories (e.g., docs, blog) in a single graph.
• Deep Navigation — Automatic URL mapping that preserves nested folder structures and respects frontmatter slug overrides.
• Content Preview — Hover or click any document node to see a summary preview and its tags in a side panel.
• Dark Mode Support — Adapts to your Docusaurus theme automatically.
• Search & Filter — Built-in search bar to find tags and notes instantly, with highlighted matching nodes.
• Interactive Highlighting — Hover a node to highlight its direct neighbors and connecting links with animated particles.

Installation

npm install docusaurus-plugin-graph-view

Peer dependency: @docusaurus/core >= 3.0.0

Usage

Add the plugin to your docusaurus.config.js:

module.exports = {
  plugins: [
    [
      'docusaurus-plugin-graph-view',
      {
        paths: ['docs'],         // Directories to scan for .md/.mdx files
        routePath: '/graph',     // Route where the graph page will be accessible
        title: 'Knowledge Graph', // Page title
      },
    ],
  ],
};

Then visit /graph on your site to see the interactive knowledge graph.

Configuration Options

| Option | Type | Default | Description | |-------------|------------|----------------------|--------------------------------------------------| | paths | string[] | ['docs'] | Content directories to scan for Markdown files. | | routePath | string | '/graph' | URL route for the graph page. | | title | string | 'Knowledge Graph' | Page title shown in the browser tab. |

How It Works

1. At build time, the plugin walks every .md and .mdx file in the configured paths.
2. Frontmatter (title, tags, slug) is extracted via gray-matter.
3. Each document becomes a node; each tag becomes a hub node. Edges connect documents to their tags.
4. The graph data is injected as Docusaurus global data and rendered client-side using react-force-graph-2d.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

License

MIT © whoisltd