零基础上手LiteGraph.js：从安装到构建第一个节点流程图的完整指南-CSDN博客

零基础上手LiteGraph.js：从安装到构建第一个节点流程图的完整指南

【免费下载链接】litegraph.js A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently. 项目地址: https://gitcode.com/gh_mirrors/li/litegraph.js

你是否曾因复杂的逻辑流程难以可视化而困扰？是否希望用拖拽方式搭建应用逻辑而非编写大量代码？本文将带你从零开始，在15分钟内完成LiteGraph.js的环境搭建并创建第一个节点流程图，无需任何前端框架经验。

关于LiteGraph.js

LiteGraph.js是一个基于JavaScript的节点图引擎和编辑器，类似Unreal Engine的蓝图系统或Pure Data的可视化编程环境。它使用HTML5 Canvas 2D渲染，可在浏览器端或Node.js环境运行，支持将图形导出为JSON独立使用。

核心优势：

纯浏览器渲染，无需安装额外软件
轻量化设计，单个JS文件即可集成
支持自定义节点类型和主题样式
可嵌入现有Web应用，也可独立运行

项目结构中核心文件包括：

src/litegraph.js：核心引擎实现
css/litegraph.css：基础样式表
editor/index.html：官方演示编辑器

环境准备与安装

安装方式对比

安装方式	难度	适用场景
CDN引入	★☆☆☆☆	快速原型、在线演示
NPM安装	★★☆☆☆	生产环境、模块化项目
源码克隆	★★★☆☆	需自定义引擎功能

快速体验（CDN方式）

如需快速测试，可直接在HTML中引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/litegraph.js@0.4/css/litegraph.css">
<script src="https://cdn.jsdelivr.net/npm/litegraph.js@0.4/build/litegraph.min.js"></script>

构建第一个节点流程图

基础HTML结构

创建index.html文件，引入必要资源：

<!DOCTYPE html>
<html>
<head>
    <title>LiteGraph入门示例</title>
    <link rel="stylesheet" type="text/css" href="css/litegraph.css">
    <script type="text/javascript" src="src/litegraph.js"></script>
    <style>
        body { margin: 0; }
        #canvas { width: 100vw; height: 100vh; border: 1px solid #555; }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // 代码将在这里编写
    </script>
</body>
</html>

核心代码实现

在<script>标签中添加以下代码，创建包含常量节点和监视节点的简单流程图：

// 创建图形实例
var graph = new LGraph();

// 创建画布并关联图形
var canvas = new LGraphCanvas("#canvas", graph);

// 添加常量节点
var node_const = LiteGraph.createNode("basic/const");
node_const.pos = [200, 200];  // 节点位置
node_const.setValue(4.5);      // 设置初始值
graph.add(node_const);

// 添加监视节点
var node_watch = LiteGraph.createNode("basic/watch");
node_watch.pos = [500, 200];  // 放置在常量节点右侧
graph.add(node_watch);

// 连接两个节点
node_const.connect(0, node_watch, 0);

// 启动图形
graph.start();

代码解析

图形初始化：new LGraph()创建数据流程图的逻辑容器
画布绑定：LGraphCanvas将图形绑定到DOM元素，负责渲染和交互
节点操作：
- createNode()：创建指定类型的节点，基础节点定义在src/nodes/base.js
- pos属性：控制节点在画布上的坐标位置
- connect()：建立节点间连接，参数为(输出槽索引, 目标节点, 输入槽索引)

运行与交互

用浏览器打开HTML文件，将看到两个节点和一条连接。可进行以下操作：

拖拽节点：按住节点标题栏移动位置
编辑数值：双击常量节点修改数值
缩放画布：鼠标滚轮缩放视图
平移画布：按住空白处拖动
删除连接：按住连接点拖动到空白处释放

自定义节点开发

创建求和节点

以下示例创建一个两数相加的自定义节点，保存为custom_nodes.js：

// 节点构造函数
function SumNode() {
    // 添加两个输入槽，类型均为number
    this.addInput("A", "number");
    this.addInput("B", "number");
    
    // 添加一个输出槽
    this.addOutput("A+B", "number");
    
    // 自定义属性，用于设置精度
    this.properties = { precision: 2 };
}

// 节点元数据
SumNode.title = "Sum";          // 节点标题
SumNode.desc = "两数相加";       // 节点描述

// 执行逻辑
SumNode.prototype.onExecute = function() {
    // 获取输入值，默认为0
    var a = this.getInputData(0) || 0;
    var b = this.getInputData(1) || 0;
    
    // 计算结果并设置输出
    var result = a + b;
    this.setOutputData(0, Number(result.toFixed(this.properties.precision)));
};

// 注册节点类型
LiteGraph.registerNodeType("math/sum", SumNode);

在项目中使用自定义节点

在HTML中添加引用：

<script src="custom_nodes.js"></script>

现在在节点菜单的"math"分类下会出现"Sum"节点，可与其他节点连接使用。

实际应用案例

LiteGraph.js已被多个项目采用：

ComfyUI：AI图像生成工作流编辑器
WebGLStudio：WebGL场景编辑器
MOI Elephant：3D建模节点系统

这些项目展示了LiteGraph.js在不同领域的灵活性，从简单的数据处理到复杂的3D渲染控制。

进阶学习资源

官方文档：doc/index.html
示例项目：editor/examples/包含音频处理、MIDI生成等演示
API参考：src/litegraph.js中的JSDoc注释

总结与展望

通过本文，你已掌握LiteGraph.js的基础使用和节点开发。下一步可尝试：

扩展自定义节点库，实现业务逻辑
自定义主题样式，匹配项目UI风格
探索子图(Subgraph)功能，构建复杂流程图
结合后端API，实现数据可视化处理

LiteGraph.js为Web应用提供了直观的可视化编程能力，无论是快速原型开发还是复杂工作流设计，都能显著提升效率。

收藏本文，关注更多LiteGraph.js高级技巧！下一篇将介绍如何实现节点数据持久化和撤销/重做功能。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

零基础上手LiteGraph.js：从安装到构建第一个节点流程图的完整指南