# Interactive Graph for Material for MkDocs
Plugin for Material for MkDocs to draw an interactive graph like Obsidian.
The graph inside the sidebar is just available for non-mobile website. The modal view via the button next to the light/dark mode switch shall work on all devices.
Refer [Github Pages](https://daxcore.github.io/mkdocs-obsidian-interactive-graph-plugin/) for a **demonstration** of the interactive graph in Material for MkDocs.
[](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/actions/workflows/ci.yml)
[](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/)
[](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/)
[](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/blob/main/LICENSE)
# Installation
Available on [PyPI](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/).
Install via `pip install mkdocs-obsidian-interactive-graph-plugin` or add it to your `requirements.txt`.
# Usage
## Setup in MkDocs
Activate the plugin in `mkdocs.yml`, but **note** that this plugin has to be located before plugins, that replace wikilinks by markdown links. Currently just wikilinks like `[[Link#Anchor|Custom Text]]` are supported.
```
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
```
## Graph Javascript by Apache ECharts
A `interactive_graph.js` example can be downloaded from [here](https://raw.githubusercontent.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/main/docs/ObsidianVault/assets/javascripts/interactive_graph.js) and must be located into the docs directory under `docs/YourSiteName/assets/javascripts/interactive_graph.js`.
Beginning from version 0.3.0 the default graph inside the sidebar was minimized to egdes related to the current page only. The previous behavior can be restored by setting `global` to `true` at line `draw_graph_sidebar(myChart, global=false)` at top of javascript file.
# Docker
Adapt the `.env` and `mkdocs.yml` files to your needs. `DEV=ON` will rebuild the `mkdocs-obsidian-interactive-graph-plugin` from local files. If `DEV != ON` the upstream packages of PyPI will be used. Build and start the Docker container via `docker compose up --build [-d]`.
# References
* https://www.mkdocs.org/
* https://squidfunk.github.io/mkdocs-material/
* https://github.com/ndy2/mkdocs-obsidian-support-plugin/tree/main
* https://github.com/GooRoo/mkdocs-obsidian-bridge
* https://github.com/blueswen/mkdocs-glightbox
* https://echarts.apache.org
Raw data
{
"_id": null,
"home_page": "https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin",
"name": "mkdocs-obsidian-interactive-graph-plugin",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": null,
"keywords": "mkdocs",
"author": "daxcore",
"author_email": "300ccda6-8d43-4f23-808e-961e653ff7d6@anonaddy.com",
"download_url": "https://files.pythonhosted.org/packages/25/f6/57db4a008b5ce0fe26c6b2796e93cf58bcfa569ce2ad7d7873f9cc0af5ca/mkdocs_obsidian_interactive_graph_plugin-0.3.0.tar.gz",
"platform": null,
"description": "# Interactive Graph for Material for MkDocs\nPlugin for Material for MkDocs to draw an interactive graph like Obsidian.\nThe graph inside the sidebar is just available for non-mobile website. The modal view via the button next to the light/dark mode switch shall work on all devices.\n\nRefer [Github Pages](https://daxcore.github.io/mkdocs-obsidian-interactive-graph-plugin/) for a **demonstration** of the interactive graph in Material for MkDocs.\n\n[](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/actions/workflows/ci.yml)\n[](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/)\n[](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/)\n[](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/blob/main/LICENSE)\n\n# Installation\nAvailable on [PyPI](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/).\nInstall via `pip install mkdocs-obsidian-interactive-graph-plugin` or add it to your `requirements.txt`.\n\n# Usage\n## Setup in MkDocs\nActivate the plugin in `mkdocs.yml`, but **note** that this plugin has to be located before plugins, that replace wikilinks by markdown links. Currently just wikilinks like `[[Link#Anchor|Custom Text]]` are supported.\n```\nplugins:\n - obsidian-interactive-graph\n\nextra_javascript:\n - https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js\n - https://fastly.jsdelivr.net/npm/echarts/dist/echarts.min.js\n - assets/javascripts/interactive_graph.js\n\nextra_css:\n - assets/stylesheets/interactive_graph.css\n```\n\n## Graph Javascript by Apache ECharts\nA `interactive_graph.js` example can be downloaded from [here](https://raw.githubusercontent.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/main/docs/ObsidianVault/assets/javascripts/interactive_graph.js) and must be located into the docs directory under `docs/YourSiteName/assets/javascripts/interactive_graph.js`.\n\nBeginning from version 0.3.0 the default graph inside the sidebar was minimized to egdes related to the current page only. The previous behavior can be restored by setting `global` to `true` at line `draw_graph_sidebar(myChart, global=false)` at top of javascript file.\n\n# Docker\nAdapt the `.env` and `mkdocs.yml` files to your needs. `DEV=ON` will rebuild the `mkdocs-obsidian-interactive-graph-plugin` from local files. If `DEV != ON` the upstream packages of PyPI will be used. Build and start the Docker container via `docker compose up --build [-d]`.\n\n# References\n* https://www.mkdocs.org/\n* https://squidfunk.github.io/mkdocs-material/\n* https://github.com/ndy2/mkdocs-obsidian-support-plugin/tree/main\n* https://github.com/GooRoo/mkdocs-obsidian-bridge\n* https://github.com/blueswen/mkdocs-glightbox\n* https://echarts.apache.org\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A MkDocs plugin that generates a obsidian like interactive graph",
"version": "0.3.0",
"project_urls": {
"Homepage": "https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin"
},
"split_keywords": [
"mkdocs"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "25f657db4a008b5ce0fe26c6b2796e93cf58bcfa569ce2ad7d7873f9cc0af5ca",
"md5": "913bc2df3f9f8a4508dc88e650ae52a7",
"sha256": "1ebaf07fbdb81bc75b19aca2c2444cdd45ffc11c6994f80cfe66fd3e870c4e5a"
},
"downloads": -1,
"filename": "mkdocs_obsidian_interactive_graph_plugin-0.3.0.tar.gz",
"has_sig": false,
"md5_digest": "913bc2df3f9f8a4508dc88e650ae52a7",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 12465,
"upload_time": "2024-12-14T16:21:56",
"upload_time_iso_8601": "2024-12-14T16:21:56.962759Z",
"url": "https://files.pythonhosted.org/packages/25/f6/57db4a008b5ce0fe26c6b2796e93cf58bcfa569ce2ad7d7873f9cc0af5ca/mkdocs_obsidian_interactive_graph_plugin-0.3.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-14 16:21:56",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "daxcore",
"github_project": "mkdocs-obsidian-interactive-graph-plugin",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [
{
"name": "mkdocs-callouts",
"specs": []
},
{
"name": "mkdocs-glightbox",
"specs": []
},
{
"name": "mkdocs-obsidian-bridge",
"specs": []
},
{
"name": "mkdocs-obsidian-support-plugin",
"specs": []
},
{
"name": "mkdocs-obsidian-interactive-graph-plugin",
"specs": []
},
{
"name": "overrides",
"specs": []
}
],
"lcname": "mkdocs-obsidian-interactive-graph-plugin"
}
JSON
