├── .env ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── compose.yml ├── docs └── ObsidianVault │ ├── Concept.md │ ├── Docker.md │ ├── Installation.md │ ├── References.md │ ├── Usage │ ├── ECharts.md │ └── Setup.md │ ├── assets │ ├── javascripts │ │ ├── interactive_graph.js │ │ └── obsidian_tags.js │ └── stylesheets │ │ ├── interactive_graph.css │ │ └── obsidian_tags.css │ └── index.md ├── mkdocs.yml ├── obsidian_interactive_graph ├── __init__.py └── plugin.py ├── requirements.txt └── setup.py /.env: -------------------------------------------------------------------------------- 1 | IP=0.0.0.0 2 | PORT=8000 3 | DEV=ON 4 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | on: [push] 3 | permissions: 4 | contents: write 5 | jobs: 6 | build: 7 | name: Build plugin 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v4 11 | - uses: actions/setup-python@v5 12 | with: 13 | python-version: 3.x 14 | - run: pip install setuptools 15 | - run: python setup.py sdist 16 | - name: Archive plugin 17 | uses: actions/upload-artifact@v4 18 | with: 19 | name: dist 20 | path: dist 21 | 22 | release: 23 | name: Upload release to PyPI 24 | needs: build 25 | runs-on: ubuntu-latest 26 | environment: 27 | name: pypi 28 | url: https://pypi.org/p/mkdocs-obsidian-interactive-graph-plugin 29 | permissions: 30 | id-token: write 31 | steps: 32 | - name: Download Artifact 33 | uses: actions/download-artifact@v4 34 | with: 35 | name: dist 36 | path: dist 37 | - name: List 38 | run: | 39 | ls dist 40 | - name: Publish package distributions to PyPI 41 | if: startsWith(github.ref, 'refs/tags') 42 | uses: pypa/gh-action-pypi-publish@release/v1 43 | with: 44 | skip-existing: true 45 | 46 | deploy: 47 | needs: release 48 | runs-on: ubuntu-latest 49 | steps: 50 | - uses: actions/checkout@v4 51 | - name: Configure Git Credentials 52 | run: | 53 | git config user.name github-actions[bot] 54 | git config user.email 41898282+github-actions[bot]@users.noreply.github.com 55 | - uses: actions/setup-python@v5 56 | with: 57 | python-version: 3.x 58 | - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV 59 | - uses: actions/cache@v4 60 | with: 61 | key: mkdocs-material-${{ env.cache_id }} 62 | path: .cache 63 | restore-keys: | 64 | mkdocs-material- 65 | - run: pip install mkdocs-material 66 | - run: pip install -r requirements.txt --upgrade 67 | - run: mkdocs gh-deploy --force 68 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .obsidian/ -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM squidfunk/mkdocs-material:latest 2 | 3 | WORKDIR /notes 4 | 5 | COPY ./obsidian_interactive_graph /plugin/obsidian_interactive_graph 6 | 7 | COPY ./setup.py /plugin/setup.py 8 | 9 | COPY ./README.md /plugin/README.md 10 | 11 | COPY ./.git/ /plugin/.git/ 12 | 13 | ARG DEV 14 | 15 | RUN if [[ "$DEV" == "ON" ]]; then pip install /plugin/; fi 16 | 17 | COPY ./requirements.txt /notes/requirements.txt 18 | 19 | RUN pip install --upgrade -r requirements.txt 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 daxcore 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Interactive Graph for Material for MkDocs 2 | Plugin for Material for MkDocs to draw an interactive graph like Obsidian. 3 | 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. 4 | 5 | Refer [Github Pages](https://daxcore.github.io/mkdocs-obsidian-interactive-graph-plugin/) for a **demonstration** of the interactive graph in Material for MkDocs. 6 | 7 | [![Build Status](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/actions/workflows/ci.yml/badge.svg)](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/actions/workflows/ci.yml) 8 | [![PyPI Version](https://img.shields.io/pypi/v/mkdocs-obsidian-interactive-graph-plugin)](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/) 9 | [![PyPi Downloads](https://img.shields.io/pypi/dm/mkdocs-obsidian-interactive-graph-plugin.svg)](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/) 10 | [![GitHub License](https://img.shields.io/github/license/daxcore/mkdocs-obsidian-interactive-graph-plugin)](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/blob/main/LICENSE) 11 | 12 | # Installation 13 | Available on [PyPI](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/). 14 | Install via `pip install mkdocs-obsidian-interactive-graph-plugin` or add it to your `requirements.txt`. 15 | 16 | # Usage 17 | ## Setup in MkDocs 18 | 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. 19 | ``` 20 | plugins: 21 | - obsidian-interactive-graph 22 | 23 | extra_javascript: 24 | - https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js 25 | - https://fastly.jsdelivr.net/npm/echarts/dist/echarts.min.js 26 | - assets/javascripts/interactive_graph.js 27 | 28 | extra_css: 29 | - assets/stylesheets/interactive_graph.css 30 | ``` 31 | 32 | ## Graph Javascript by Apache ECharts 33 | 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`. 34 | 35 | Beginning from version `0.3.0` the default graph inside the sidebar was minimized to edges 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. 36 | 37 | # Docker 38 | 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]`. 39 | 40 | # References 41 | * https://www.mkdocs.org/ 42 | * https://squidfunk.github.io/mkdocs-material/ 43 | * https://github.com/ndy2/mkdocs-obsidian-support-plugin/tree/main 44 | * https://github.com/GooRoo/mkdocs-obsidian-bridge 45 | * https://github.com/blueswen/mkdocs-glightbox 46 | * https://echarts.apache.org 47 | -------------------------------------------------------------------------------- /compose.yml: -------------------------------------------------------------------------------- 1 | services: 2 | mkdocs: 3 | build: 4 | context: . 5 | args: 6 | - DEV=$DEV 7 | network: host 8 | restart: unless-stopped 9 | ports: 10 | - $IP:$PORT:8000 11 | volumes: 12 | - ./mkdocs.yml:/notes/mkdocs.yml:ro 13 | - ./docs/:/notes/docs/:ro 14 | -------------------------------------------------------------------------------- /docs/ObsidianVault/Concept.md: -------------------------------------------------------------------------------- 1 | # Concept 2 | ## JSON file 3 | 4 | The python plugin for Material for #MkDocs creates a `graph.json` file, which will be used by [[ECharts]] javascript. 5 | 6 | You can find the #JSON file for this example site here: [graph.json](../assets/javascripts/graph.json) 7 | -------------------------------------------------------------------------------- /docs/ObsidianVault/Docker.md: -------------------------------------------------------------------------------- 1 | # Docker 2 | ## Development 3 | 4 | Adapt the `.env` and `mkdocs.yml` files to your needs. `DEV=ON` will rebuild the `mkdocs-obsidian-interactive-graph-plugin` from local files. 5 | 6 | ## Productive 7 | 8 | If `DEV != ON` is set in `mkdocs.yml` the upstream packages of #PyPI will be used. 9 | 10 | ## Start 11 | 12 | Build and start the Docker container via `docker compose up --build [-d]`. 13 | -------------------------------------------------------------------------------- /docs/ObsidianVault/Installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | Available on [PyPI](https://pypi.org/project/mkdocs-obsidian-interactive-graph-plugin/){:target="\_blank"}. 4 | Install via `pip install mkdocs-obsidian-interactive-graph-plugin` or add it to your `requirements.txt`. 5 | -------------------------------------------------------------------------------- /docs/ObsidianVault/References.md: -------------------------------------------------------------------------------- 1 | # References 2 | 3 | * [https://www.mkdocs.org/](https://www.mkdocs.org/){:target="\_blank"} 4 | * [https://squidfunk.github.io/mkdocs-material/](https://squidfunk.github.io/mkdocs-material/){:target="\_blank"} 5 | * [https://github.com/ndy2/mkdocs-obsidian-support-plugin/tree/main](https://github.com/ndy2/mkdocs-obsidian-support-plugin/tree/main){:target="\_blank"} 6 | * [https://github.com/GooRoo/mkdocs-obsidian-bridge](https://github.com/GooRoo/mkdocs-obsidian-bridge){:target="\_blank"} 7 | * [https://github.com/blueswen/mkdocs-glightbox](https://github.com/blueswen/mkdocs-glightbox){:target="\_blank"} 8 | * [https://echarts.apache.org](https://echarts.apache.org){:target="\_blank"} 9 | -------------------------------------------------------------------------------- /docs/ObsidianVault/Usage/ECharts.md: -------------------------------------------------------------------------------- 1 | # ECharts 2 | ## Graph Javascript by Apache ECharts 3 | 4 | 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){:target="\_blank"} and must be located into the docs directory under `docs/ObsidianVault/assets/javascripts/interactive_graph.js`. 5 | 6 | ## Live Editor 7 | 8 | There is a web-based live editor for the #EChart javascript file: [Live Editor](https://echarts.apache.org/examples/en/editor.html?c=graph){:target="\_blank"} 9 | -------------------------------------------------------------------------------- /docs/ObsidianVault/Usage/Setup.md: -------------------------------------------------------------------------------- 1 | # Setup 2 | ## Setup in MkDocs 3 | 4 | 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. 5 | 6 | ``` 7 | plugins: 8 | - obsidian-interactive-graph 9 | 10 | extra_javascript: 11 | - https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js 12 | - https://fastly.jsdelivr.net/npm/echarts/dist/echarts.min.js 13 | - assets/javascripts/interactive_graph.js 14 | 15 | extra_css: 16 | - assets/stylesheets/interactive_graph.css 17 | ``` 18 | -------------------------------------------------------------------------------- /docs/ObsidianVault/assets/javascripts/interactive_graph.js: -------------------------------------------------------------------------------- 1 | // draw graph in sidebar, change global to true if prefered 2 | function draw_graph_sidebar(myChart, global=false) { 3 | draw_graph(myChart, global) 4 | } 5 | 6 | // draw graph in modal view 7 | function draw_graph_modal(myChart, global=true) { 8 | draw_graph(myChart, global) 9 | } 10 | 11 | // add graph button next to light/dark mode switch if activated, but before search 12 | $('.md-search').before('
\ 13 | \ 19 |
'); 20 | 21 | // add a div to html in which the graph will be drawn 22 | function add_graph_div(params) { 23 | $('.md-sidebar--secondary').each(function() { 24 | $(this).contents().append('
'); 25 | }); 26 | }; 27 | 28 | add_graph_div(); 29 | 30 | function init_graph(params) { 31 | var myChart = echarts.init(document.getElementById('graph'), null, { 32 | renderer: 'canvas', 33 | useDirtyRect: false 34 | }); 35 | return myChart; 36 | }; 37 | 38 | var myChart = init_graph(); 39 | 40 | function draw_graph(myChart, global=true) { 41 | var _option = $.extend(true, {}, option); 42 | if(!global) { 43 | _option.series[0].data = graph_nodes(); 44 | _option.series[0].links = graph_links(); 45 | } 46 | // draw the graph 47 | myChart.setOption(_option); 48 | 49 | // add click event for nodes 50 | myChart.on('click', function (params) { 51 | if(params.dataType == "node") { 52 | window.location = params.value; 53 | } 54 | }); 55 | 56 | // redraw on resize 57 | window.addEventListener('resize', myChart.resize); 58 | }; 59 | 60 | var option; 61 | 62 | function graph_links() { 63 | id = option.series[0].data.find(it => it.value === window.location.pathname).id; 64 | return option.series[0].links.filter(it => it.source === id || it.target === id); 65 | } 66 | 67 | function graph_nodes() { 68 | id = option.series[0].data.find(it => it.value === window.location.pathname).id; 69 | links = option.series[0].links.filter(it => it.source === id || it.target === id); 70 | ids = []; 71 | links.forEach(function (link) { 72 | ids.push(link.source, link.target); 73 | }); 74 | return option.series[0].data.filter(it => [...new Set(ids)].includes(it.id)); 75 | } 76 | 77 | $.getJSON(document.currentScript.src + '/../graph.json', function (graph) { 78 | myChart.hideLoading(); 79 | 80 | // an offset of 5, so the dot/node is not that small 81 | graph.nodes.forEach(function (node) { 82 | node.symbolSize += 5; 83 | }); 84 | 85 | // special feature, if u want to have long note titles, u can use this ' •' 86 | // to cut everything behind in graph view 87 | graph.nodes.forEach(function (node) { 88 | node.name = node.name.split(' •')[0]; 89 | }); 90 | graph.links.forEach(function (link) { 91 | link.source = link.source.split(' •')[0]; 92 | link.target = link.target.split(' •')[0]; 93 | }); 94 | 95 | option = { 96 | tooltip: { 97 | show: false, 98 | }, 99 | legend: [ // categories not supported yet 100 | //{ 101 | // data: graph.categories.map(function (a) { 102 | // return a.name; 103 | // }) 104 | //} 105 | ], 106 | darkMode: "auto", 107 | backgroundColor: $("body").css("background-color"), 108 | series: [ 109 | { 110 | name: 'Interactive Graph', 111 | type: 'graph', 112 | layout: 'force', 113 | data: graph.nodes, 114 | links: graph.links, 115 | categories: [], 116 | zoom: 2, 117 | roam: true, 118 | draggable: false, 119 | label: { 120 | show: true, 121 | position: 'right', 122 | formatter: '{b}' 123 | }, 124 | emphasis: { 125 | focus: 'adjacency', // gray out not related nodes on mouse over 126 | label: { 127 | fontWeight: "bold" 128 | } 129 | }, 130 | labelLayout: { 131 | hideOverlap: false // true could be a good idea for large graphs 132 | }, 133 | scaleLimit: { 134 | min: 0.5, 135 | max: 5 136 | }, 137 | lineStyle: { 138 | color: 'source', 139 | curveness: 0 // 0.3, if not 0, link an backlink will have 2 lines 140 | } 141 | } 142 | ] 143 | }; 144 | // initial draw in sidebar 145 | draw_graph_sidebar(myChart); 146 | }); 147 | 148 | $("#__palette_0").change(function(){ 149 | option.backgroundColor = $("body").css("background-color"); 150 | myChart.setOption(option); 151 | }); 152 | $("#__palette_1").change(function(){ 153 | option.backgroundColor = $("body").css("background-color"); 154 | myChart.setOption(option); 155 | }); 156 | 157 | $('#graph_button').on('click', function (params) { 158 | $("body").css({ overflow: "hidden", position: "fixed" }); 159 | $('#graph').remove(); 160 | $('').appendTo('body'); 161 | $('#modal_background').on('click', function (params) { 162 | if(params.target === this) { 163 | $("body").css({ overflow: "", position: "" }); 164 | $('#graph').remove(); 165 | $('#modal_background').remove(); 166 | add_graph_div(); 167 | myChart = init_graph(); 168 | // re-draw sidebar, e.g. switch back from modal view 169 | draw_graph_sidebar(myChart); 170 | } 171 | }); 172 | myChart = init_graph(); 173 | draw_graph_modal(myChart); 174 | }); 175 | -------------------------------------------------------------------------------- /docs/ObsidianVault/assets/javascripts/obsidian_tags.js: -------------------------------------------------------------------------------- 1 | $('.hash').each(function() { 2 | var link = $(this).html(); 3 | $(this).contents().wrap('#'); 4 | }); 5 | -------------------------------------------------------------------------------- /docs/ObsidianVault/assets/stylesheets/interactive_graph.css: -------------------------------------------------------------------------------- 1 | .graph { 2 | height:300px; 3 | width: 100%; 4 | } 5 | 6 | #modal_background { 7 | background-color: var(--md-default-fg-color--lightest); 8 | overflow: hidden; 9 | display: flex; 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | height: 100%; 15 | z-index: 99; 16 | } 17 | 18 | .modal_graph { 19 | border: 1px solid var(--md-default-fg-color--lightest); 20 | box-shadow: 0px 0px 10px var(--md-default-fg-color--lightest); 21 | border-radius: 8px; 22 | overflow: hidden; 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | position: absolute; 27 | top: 10%; 28 | left: 15%; 29 | width: 70%; 30 | height: 80%; 31 | z-index: 100; 32 | } -------------------------------------------------------------------------------- /docs/ObsidianVault/assets/stylesheets/obsidian_tags.css: -------------------------------------------------------------------------------- 1 | .md-typeset figure { 2 | margin: 0; 3 | } 4 | 5 | .hash { 6 | background-color: #f3eefd; 7 | border-radius: 20px; 8 | padding: 5px; 9 | font-weight: normal; 10 | } 11 | 12 | [data-md-color-scheme="slate"] .hash { 13 | background-color: #292433; 14 | } -------------------------------------------------------------------------------- /docs/ObsidianVault/index.md: -------------------------------------------------------------------------------- 1 | # Welcome 2 | ## Interactive Graph for Material for MkDocs 3 | 4 | Plugin for Material for #MkDocs to draw an interactive graph like Obsidian. 5 | 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. 6 | 7 | Source code located on Github [https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/](https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/){:target="\_blank"}. 8 | 9 | The interactive graph based on the Apache [[ECharts]] open-source project. There is an example setup of the javascript available. 10 | Feel free to adapt to your needs. 11 | 12 | ## Getting Started 13 | 14 | All necessary information to setup the project are available under [[Installation]]. 15 | The configuration for #MkDocs is described under [[Setup]]. 16 | 17 | It is also possible to use [[Docker]] for development reasons as well as for productive usage. 18 | 19 | ## Concept 20 | 21 | If you are interessted into the idea of the implementation, please have a look here [[Concept]]. 22 | 23 | ## References 24 | 25 | Also have a look at [[References]] that listed all projects used. 26 | -------------------------------------------------------------------------------- /mkdocs.yml: -------------------------------------------------------------------------------- 1 | site_name: Interactive Graph for Material for MkDocs 2 | docs_dir: ./docs/ObsidianVault/ 3 | site_url: https://daxcore.github.io/mkdocs-obsidian-interactive-graph-plugin/ 4 | 5 | site_description: Plugin for Material for MkDocs to draw an interactive graph like Obsidian 6 | site_author: daxcore 7 | 8 | repo_url: https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/ 9 | edit_uri: 'blob/main/docs/ObsidianVault/' 10 | edit_uri_template: 'blob/main/docs/ObsidianVault/{path}' 11 | 12 | theme: 13 | name: material 14 | language: de 15 | include_search_page: true 16 | palette: 17 | - scheme: default 18 | toggle: 19 | icon: material/weather-sunny 20 | name: Switch to dark mode 21 | - scheme: slate 22 | toggle: 23 | icon: material/weather-night 24 | name: Switch to light mode 25 | font: 26 | text: Inter 27 | code: Source Code Pro 28 | features: 29 | - content.action.view 30 | - content.code.annotate 31 | - content.code.copy 32 | - content.code.select 33 | - content.tabs.link 34 | - navigation.expand 35 | - navigation.indexes 36 | # navigation.instant # WARN: breaks some javascripts 37 | - navigation.sections 38 | - navigation.top 39 | - search.highlight 40 | - search.share 41 | - search.suggest 42 | 43 | plugins: 44 | - search 45 | - callouts 46 | - obsidian-interactive-graph 47 | - obsidian-support 48 | - obsidian-bridge 49 | - glightbox 50 | 51 | markdown_extensions: 52 | - admonition 53 | - attr_list 54 | - codehilite 55 | - md_in_html 56 | - def_list 57 | - sane_lists 58 | - pymdownx.details 59 | - pymdownx.magiclink 60 | - pymdownx.superfences 61 | - toc: 62 | permalink: "#" 63 | 64 | extra_css: 65 | - assets/stylesheets/obsidian_tags.css 66 | - assets/stylesheets/interactive_graph.css 67 | 68 | extra_javascript: 69 | - https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js 70 | - https://fastly.jsdelivr.net/npm/echarts/dist/echarts.min.js 71 | - assets/javascripts/obsidian_tags.js 72 | - assets/javascripts/interactive_graph.js 73 | -------------------------------------------------------------------------------- /obsidian_interactive_graph/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/ae4527cdc2fd17e43aa51d33edf152bca64bd02a/obsidian_interactive_graph/__init__.py -------------------------------------------------------------------------------- /obsidian_interactive_graph/plugin.py: -------------------------------------------------------------------------------- 1 | import json 2 | import os 3 | import re 4 | 5 | from mkdocs.config.defaults import MkDocsConfig 6 | from mkdocs.plugins import BasePlugin, get_plugin_logger 7 | from mkdocs.structure.files import Files as MkDocsFiles 8 | from mkdocs.structure.pages import Page as MkDocsPage 9 | from mkdocs.structure.nav import Navigation as MkDocsNav 10 | 11 | 12 | class ObsidianInteractiveGraphPlugin(BasePlugin): 13 | def __init__(self): 14 | super().__init__() 15 | self.logger = get_plugin_logger(__name__) 16 | self.nodes = {} 17 | self.site_path = "" 18 | self.current_id = 0 19 | self.data = json.loads('{ "nodes": [], "links": [] }') 20 | 21 | @property 22 | def id(self): 23 | current_id = self.current_id 24 | self.current_id += 1 25 | return current_id 26 | 27 | def get_path(self, base: str, *argv: list[str]) -> str: 28 | from urllib.parse import urljoin 29 | result = base 30 | for path in argv: 31 | result = urljoin(result, path) 32 | return result 33 | 34 | def get_page_path(self, page: MkDocsPage) -> str: 35 | return self.get_path(self.site_path, page.file.src_uri).replace(".md", "") 36 | 37 | def page_if_exists(self, page: str) -> str: 38 | page = self.get_path(self.site_path, page) 39 | for k,_ in self.nodes.items(): 40 | if k == page: 41 | return page 42 | return None 43 | 44 | def collect_pages(self, nav: MkDocsNav, config: MkDocsConfig): 45 | for page in nav.pages: 46 | page.read_source(config=config) 47 | self.nodes[self.get_page_path(page)] = { 48 | "id": self.id, 49 | "title": page.title, 50 | "url": page.abs_url, 51 | "symbolSize": 0, 52 | "markdown": page.markdown, 53 | "is_index": page.is_index 54 | } 55 | 56 | def parse_markdown(self, markdown: str, page: MkDocsPage): 57 | # wikilinks: [[Link#Anchor|Custom Text]], just the link is needed 58 | WIKI_PATTERN = re.compile(r"(?[^\|^\]^\#]{1,})(?:.*?)\]\]") 59 | for match in re.finditer(WIKI_PATTERN, markdown): 60 | wikilink = match.group('wikilink') 61 | 62 | # get the nodes key 63 | page_path = self.get_page_path(page) 64 | 65 | # search page path of target page 66 | target_page_path = "" 67 | 68 | # link to self if wikilink is index and current page is index 69 | if wikilink == "index" and self.nodes[page_path]["is_index"]: 70 | target_page_path = page_path 71 | else: 72 | # 1st: link to global page if exists 73 | # 2nd: search relative 74 | wikilink = self.page_if_exists(wikilink) or self.page_if_exists(self.get_path(page_path, wikilink)) or wikilink 75 | 76 | # find something that matches: shortest path depth 77 | abslen = None 78 | for k,_ in self.nodes.items(): 79 | for _ in re.finditer(re.compile(r"(.*" + wikilink + r")"), k): 80 | curlen = k.count('/') 81 | if abslen == None or curlen < abslen: 82 | target_page_path = k 83 | abslen = curlen 84 | 85 | if target_page_path == "": 86 | self.logger.warning(page.file.src_uri + ": no target page found for wikilink: " + wikilink) 87 | continue 88 | 89 | link = { 90 | "source": str(self.nodes[page_path]["id"]), 91 | "target": str(self.nodes[target_page_path]["id"]) 92 | } 93 | self.data["links"].append(link) 94 | 95 | # rate +1 if page has link of is linked 96 | self.nodes[page_path]["symbolSize"] = self.nodes[page_path].get("symbolSize", 1) + 1 97 | self.nodes[target_page_path]["symbolSize"] = self.nodes[target_page_path].get("symbolSize", 1) + 1 98 | 99 | def create_graph_json(self, config: MkDocsConfig): 100 | for i, (k,v) in enumerate(self.nodes.items()): 101 | node = { 102 | "id": str(i), 103 | "name": v["title"], 104 | "symbolSize": v["symbolSize"], 105 | "value": v["url"] 106 | } 107 | self.data["nodes"].append(node) 108 | 109 | filename = os.path.join(config['site_dir'], 'assets', 'javascripts', 'graph.json') 110 | os.makedirs(os.path.dirname(filename), exist_ok=True) 111 | with open(filename, 'w') as file: 112 | json.dump(self.data, file, sort_keys=False, indent=2) 113 | 114 | def on_config(self, config: MkDocsConfig, **kwargs): 115 | self.site_path = config.site_name + "/" 116 | 117 | def on_nav(self, nav: MkDocsNav, files: MkDocsFiles, config: MkDocsConfig, **kwargs): 118 | self.collect_pages(nav, config) 119 | 120 | def on_page_markdown(self, markdown: str, page: MkDocsPage, config: MkDocsConfig, files: MkDocsFiles, **kwargs): 121 | self.parse_markdown(markdown, page) 122 | 123 | def on_env(self, env, config: MkDocsConfig, files: MkDocsFiles): 124 | self.create_graph_json(config) 125 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | mkdocs-callouts 2 | mkdocs-glightbox 3 | mkdocs-obsidian-bridge 4 | mkdocs-obsidian-support-plugin 5 | mkdocs-obsidian-interactive-graph-plugin 6 | overrides -------------------------------------------------------------------------------- /setup.py: -------------------------------------------------------------------------------- 1 | import os 2 | 3 | from setuptools import setup, find_packages 4 | 5 | def read_file(fname): 6 | return open(os.path.join(os.path.dirname(__file__), fname)).read() 7 | 8 | setup( 9 | name='mkdocs-obsidian-interactive-graph-plugin', 10 | description='A MkDocs plugin that generates a obsidian like interactive graph', 11 | long_description=read_file('README.md'), 12 | long_description_content_type='text/markdown', 13 | keywords='mkdocs', 14 | url='https://github.com/daxcore/mkdocs-obsidian-interactive-graph-plugin', 15 | author='daxcore', 16 | author_email='300ccda6-8d43-4f23-808e-961e653ff7d6@anonaddy.com', 17 | license='MIT', 18 | python_requires='>=3.6', 19 | use_scm_version=True, 20 | setup_requires=['setuptools_scm'], 21 | install_requires=['mkdocs-material'], 22 | classifiers=[ 23 | 'Development Status :: 4 - Beta', 24 | 'Intended Audience :: Developers', 25 | 'Intended Audience :: Information Technology', 26 | 'License :: OSI Approved :: MIT License', 27 | 'Programming Language :: Python :: 3.6', 28 | 'Programming Language :: Python :: 3.7', 29 | 'Programming Language :: Python :: 3.8', 30 | 'Programming Language :: Python :: 3.9', 31 | 'Programming Language :: Python :: 3.10', 32 | 'Programming Language :: Python :: 3.11', 33 | 'Programming Language :: Python :: 3.12' 34 | ], 35 | packages=find_packages(), 36 | entry_points={ 37 | 'mkdocs.plugins': [ 38 | 'obsidian-interactive-graph = obsidian_interactive_graph.plugin:ObsidianInteractiveGraphPlugin' 39 | ] 40 | } 41 | ) 42 | --------------------------------------------------------------------------------