mkdocs-nodegraph

mkdocs-nodegraph - A Plugin for Visualizing Network Graphs in MkDocs

Summary

mkdocs-nodegraph is a documents network graph visualization plugin for the mkdocs-material.

It allows you to create interactive visualizations of your documentation structure, helping users navigate through topics more easily.

Example

YouTube Link

• https://www.youtube.com/watch?v=KD1AsW304kc

Install

Install with setup.py

python.exe setup.py install

Install with pip

pip install mkdocs-nodegraph

Uninstall with pip

pip uninstall mkdocs-nodegraph

Setup Tags, Node Icon and Color on Markdown File

---
tags:
  - CG
  - 3D software
mdfile_icon: "_sources/svgs/blender.svg"
mdfile_color: "#ea7600"
mdfile_site: "https://www.blender.org/"
---

mdfile_icon -> Node Icon

mdfile_color -> Node Color

mdfile_site -> A website URL that opens on click while holding the Alt key

Click Node

LMB -> Open Node Page

Ctrl + LMB -> Open Node Page in a New Tab

Alt + LMB -> Open the mdfile_site Page from the metadata

mkdocs.yml Configuration

theme:
    # pip install mkdocs-material
    name: material
    # name: readthedocs
    features:
        # - navigation.tabs
        - content.code.copy
    palette:
      # Palette toggle for dark mode
      - media: "(prefers-color-scheme: dark)"
        scheme: slate
        primary: blue
        accent: blue
        toggle:
          icon: material/brightness-7
          name: Switch to light mode
      # Palette toggle for light mode
      - media: "(prefers-color-scheme: light)"
        scheme: default
        primary: blue
        accent: blue
        toggle:
          icon: material/brightness-4
          name: Switch to dark mode

plugins:
    - search
    - offline
    - glightbox:
        skip_classes: 
            - collapse-btn
    - nodegraph:
        graphfile: "nodegraph.html"

After setting up the nodegraph plugin with its graphfile path, you can build your site

mkdocs build 

After building the site, you can click the button to open the graph file.

References

• https://github.com/barrettotte/md-graph?tab=readme-ov-file
• https://pyvis.readthedocs.io/en/latest/