使用 LiteGraph.js 构建可视化工作流图

// 引入 LiteGraph 库
import { LGraph } from "litegraph.js";
 
// 创建一个新的图
var graph = new LGraph();
 
// 添加一个起始节点
var start = LiteGraph.createNode("start");
graph.add(start);
 
// 添加一个结束节点
var end = LiteGraph.createNode("end");
graph.add(end);
 
// 连接起始节点和结束节点
graph.connect(start, "on", end, "in");
 
// 渲染图到指定的 DOM 元素
var canvas = document.getElementById("my_canvas");
var graphcanvas = new LiteGraph.CanvasDebug(graph);
graphcanvas.resize(canvas.width, canvas.height);
graphcanvas.draw(true);
 
// 你可以继续添加更多的节点和连接
// ...

这段代码演示了如何使用LiteGraph.js库创建一个简单的工作流图，其中包括一个起始节点和一个结束节点以及它们之间的连接。然后，将这个图渲染到页面上的一个<canvas>元素中。这个例子提供了一个基本框架，可以在此基础上根据实际需求添加更多功能和节点类型。