docusaurus-plugin-graph-view

An interactive, knowledge graph for your Docusaurus site.

Features

• Force-Directed Graph — Powered by d3-force and rendered on a 2D Canvas for smooth performance.
• Dynamic Pan & Zoom — Viewport smoothly glides and focuses on selected nodes.
• Connection Filters — Real-time filter controls to toggle Tag Links (solid) vs. Doc Links (dashed).
• Tag-Based Clustering — Frontmatter tags automatically group related documents.
• Theme Variables — Respects Docusaurus theme colors naturally (customizable via CSS variables).
• Mobile Responsive Drawer — Swaps to a vertical bottom-drawer overlay on viewports < 768px.
• Inline-Link Detection — Automatically detects [links](./path.md) and Obsidian-style [[wikilinks]].

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
        linkDetection: true,      // Detect inline links (markdown & wikilinks) between docs
      },
    ],
  ],
};

Document Connections (How to Link Docs)

The plugin connects nodes in your graph in two ways:

1. Frontmatter Tags: Connect documents to Tag Hub nodes (solid lines).

   ---
   tags: [machine-learning, neural-networks]
   ---

2. Doc-to-Doc Connections: Connect documents directly together (dashed blue lines) using either:
   • Standard Markdown Links:

     Refer to the [Activation Functions](./activation-functions.md) page.

   • Obsidian-Style Wikilinks:

     Refer to the [[activation-functions|Activation Functions]] page.

Styling Customization

Exposed CSS variables can be added to your /src/css/custom.css file:

:root {
  --graph-color-highlight: #a855f7;
  --graph-color-node-tag: #2ecc71;
  --graph-color-node-doc-light: #444444;
  --graph-color-node-doc-dark: #888888;
}

Contributing

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

License

MIT © whoisltd