I want to make a smaller version just for displaying workflow.json

[LincZero]

I want to achieve

I want to make a obsidian plugin and vuepress/vitepress plugin. This plug-in is used to turn workflow.json into a canvas (with nodes and lines, as shown in ComfyUI_frontend).

The plugin makes it easy for people to show what a workflow looks like in obsidian notes or in a blog without having to go through screenshots. I think this will be handy when managing a lot of workflow.json files.

Alternatively, this could be used to extend to software scenarios such as blender, ue, houdini, etc.

I will do this plugin by myself. I once had the development experience and products of obsidian and vuepress and markdown-it plugins. I just want to ask for some possible suggestions.

Similar work

I see someone who seems to have done similar work, but I'm not sure about his approach, do you know:

https://openart.ai/workflows/hound_red_82/depthflow/7Xcmf1Hrahe9pERHUi8Q

You can see Node Diagram showed a preview of a flow chart.

More other project

In addition to comfyui frontend, I have also investigated NodeEditors for other front-end stacks, trying to find some common libraries. I've found a lot of great products on Github, and I'm going to research them. But since the ComfyUI_frontend interface is pretty good, and I've seen some examples at https://openart.ai/, I'll probably try it first. Maybe later, when I have some free time, I will slowly analyze the comfyUI_frontend source code and try to simplify it so that it will work without a server.

[LincZero]

I took the time to do some research today

Looks like I should just reuse the GraphCanvas.vue component? And then find that function that loads workflow.json and deserializes the json generating nodes and lines onto the canvas? I haven't found the code for this part of the logic yet, I'll study on it next time (Take time every few days to research until I am sure there is a viable development solution)

[LincZero]

Recent research again.

I think from the start ComfyUI_frontend extracted on the basis of part of rendering, because I saw the https://openart.ai/workflows/ shows good effect (I still don't know how did he do it)

However, I now consider not modifying the extraction based on ComfyUI_frontend, because there are more coupling, which may be difficult to simplify. The second is that although the solution can render the results exactly as ComfyUI_frontend shows, considering the node rendering I may later expand to blender, ue, etc., in fact, the similarity with one of the software is not as important as the commonality.

I now consider using reactflow/svelteflow/vueflow or alibaba butterfly or antvis X6 to finish the work

[LincZero]

Except https://openart.ai/, I see the https://comfyworkflows.com/workflows/2a8f0c6b-eb45-41c5-b047-811eb705368c website has a similar effect.

So how did they do it?

[LincZero]

This is my plugin work on obsidian,

I redeveloped it and felt like I had taken the long way around (the developers didn't give me any advice, I didn't know exactly what the sites in my previous examples did)... At the moment there seems to be a lot to be desired...

[LincZero]

I made it: https://github.com/LincZero/obsidian-node-flow

Although it is written again, the logic of comfyui-frontend is not reused, and the functionality is missing

[LincZero]

Some defects: The name of the internal attribute is missing from the workflow file, only weiget_value

"properties": {
  "Node name for S&R": "KSampler"
}

Can I disable compression of properties information? Then it becomes an array like the weiget_value attribute