Graph!

[Mara-Li]

Hello!
I finally successfully created a semi interactive graph using python.
First, install :

pip install obsidiantools
pip install pyvis

(don't forget to add the plugin to your requirements.txt)

I created the function :

def obsidian_graph():
    print('generate obsidian graph')
    vault = otools.Vault(os.getcwd()).connect().gather()
    graph = vault.graph
    net = Network(height="750px", width="750px", font_color="#7c7c7c", bgcolor="transparent")
    net.from_nx(graph)
    try:
        net.save_graph(str(Path(os.getcwd(), 'docs', 'assets', 'graph.html')))
    except OSError:
        pass
    shutil.rmtree(Path(os.getcwd(), 'lib'))
    print('done')
    return ''

obsidian_graph()

in overrides/hooks/on_env.py

This will create a file graph.html in your assets folder.

Secondly, I edited the utils.js :

window.onload = function () {
    let frameElement = document.querySelector('iframe');
    let doc = frameElement.contentDocument || frameElement.contentWindow.document;
    let css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = 'https://cdn.jsdelivr.net/gh/ObsidianPublisher/assets/dist/styles.css';
    css.type = 'text/css';
    doc.head.appendChild(css);
    const theme = document.querySelector('[data-md-color-scheme]');
    if (theme.getAttribute('data-md-color-scheme') === 'default') {
        doc.body.setAttribute('class', 'light')
    }
    else {
        doc.body.setAttribute('class', 'dark')
    }
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'attributes') {
                doc.body.setAttribute('class', mkDocsChirpyTranslator[theme.dataset.mdColorScheme])
            }
        })
    }
    )
    observer.observe(theme, {
        attributes: true,
        attributeFilter: ['data-md-color-scheme'],
    })
}

I added this to my utils.css :

#mynetwork {
    border: none !important;
}
.card {
    border: none !important;
    background-color: transparent !important;
}

Finally, I created the file graph.md with the following content :

<iframe id="test"
        title='test'
        src="../assets/graph.html"
        class="graph"
        width="750px"
        height="750px"
        allowtransparency="true"
        style="border: 0px; margin: 0px; padding: 0px; overflow: hidden;"
        scrolling="no">
</iframe>

and, TADA :

[Mara-Li]

Note : It must be possible to generate graph for each note, but I don't think it's a good idea because :

• The number of file generated will be huge
• So the build time will be huge too.