MkDocs Graph View

Create beautiful, interactive graph visualizations of your documentation structure.

Interactive Graphs

Visualize page connections with force-directed network graphs powered by D3.js
Responsive Design

Automatically adapts to mobile and desktop layouts for optimal viewing
Highly Configurable

Customize physics simulation, visual appearance, and user interactions
Theme Integration

Seamlessly integrates with Material for MkDocs light and dark themes

Overview

The MkDocs Graph Plugin adds interactive network graph visualizations to your MkDocs documentation, inspired by Quartz. It helps readers understand the structure and relationships between pages in your documentation.

Features

Mini Graph View: Shows connected pages in the sidebar
Full Graph View: Expandable overlay with the entire documentation graph
Smart Filtering: BFS-based depth filtering for performance
Tag Support: Display page tags in graph labels
Touch Friendly: Full mobile and touch device support
Customizable Physics: Control node repulsion, centering, and link distances

Quick Example

Installation

Install using pip:

pip install mkdocs-graph-view

Add to your mkdocs.yml:

plugins:
  - search
  - graph-view

That's it! Your documentation now has interactive graph visualizations.

How It Works

Link Extraction: The plugin scans all pages and extracts internal links
Graph Building: Creates a network graph data structure
Smart Filtering: Uses BFS to find connected pages within configured depth
Visualization: Renders interactive graphs using D3.js force simulation
Responsive Layout: Automatically positions graphs based on viewport size

Live Demo

Navigate to any page in this documentation to see the graph plugin in action:

Check the sidebar for the mini graph view
Click the expand button to open the full graph overlay
Hover over nodes to highlight connections
Click on nodes to navigate to pages