1.Just don’t laugh very much
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"
}