<div align="center">
# MkDocs Network Graph Plugin
**Add an interactive knowledge network graph to your Material for MkDocs documentation project**
[](https://pypi.org/project/mkdocs-network-graph-plugin/)
[](https://pypi.org/project/mkdocs-network-graph-plugin/)
[](https://github.com/develmusa/mkdocs-network-graph-plugin/blob/main/LICENSE)
[](https://github.com/develmusa/mkdocs-network-graph-plugin/actions)
[](https://develmusa.github.io/mkdocs-network-graph-plugin/)
*A powerful [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) plugin that generates beautiful, interactive graph visualizations of your documentation structure and relationships.*
[**Documentation**](https://develmusa.github.io/mkdocs-network-graph-plugin/) • [**Quick Start**](#quick-start) • [**Configuration**](#configuration) • [**Contributing**](#contributing)
</div>
---
## Table of Contents
- [Features](#features)
- [Quick Start](#quick-start)
- [Installation](#installation)
- [Configuration](#configuration)
- [Customization](#customization)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [License](#license)
- [Acknowledgments](#acknowledgments)
## Features
<div align="center">
| **Interactive Visualization** | **Smart Navigation** | **Fully Customizable** | **Lightweight** |
|:---:|:---:|:---:|:---:|
| **Interactive Graph Visualization** of your documentation structure | **Dual View Modes** to switch between a full-site overview and local page connections | **Theme Integration** that seamlessly blends with Material for MkDocs | **Performance Optimized** with minimal impact on build times and a responsive design |
</div>
## Quick Start
Get up and running in under 2 minutes:
### 1. Install the plugin
```bash
pip install mkdocs-network-graph-plugin
```
### 2. Enable in your `mkdocs.yml`
```yaml
plugins:
- graph
```
### 3. Build your docs
```bash
mkdocs serve
```
That's it! Your documentation now includes an interactive graph visualization.
## Installation
### Using pip (recommended)
```bash
pip install mkdocs-network-graph-plugin
```
### Using uv (faster)
```bash
uv pip install mkdocs-network-graph-plugin
```
### Using pipx (isolated)
```bash
pipx install mkdocs-network-graph-plugin
```
### Development Installation
For contributors, this is the recommended setup:
1. **Clone the repository**
```bash
git clone https://github.com/develmusa/mkdocs-network-graph-plugin.git
cd mkdocs-network-graph-plugin
```
2. **Set up the development environment**
```bash
# Sync with the lockfile
uv sync
# Install required Python versions for testing
uv python install 3.10 3.11 3.12 3.13
# Install in editable mode with dev dependencies
uv pip install -e '.[dev]'
# Install pre-commit hooks
uv run pre-commit install
```
For more details, see the [developer guide](https://develmusa.github.io/mkdocs-network-graph-plugin/how-to/for-developers/).
### Requirements
- **Python**: 3.10+
- **MkDocs**: Compatible with latest versions
- **Theme**: Designed for [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) (v9.0.0+)
## Configuration
### Basic Configuration
```yaml
plugins:
- graph:
name: "title" # Use page titles for node names
debug: false # Disable debug logging
```
### Advanced Configuration
```yaml
plugins:
- graph:
name: "file_name" # Use file names instead of titles
debug: true # Enable verbose logging for troubleshooting
```
### Configuration Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `name` | `string` | `"title"` | Node naming strategy: `"title"` or `"file_name"` |
| `debug` | `boolean` | `false` | Enable debug logging for development |
## Customization
Customize the graph appearance using CSS variables in your `extra.css`:
```css
:root {
/* Node styling */
--md-graph-node-color: #1976d2;
--md-graph-node-color--hover: #1565c0;
--md-graph-node-color--current: #ff5722;
/* Link styling */
--md-graph-link-color: #757575;
/* Text styling */
--md-graph-text-color: #212121;
}
```
### Available CSS Variables
| Variable | Description | Default |
|----------|-------------|---------|
| `--md-graph-node-color` | Default node color | Theme primary |
| `--md-graph-node-color--hover` | Node hover color | Darker primary |
| `--md-graph-node-color--current` | Current page node color | Theme accent |
| `--md-graph-link-color` | Connection line color | Theme text (muted) |
| `--md-graph-text-color` | Node label text color | Theme text |
## Documentation
Comprehensive documentation is available at **[develmusa.github.io/mkdocs-network-graph-plugin](https://develmusa.github.io/mkdocs-network-graph-plugin/)**
### Documentation Sections
- **[Getting Started](https://develmusa.github.io/mkdocs-network-graph-plugin/tutorials/getting-started/)** - Installation and basic setup
- **[Why Use a Graph?](https://develmusa.github.io/mkdocs-network-graph-plugin/explanation/why-use-a-graph/)** - Benefits and use cases
- **[How it Works](https://develmusa.github.io/mkdocs-network-graph-plugin/explanation/how-it-works/)** - Technical implementation details
- **[Configuration](https://develmusa.github.io/mkdocs-network-graph-plugin/reference/configuration/)** - Complete configuration reference
- **[Customization](https://develmusa.github.io/mkdocs-network-graph-plugin/how-to/customization/)** - Styling and theming guide
- **[For Developers](https://develmusa.github.io/mkdocs-network-graph-plugin/how-to/for-developers/)** - Contributing and development guide
## Contributing
We welcome contributions! For a complete guide on how to contribute, please see the [developer guide](https://develmusa.github.io/mkdocs-network-graph-plugin/how-to/for-developers/).
To get started, set up your environment by following the [Development Installation](#development-installation) instructions. From there, you can run tests and linting using `nox`:
```bash
# Run tests
uv run nox -s tests
# Run linting
uv run nox -s lint
```
### Contribution Guidelines
- **Bug Reports**: Use the [issue tracker](https://github.com/develmusa/mkdocs-network-graph-plugin/issues)
- **Feature Requests**: Open an issue with your proposal
- **Pull Requests**: Fork, create a feature branch, and submit a PR
- **Documentation**: Help improve our docs
## License
This project is licensed under the **MIT License** - see the [LICENSE](https://github.com/develmusa/mkdocs-network-graph-plugin/blob/main/LICENSE) file for details
## Acknowledgments
- **[mkdocs-obsidian-interactive-graph-plugin](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin)** - Thank you for the inspiration and logos for the MkDocs graph visualization
- **[Material for MkDocs](https://squidfunk.github.io/mkdocs-material/)**
- **[D3.js](https://d3js.org/)**
- **[MkDocs](https://www.mkdocs.org/)**
### Related Projects
Explore other tools with Markdown documentation graph visualization:
- **[mkdocs-obsidian-interactive-graph-plugin](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin)**
- **[Digital Garden](https://dg-docs.ole.dev/)** - A comprehensive digital garden solution with graph visualization
- **[Foam](https://foambubble.github.io/foam/user/features/graph-visualization.html)** - Personal knowledge management and sharing system with graph features
---
<div align="center">
**[Star this project](https://github.com/develmusa/mkdocs-network-graph-plugin)** if you find it useful!
Made with AI and ❤️ by [develmusa](https://github.com/develmusa)
</div>
Raw data
{
"_id": null,
"home_page": null,
"name": "mkdocs-network-graph-plugin",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": null,
"keywords": "mkdocs, plugin, graph, documentation",
"author": null,
"author_email": "develmusa <develmusa@users.noreply.github.com>",
"download_url": "https://files.pythonhosted.org/packages/cf/19/01f6562d1b510134519103a57396764f6ba1a7fbaf7b94caa9692a7b01f3/mkdocs_network_graph_plugin-1.0.1.tar.gz",
"platform": null,
"description": "<div align=\"center\">\n\n# MkDocs Network Graph Plugin\n\n**Add an interactive knowledge network graph to your Material for MkDocs documentation project**\n\n[](https://pypi.org/project/mkdocs-network-graph-plugin/)\n[](https://pypi.org/project/mkdocs-network-graph-plugin/)\n[](https://github.com/develmusa/mkdocs-network-graph-plugin/blob/main/LICENSE)\n[](https://github.com/develmusa/mkdocs-network-graph-plugin/actions)\n[](https://develmusa.github.io/mkdocs-network-graph-plugin/)\n\n*A powerful [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) plugin that generates beautiful, interactive graph visualizations of your documentation structure and relationships.*\n\n\n\n[**Documentation**](https://develmusa.github.io/mkdocs-network-graph-plugin/) \u2022 [**Quick Start**](#quick-start) \u2022 [**Configuration**](#configuration) \u2022 [**Contributing**](#contributing)\n\n</div>\n\n---\n\n## Table of Contents\n\n- [Features](#features)\n- [Quick Start](#quick-start)\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Customization](#customization)\n- [Documentation](#documentation)\n- [Contributing](#contributing)\n- [License](#license)\n- [Acknowledgments](#acknowledgments)\n\n## Features\n\n<div align=\"center\">\n\n| **Interactive Visualization** | **Smart Navigation** | **Fully Customizable** | **Lightweight** |\n|:---:|:---:|:---:|:---:|\n| **Interactive Graph Visualization** of your documentation structure | **Dual View Modes** to switch between a full-site overview and local page connections | **Theme Integration** that seamlessly blends with Material for MkDocs | **Performance Optimized** with minimal impact on build times and a responsive design |\n\n</div>\n\n## Quick Start\n\nGet up and running in under 2 minutes:\n\n### 1. Install the plugin\n\n```bash\npip install mkdocs-network-graph-plugin\n```\n\n### 2. Enable in your `mkdocs.yml`\n\n```yaml\nplugins:\n - graph\n```\n\n### 3. Build your docs\n\n```bash\nmkdocs serve\n```\n\nThat's it! Your documentation now includes an interactive graph visualization.\n\n## Installation\n\n### Using pip (recommended)\n\n```bash\npip install mkdocs-network-graph-plugin\n```\n\n### Using uv (faster)\n\n```bash\nuv pip install mkdocs-network-graph-plugin\n```\n\n### Using pipx (isolated)\n\n```bash\npipx install mkdocs-network-graph-plugin\n```\n\n### Development Installation\n\nFor contributors, this is the recommended setup:\n\n1. **Clone the repository**\n\n ```bash\n git clone https://github.com/develmusa/mkdocs-network-graph-plugin.git\n cd mkdocs-network-graph-plugin\n ```\n\n2. **Set up the development environment**\n\n ```bash\n # Sync with the lockfile\n uv sync\n # Install required Python versions for testing\n uv python install 3.10 3.11 3.12 3.13\n # Install in editable mode with dev dependencies\n uv pip install -e '.[dev]'\n # Install pre-commit hooks\n uv run pre-commit install\n ```\n\nFor more details, see the [developer guide](https://develmusa.github.io/mkdocs-network-graph-plugin/how-to/for-developers/).\n\n### Requirements\n\n- **Python**: 3.10+\n- **MkDocs**: Compatible with latest versions\n- **Theme**: Designed for [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) (v9.0.0+)\n\n## Configuration\n\n### Basic Configuration\n\n```yaml\nplugins:\n - graph:\n name: \"title\" # Use page titles for node names\n debug: false # Disable debug logging\n```\n\n### Advanced Configuration\n\n```yaml\nplugins:\n - graph:\n name: \"file_name\" # Use file names instead of titles\n debug: true # Enable verbose logging for troubleshooting\n```\n\n### Configuration Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `name` | `string` | `\"title\"` | Node naming strategy: `\"title\"` or `\"file_name\"` |\n| `debug` | `boolean` | `false` | Enable debug logging for development |\n\n## Customization\n\nCustomize the graph appearance using CSS variables in your `extra.css`:\n\n```css\n:root {\n /* Node styling */\n --md-graph-node-color: #1976d2;\n --md-graph-node-color--hover: #1565c0;\n --md-graph-node-color--current: #ff5722;\n\n /* Link styling */\n --md-graph-link-color: #757575;\n\n /* Text styling */\n --md-graph-text-color: #212121;\n}\n```\n\n### Available CSS Variables\n\n| Variable | Description | Default |\n|----------|-------------|---------|\n| `--md-graph-node-color` | Default node color | Theme primary |\n| `--md-graph-node-color--hover` | Node hover color | Darker primary |\n| `--md-graph-node-color--current` | Current page node color | Theme accent |\n| `--md-graph-link-color` | Connection line color | Theme text (muted) |\n| `--md-graph-text-color` | Node label text color | Theme text |\n\n## Documentation\n\nComprehensive documentation is available at **[develmusa.github.io/mkdocs-network-graph-plugin](https://develmusa.github.io/mkdocs-network-graph-plugin/)**\n\n### Documentation Sections\n\n- **[Getting Started](https://develmusa.github.io/mkdocs-network-graph-plugin/tutorials/getting-started/)** - Installation and basic setup\n- **[Why Use a Graph?](https://develmusa.github.io/mkdocs-network-graph-plugin/explanation/why-use-a-graph/)** - Benefits and use cases\n- **[How it Works](https://develmusa.github.io/mkdocs-network-graph-plugin/explanation/how-it-works/)** - Technical implementation details\n- **[Configuration](https://develmusa.github.io/mkdocs-network-graph-plugin/reference/configuration/)** - Complete configuration reference\n- **[Customization](https://develmusa.github.io/mkdocs-network-graph-plugin/how-to/customization/)** - Styling and theming guide\n- **[For Developers](https://develmusa.github.io/mkdocs-network-graph-plugin/how-to/for-developers/)** - Contributing and development guide\n\n## Contributing\n\nWe welcome contributions! For a complete guide on how to contribute, please see the [developer guide](https://develmusa.github.io/mkdocs-network-graph-plugin/how-to/for-developers/).\n\nTo get started, set up your environment by following the [Development Installation](#development-installation) instructions. From there, you can run tests and linting using `nox`:\n\n```bash\n# Run tests\nuv run nox -s tests\n\n# Run linting\nuv run nox -s lint\n```\n\n### Contribution Guidelines\n\n- **Bug Reports**: Use the [issue tracker](https://github.com/develmusa/mkdocs-network-graph-plugin/issues)\n- **Feature Requests**: Open an issue with your proposal\n- **Pull Requests**: Fork, create a feature branch, and submit a PR\n- **Documentation**: Help improve our docs\n\n## License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](https://github.com/develmusa/mkdocs-network-graph-plugin/blob/main/LICENSE) file for details\n\n## Acknowledgments\n\n- **[mkdocs-obsidian-interactive-graph-plugin](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin)** - Thank you for the inspiration and logos for the MkDocs graph visualization\n- **[Material for MkDocs](https://squidfunk.github.io/mkdocs-material/)**\n- **[D3.js](https://d3js.org/)**\n- **[MkDocs](https://www.mkdocs.org/)**\n\n### Related Projects\n\nExplore other tools with Markdown documentation graph visualization:\n\n- **[mkdocs-obsidian-interactive-graph-plugin](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin)**\n- **[Digital Garden](https://dg-docs.ole.dev/)** - A comprehensive digital garden solution with graph visualization\n- **[Foam](https://foambubble.github.io/foam/user/features/graph-visualization.html)** - Personal knowledge management and sharing system with graph features\n\n---\n\n<div align=\"center\">\n\n**[Star this project](https://github.com/develmusa/mkdocs-network-graph-plugin)** if you find it useful!\n\nMade with AI and \u2764\ufe0f by [develmusa](https://github.com/develmusa)\n\n</div>\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A MkDocs plugin to generate an interactive graph of your documentation.",
"version": "1.0.1",
"project_urls": {
"Documentation": "https://develmusa.github.io/mkdocs-network-graph-plugin/",
"Homepage": "https://github.com/develmusa/mkdocs-network-graph-plugin",
"Issues": "https://github.com/develmusa/mkdocs-network-graph-plugin/issues",
"Repository": "https://github.com/develmusa/mkdocs-network-graph-plugin"
},
"split_keywords": [
"mkdocs",
" plugin",
" graph",
" documentation"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "890a16af119df022575d7240f2fec70977f59ed6f676e63a39210817036e57ae",
"md5": "eb6c466b7e638db61babf6614945d2c5",
"sha256": "a15c585e7c735f53f36bb919480a4eb9be8a418589fb109bf3557023303d029c"
},
"downloads": -1,
"filename": "mkdocs_network_graph_plugin-1.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "eb6c466b7e638db61babf6614945d2c5",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 15831,
"upload_time": "2025-09-11T13:35:35",
"upload_time_iso_8601": "2025-09-11T13:35:35.622958Z",
"url": "https://files.pythonhosted.org/packages/89/0a/16af119df022575d7240f2fec70977f59ed6f676e63a39210817036e57ae/mkdocs_network_graph_plugin-1.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "cf1901f6562d1b510134519103a57396764f6ba1a7fbaf7b94caa9692a7b01f3",
"md5": "be714040bc0d23cea9b1cd56167495fb",
"sha256": "2c5a30bd1706727833a1705b32bc1ff27783bffb53559ca3ad9529ad10d528b5"
},
"downloads": -1,
"filename": "mkdocs_network_graph_plugin-1.0.1.tar.gz",
"has_sig": false,
"md5_digest": "be714040bc0d23cea9b1cd56167495fb",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 15230321,
"upload_time": "2025-09-11T13:35:38",
"upload_time_iso_8601": "2025-09-11T13:35:38.078339Z",
"url": "https://files.pythonhosted.org/packages/cf/19/01f6562d1b510134519103a57396764f6ba1a7fbaf7b94caa9692a7b01f3/mkdocs_network_graph_plugin-1.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-09-11 13:35:38",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "develmusa",
"github_project": "mkdocs-network-graph-plugin",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "mkdocs-network-graph-plugin"
}
JSON
