Has GPT chat almost created a plugin for drawing flowchart with the mouse?

1.Just don’t laugh very much :slight_smile:
1.1 I don’t code. I have never tried it. They cut my project funding so I can’t have the code written.
2.Using the GPT chat, I created plugin code that
2.1.using the Mermaid library is to draw the nodes and edges of a flowchart graph using the mouse.
2.2.I still wanted to
2.2.1. collapse/expand subgraphs (using the mouse or code) and
2.2.2. give the ability to create hyperlinks between nodes that are not necessarily connected by graph edges (using the mouse or code).
But was reportedly unable to integrate this into the rest of the code.
3.In the plugins folder I created a flowchart-plugin folder.
4.In the flowchart-plugin folder I created a
4.1.a main.js file containing the plugin code
4.2. a manifest.json file with the plugin “business card” (I provide the code below)
4.3. I installed something from Mermaid using a command I unfortunately can’t remember, which created a node_modules folder there, and package.json and package-lock.json files
5.According to further instructions after following these steps I should be able to enable the plugin in the community plugin set. Unfortunately I still do not see it there.

6.Can I count on someone smarter than GPT chat to help me finish this task? :))

7.Plugin code (main.js)

const { Plugin, WorkspaceLeaf } = require('obsidian');
const mermaid = require('mermaid');

class FlowchartPlugin extends Plugin {
    async onload() {
        this.registerView('flowchart-view', (leaf) => new FlowchartView(leaf));
        this.addCommand({
            id: 'open-flowchart',
            name: 'Otwórz diagram przepływu',
            callback: () => {
                this.app.workspace.getRightLeaf(false).setViewState({
                    type: 'flowchart-view'
                });
            }
        });
    }
}

class FlowchartView extends WorkspaceLeaf {
    constructor(leaf) {
        super(leaf);
        this.containerEl.addClass('flowchart-view');
        this.selectedNode = null;
        this.flowchartCode = `graph TD\nA[Start] --> B[End]`;
    }

    getViewType() {
        return 'flowchart-view';
    }

    getDisplayText() {
        return 'Diagram przepływu';
    }

    async onOpen() {
        const container = this.containerEl.createDiv();
        container.id = 'flowchart-container';
        mermaid.initialize({ startOnLoad: true });
        this.renderFlowchart(container, this.flowchartCode);
        container.addEventListener('click', (event) => {
            const target = event.target;
            if (target.tagName === 'g' && target.classList.contains('node')) {
                if (this.selectedNode) {
                    const startNode = this.selectedNode.textContent;
                    const endNode = target.textContent;
                    this.flowchartCode += `\n${startNode} --> ${endNode}`;
                    this.renderFlowchart(container, this.flowchartCode);
                    this.selectedNode = null;
                } else {
                    this.selectedNode = target;
                }
            } else if (target.tagName === 'text' && target.parentNode.classList.contains('edgeLabel')) {
                const edgeLabel = prompt('Wprowadź nową etykietę krawędzi:', target.textContent);
                if (edgeLabel) {
                    const edgePath = target.parentNode.previousSibling.querySelector('path').getAttribute('d');
                    const edgeStartEnd = edgePath.match(/M(.*?)C(.*?)(\d+),(\d+)/);
                    const edgeStartId = document.elementFromPoint(edgeStartEnd[1], edgeStartEnd[2]).textContent;
                    const edgeEndId = document.elementFromPoint(edgeStartEnd[3], edgeStartEnd[4]).textContent;
                    const edgeRegex = new RegExp(`(${edgeStartId}\\s*-->\\|)(.*?)(\\|\\s*${edgeEndId})`);
                    this.flowchartCode = this.flowchartCode.replace(edgeRegex, `$1${edgeLabel}$3`);
                    this.renderFlowchart(container, this.flowchartCode);
                }
            }
        });
        container.addEventListener('dblclick', (event) => {
            const newNodeId = `C${Math.floor(Math.random() * 1000)}`;
            const newNodeLabel = `Nowy węzeł ${newNodeId}`;
            this.flowchartCode += `\n${newNodeId}[${newNodeLabel}]`;
            this.renderFlowchart(container, this.flowchartCode);
        });
    }

    renderFlowchart(container, flowchartCode) {
        mermaid.render('flowchart', flowchartCode, (svg) => {
            container.innerHTML = svg;
        });
    }
}

module.exports = FlowchartPlugin;

8.manifest.json

{
    "id": "flowchart-plugin",
    "name": "Flowchart Plugin",
    "version": "1.0.0",
    "author": "GPT_AW",
    "description": "Plugin Flowchart.",
    "minAppVersion": "0.9.4",
    "isDesktopOnly": true,
    "js": "main.js"
}
1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.