### Complete Project Setup Example

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

A comprehensive example demonstrating the setup of a new MkDocs project with the interactive graph plugin. This includes creating the project structure, installing dependencies, and downloading required assets.

```bash
# Create project structure
mkdir my-docs && cd my-docs
mkdir -p docs/assets/javascripts docs/assets/stylesheets

# Install dependencies
pip install mkdocs-material mkdocs-obsidian-interactive-graph-plugin

# Download required assets
curl -o docs/assets/javascripts/interactive_graph.js \
  https://raw.githubusercontent.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/main/docs/ObsidianVault/assets/javascripts/interactive_graph.js

curl -o docs/assets/stylesheets/interactive_graph.css \
  https://raw.githubusercontent.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/main/docs/ObsidianVault/assets/stylesheets/interactive_graph.css
```

--------------------------------

### Install mkdocs-obsidian-interactive-graph-plugin via pip

Source: https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/blob/main/docs/ObsidianVault/Installation.md

Use this command to install the plugin directly from PyPI. Ensure you have pip installed.

```bash
pip install mkdocs-obsidian-interactive-graph-plugin
```

--------------------------------

### Docker Deployment Commands

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

Commands for deploying the documentation site using Docker. Includes setting environment variables, building and starting the container in production or development mode, and viewing logs.

```bash
# Set environment variables in .env file
cat > .env << EOF
DEV=OFF
IP=0.0.0.0
PORT=8000
EOF

# Build and start container (production mode - uses PyPI package)
docker compose up --build -d

# For development mode (rebuilds plugin from local files)
echo "DEV=ON" > .env
docker compose up --build

# View logs
docker compose logs -f mkdocs
```

--------------------------------

### Install Plugin via Pip

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

Install the mkdocs-obsidian-interactive-graph-plugin using pip. This command can be run directly or added to a requirements.txt file for project dependency management.

```bash
# Install via pip
pip install mkdocs-obsidian-interactive-graph-plugin

# Or add to requirements.txt
echo "mkdocs-obsidian-interactive-graph-plugin" >> requirements.txt
pip install -r requirements.txt
```

--------------------------------

### ObsidianInteractiveGraphPlugin Class

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

The main plugin class for MkDocs, extending BasePlugin. It implements event hooks for configuration, navigation, markdown parsing, and environment setup to generate the graph data.

```python
from mkdocs.config.defaults import MkDocsConfig
from mkdocs.plugins import BasePlugin, get_plugin_logger
from mkdocs.structure.files import Files as MkDocsFiles
from mkdocs.structure.pages import Page as MkDocsPage
from mkdocs.structure.nav import Navigation as MkDocsNav

class ObsidianInteractiveGraphPlugin(BasePlugin):
    def __init__(self):
        super().__init__()
        self.logger = get_plugin_logger(__name__)
        self.nodes = {}
        self.site_path = ""
        self.current_id = 0
        self.data = {"nodes": [], "links": []}

    # Hook: Called when config is loaded
    def on_config(self, config: MkDocsConfig, **kwargs):
        self.site_path = config.site_name + "/"

    # Hook: Called when navigation is built
    def on_nav(self, nav: MkDocsNav, files: MkDocsFiles, config: MkDocsConfig, **kwargs):
        self.collect_pages(nav, config)

    # Hook: Called for each page's markdown
    def on_page_markdown(self, markdown: str, page: MkDocsPage, config: MkDocsConfig, files: MkDocsFiles, **kwargs):
        self.parse_markdown(markdown, page)

    # Hook: Called when Jinja2 env is ready (build phase)
    def on_env(self, env, config: MkDocsConfig, files: MkDocsFiles):
        self.create_graph_json(config)
```

--------------------------------

### Create Sample Documentation with Wikilinks

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

Create sample Markdown files for the documentation, including a main index page and other pages that use wiki-style links (e.g., [[PageName]]). This demonstrates how the plugin will interpret these links.

```markdown
# Welcome

This is my knowledge base. Explore:

- [[Installation]] guide
- [[Concepts]] overview
- [[Usage/Setup|Getting Started]]
```

```markdown
# Installation

See [[index|Home]] for overview.
Check [[Concepts]] for background.
```

```markdown
# Concepts

After reading, proceed to [[Installation]].
Then follow [[Usage/Setup]].
```

```markdown
# Setup Guide

Prerequisites: Complete [[Installation]] first.
Review [[Concepts]] if needed.
```

--------------------------------

### Build and Serve MkDocs Project

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

Command to build and serve the MkDocs project locally. Navigate to the specified URL to view the interactive graph.

```bash
mkdocs serve
```

--------------------------------

### Configure mkdocs.yml for Obsidian Graph Plugin

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

Set up the mkdocs.yml file to include the obsidian-interactive-graph plugin, search functionality, and necessary JavaScript and CSS assets. Ensure Material theme and palettes are configured.

```yaml
site_name: My Knowledge Base

theme:
  name: material
  palette:
    - scheme: default
      toggle:
        icon: material/weather-sunny
        name: Switch to dark mode
    - scheme: slate
      toggle:
        icon: material/weather-night
        name: Switch to light mode

plugins:
  - search
  - obsidian-interactive-graph

extra_javascript:
  - https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js
  - https://fastly.jsdelivr.net/npm/echarts/dist/echarts.min.js
  - assets/javascripts/interactive_graph.js

extra_css:
  - assets/stylesheets/interactive_graph.css
```

--------------------------------

### Configure MkDocs Plugins and Assets

Source: https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/blob/main/docs/ObsidianVault/Usage/Setup.md

Activate the plugin in mkdocs.yml and specify paths for extra JavaScript and CSS files. Ensure the plugin is listed before other plugins that modify wikilinks.

```yaml
plugins:
  - obsidian-interactive-graph

extra_javascript:
  - https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js
  - https://fastly.jsdelivr.net/npm/echarts/dist/echarts.min.js
  - assets/javascripts/interactive_graph.js

extra_css:
  - assets/stylesheets/interactive_graph.css
```

--------------------------------

### Add mkdocs-obsidian-interactive-graph-plugin to requirements.txt

Source: https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/blob/main/docs/ObsidianVault/Installation.md

Add this line to your requirements.txt file for managing project dependencies. This ensures reproducible builds.

```text
mkdocs-obsidian-interactive-graph-plugin
```

--------------------------------

### Configure MkDocs Plugin

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

Configure the mkdocs.yml file to enable the obsidian-interactive-graph plugin. Ensure it is placed before any plugins that convert wikilinks to standard Markdown. Include necessary JavaScript and CSS assets.

```yaml
site_name: My Documentation Site

plugins:
  - obsidian-interactive-graph  # Must be BEFORE wikilink-converting plugins
  - search
  - obsidian-support            # Optional: if using other Obsidian features

extra_javascript:
  - https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js
  - https://fastly.jsdelivr.net/npm/echarts/dist/echarts.min.js
  - assets/javascripts/interactive_graph.js

extra_css:
  - assets/stylesheets/interactive_graph.css
```

--------------------------------

### Docker Compose Configuration

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

The compose.yml file defines the Docker service for MkDocs. It specifies the build context, environment variables, port mapping, and volume mounts for the MkDocs site.

```yaml
# compose.yml
services:
  mkdocs:
    build:
      context: .
      args:
        - DEV=$DEV
      network: host
    restart: unless-stopped
    ports:
      - $IP:$PORT:8000
    volumes:
      - ./mkdocs.yml:/notes/mkdocs.yml:ro
      - ./docs/:/notes/docs/:ro
```

--------------------------------

### CSS Styling for Graph Components

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

CSS rules for styling the sidebar graph container and the modal overlay for the interactive visualization. These styles ensure the graph is displayed correctly within the UI.

```css
/* Sidebar graph container */
.graph {
  height: 300px;
  width: 100%;
}

/* Modal background overlay */
#modal_background {
  background-color: var(--md-default-fg-color--lightest);
  overflow: hidden;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}

/* Modal graph container */
.modal_graph {
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0px 0px 10px var(--md-default-fg-color--lightest);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10%;
  left: 15%;
  width: 70%;
  height: 80%;
  z-index: 100;
}
```

--------------------------------

### Extract Wikilinks using Regex

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

This Python code snippet demonstrates how to use a regular expression to extract wikilinks from Markdown content. The pattern specifically captures the link target, ignoring anchors and custom display text.

```python
import re

# Wikilink pattern: [[Link#Anchor|Custom Text]]
# Captures only the link portion, ignores anchors and display text
WIKI_PATTERN = re.compile(r"(?<!\[)\[(?P<wikilink>[^\|\]^#]{1,})(?:.*?)?\]\]")

# Example markdown content
markdown = """
# My Page

Check out the [[Installation]] guide.
See also [[Usage/Setup#Configuration|Setup Guide]] for details.
Reference the [[Concept]] for architecture info.
"""

# Extract all wikilinks
for match in re.finditer(WIKI_PATTERN, markdown):
    wikilink = match.group('wikilink')
    print(f"Found wikilink: {wikilink}")

# Output:
# Found wikilink: Installation
# Found wikilink: Usage/Setup
# Found wikilink: Concept
```

--------------------------------

### JavaScript Graph Rendering Functions

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

These JavaScript functions, provided in interactive_graph.js, are used to render the graph using Apache ECharts. They handle initialization, drawing in sidebar or modal views, and navigation on node clicks.

```javascript
// Initialize ECharts instance
function init_graph(params) {
  var myChart = echarts.init(document.getElementById('graph'), null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  return myChart;
};

// Draw graph in sidebar (local view - current page connections only)
function draw_graph_sidebar(myChart, global=false) {
  draw_graph(myChart, global)
}

// Draw graph in modal view (global view - all connections)
function draw_graph_modal(myChart, global=true) {
  draw_graph(myChart, global)
}

// Main draw function
function draw_graph(myChart, global=true) {
  var _option = $.extend(true, {}, option);
  if(!global) {
    // Filter to show only current page's connections
    _option.series[0].data = graph_nodes();
    _option.series[0].links = graph_links();
  }
  myChart.setOption(_option);

  // Navigate on node click
  myChart.on('click', function (params) {
    if(params.dataType == "node") {
      window.location = params.value;
    }
  });

  // Responsive resize
  window.addEventListener('resize', myChart.resize);
};

// Load graph.json and initialize
$.getJSON(document.currentScript.src + '/../graph.json', function (graph) {
  myChart.hideLoading();

  // Add minimum size offset to nodes
  graph.nodes.forEach(function (node) {
    node.symbolSize += 5;
  });

  // ECharts configuration
  option = {
    darkMode: "auto",
    backgroundColor: $("body").css("background-color"),
    series: [{
      name: 'Interactive Graph',
      type: 'graph',
      layout: 'force',
      data: graph.nodes,
      links: graph.links,
      zoom: 2,
      roam: true,
      label: { show: true, position: 'right' },
      emphasis: { focus: 'adjacency' },
      scaleLimit: { min: 0.5, max: 5 }
    }]
  };

  draw_graph_sidebar(myChart);
});
```

--------------------------------

### Modify Sidebar Graph Behavior

Source: https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/blob/main/README.md

To restore the previous behavior of the sidebar graph to include all edges (not just those related to the current page), set `global` to `true` at the top of the `interactive_graph.js` file. This requires downloading and placing the JavaScript file in your docs directory.

```javascript
draw_graph_sidebar(myChart, global=true)
```

--------------------------------

### Graph JSON Output Structure

Source: https://context7.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/llms.txt

The graph.json file contains nodes and links data for ECharts visualization. It is generated at site_dir/assets/javascripts/graph.json.

```json
{
  "nodes": [
    {
      "id": "0",
      "name": "Home",
      "symbolSize": 8,
      "value": "/my-site/"
    },
    {
      "id": "1",
      "name": "Installation",
      "symbolSize": 5,
      "value": "/my-site/Installation/"
    },
    {
      "id": "2",
      "name": "Setup",
      "symbolSize": 7,
      "value": "/my-site/Usage/Setup/"
    }
  ],
  "links": [
    {
      "source": "0",
      "target": "1"
    },
    {
      "source": "0",
      "target": "2"
    },
    {
      "source": "2",
      "target": "1"
    }
  ]
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.