Better tag visualization in graph view: show links between tags, resize tags based on mention

+1 This feature would be extremely useful for doing research on different perspectives for a given concepts.

I tried to use ChatGPT based on the requests in this forum to code the plugin we are looking for. ChatGPT didn’t give a complete solution, but maybe its answer can be used as a starting point for folks who have the necessary experience to implement the steps toward such a plugin. Can someone evaluate if this result is helpful and whether the direction ChatGPT is pointing towards looks promising?

Prompt number 1 was:

can you code an obsidian plug-in?


// main.js
module.exports = {
    onload() {
        console.log('Hello from your Obsidian plugin!');
    }
};


Here are the steps to create an Obsidian plugin:

Create a new folder in your Obsidian plugins directory. This directory is typically located at <vault>/plugins/. Name your folder appropriately, for example, my-plugin.
Inside the plugin folder, create a main.js file with the code provided above.
Open Obsidian and go to the Settings > Options > Community plugins.
Enable "Safe mode" to allow the loading of local plugins.
Reload Obsidian.
Your plugin should now be loaded, and you should see the console log message in the developer tools (you can open the developer tools by pressing Ctrl+Shift+I or Cmd+Opt+I).
This is a basic example, and you can expand on it by exploring the Obsidian API and adding more functionality based on your requirements. The Obsidian API documentation is available at https://github.com/obsidianmd/obsidian-api.

Remember to refer to the Obsidian API documentation for detailed information on available methods and events to interact with the Obsidian app.

Prompt Number 2 was:

create a plugin that makes it possible to have a graph view for tags also. I mean like to check how the tags are interlinked to each other. And the more number of times a tag is mentioned the bigger the circle is in the graph view. I was thinking of it as a separate view from the current graph view. Though it will be comparatively basic to the current graph view and local view. Kind of like the graph view in Walling. It will be interesting to explore the relationships as a result. My thought was that the graph could support both pages and tags. The user can this filter which is seen.
With just page user sees current graph. With page and tags, user sees page-page arcs and tag-page arcs. With just tags, pages are hidden so tag-{pages}-tag becomes just tag-tag. This allows the user to navigate between pages based on direct links and shared tags.

Creating a plugin like the one you've described involves more advanced development and interaction with the Obsidian API. Below is a simplified example to get you started. This example uses the onload event to create a new button in the toolbar, and when clicked, it opens a new modal with a graph view of tags.

// main.js
module.exports = {
    onload() {
        this.addRibbonButton();
    },

    addRibbonButton() {
        // Add a button to the toolbar
        this.ribbonIcon = this.addIcon("graph", "Graph Tags", async () => {
            // When the button is clicked, show the modal
            this.showTagGraphModal();
        });
    },

    showTagGraphModal() {
        // Create a new modal
        const modal = this.app.workspace.addModal(new TagGraphModal());
        modal.open();
    }
};

class TagGraphModal extends import("obsidian").Modal {
    constructor() {
        super();
    }

    onOpen() {
        // Perform actions when the modal is opened
        const contentEl = this.contentEl;

        // Add your graph rendering logic here
        contentEl.innerHTML = "<h2>Tag Graph View</h2><p>Your graph rendering logic goes here.</p>";
    }

    onClose() {
        // Perform actions when the modal is closed
    }
}


This is a starting point, and you'll need to build the logic for rendering the tag graph based on your requirements. You would likely need to use D3.js or a similar library to handle the graph visualization.

For a complete plugin, you need to consider:

Accessing Tag Information: You can use the Obsidian API to get information about tags and their occurrences.
Graph Rendering: Use a JavaScript graph library like D3.js or another suitable library for rendering the graph. Define the nodes and edges based on the tags and their relationships.
Modal UI: Create a modal that displays the graph. Handle user interactions and filter the graph based on the selected options.
Integration with Obsidian: Ensure that your plugin integrates seamlessly with Obsidian and follows Obsidian's plugin development guidelines.
For a more complete and functional plugin, consider diving into the Obsidian API documentation and exploring relevant JavaScript libraries for graph visualization. You might also find inspiration from existing Obsidian plugins.