Litegraph.js 使用教程

2026-01-16 09:41:27作者：宣聪麟

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

项目介绍

Litegraph.js 是一个用于在网页上创建模块化图形的库，类似于 PureData。这些图形可以用于创建工作流、图像处理、音频处理或任何类型的模块交互网络。主要特性包括：

自动根据基本规则对模块进行排序
动态数量的输入/输出端口
图形的持久化，可以序列化为 JSON
在 HTML5 Canvas 上的优化渲染（支持屏幕上显示数百个模块）
允许在没有 Canvas 的情况下运行图形（独立模式）
简单的 API，易于创建新模块
编辑和实时模式（在实时模式下，只有带有小部件的模块被渲染）
编辑器中的上下文菜单

项目快速启动

要快速启动 Litegraph.js，首先需要安装库。可以通过 npm 安装，或者直接下载构建版本。

安装

npm install litegraph.js

基本示例

以下是一个简单的 HTML 示例，展示如何创建和运行一个基本的图形。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="litegraph.css">
    <script type="text/javascript" src="litegraph.js"></script>
</head>
<body style='width:100%; height:100%;'>
    <canvas id='mycanvas' width='1024' height='720' style='border: 1px solid'></canvas>
    <script>
        var graph = new LGraph();
        var canvas = new LGraphCanvas("#mycanvas", graph);

        var node_const = LiteGraph.createNode("basic/const");
        node_const.pos = [200, 200];
        graph.add(node_const);
        node_const.setValue(4.5);

        var node_watch = LiteGraph.createNode("basic/watch");
        node_watch.pos = [700, 200];
        graph.add(node_watch);

        node_const.connect(0, node_watch, 0);
        graph.start();
    </script>
</body>
</html>