可视化工作流引擎——FlowGram 本地部署教程：让百万级节点工作流流畅如丝！

算家计算

于 2025-06-04 17:45:40 发布

阅读量402

点赞数 10

分类专栏：模型构建文章标签：人工智能可视化工作流引擎 FlowGram 模型部署教程算家云镜像社区租算力，到算家云

本文链接：https://blog.csdn.net/SJJS_1/article/details/148431513

版权

模型构建专栏收录该内容

181 篇文章

订阅专栏

一、简介

FlowGram 是一套基于节点编辑的流程搭建引擎，通过自研 Canvas 渲染引擎，可支持 200+ 节点流畅操作（60FPS）。

该引擎可帮助开发者快速创建固定布局或自由连线布局模式的流程，并提供一套交互的最佳实践, 很适合有明确输入和输出的可视化工作流。

交互体验

提供一套交互的最佳实践，让操作流程更加丝滑

Motion 过渡动画	Motion 动画在 Web 端应用可追溯到 Material Design，里边提到元素的变化如宽高或位置需要一个过渡过程，画布引擎会把线条和节点拆分单独绘制，使实现 Motion 过渡动画成本大大降低
触摸板手势缩放 + 空格自由拖动画布	手势指在 Mac 触摸板两指展开/合并可以实现画布放大/缩小，或者按住空格拖动画布，交互借鉴 Sketch、Figma
缩略图
撤销/重做
复制/粘贴(支持快捷键)
框选 + 拖拽(固定)
水平/垂直布局切换(固定)
分支折叠(固定)
分组(固定)
自动整理(自由)
吸附对齐 + 参考线(自由)
Coze Loop 子画布(自由)

二、本地部署流程

环境	版本
Ubtuntu	22.04
Node.js	20.19.1
npm	10.8.2

1.安装 Node.js

网址：Node.js — Download Node.js®

可以进入网址安装自己想要的版本

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 20

# Verify the Node.js version:
node -v # Should print "v20.19.1".
nvm current # Should print "v20.19.1".

# Verify npm version:
npm -v # Should print "10.8.2".

2.安装FlowGram

2.1.克隆仓库

git clone git@github.com:bytedance/flowgram.ai.git

2.2.安装所需全局依赖

#进入项目文件
cd /flowgram.ai
#安装全局依赖
npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0

2.3.安装项目依赖

rush update

2.4.生成项目

rush build

2.5.禁用自动打开浏览器

修改配置文件

路径：/flowgram.ai/apps/demo-free-layout/

rsbuild.config.ts

import { pluginReact } from '@rsbuild/plugin-react';
import { pluginLess } from '@rsbuild/plugin-less';
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  plugins: [pluginReact(), pluginLess()],
  source: {
    entry: {
      index: './src/app.tsx',
    },
    decorators: {
      version: 'legacy',
    },
  },
  html: {
    title: 'demo-free-layout',
  },
  // 新增 server 配置，禁用自动打开浏览器
  server: {
    open: false, // 关键修改：阻止自动调用 xdg-open
  },
});

package.json

将图中的红框中的open的去掉

路径：/flowgram.ai/apps/demo-fixed-layout/

rsbuild.config.ts

import { pluginReact } from '@rsbuild/plugin-react';
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  server: {
    open: false, // 明确禁用自动打开浏览器
  },
  plugins: [pluginReact()],
  source: {
    entry: {
      index: './src/app.tsx',
    },
    decorators: {
      version: 'legacy',
    },
  },
  html: {
    title: 'demo-fixed-layout',
  },
});

package.json

将图中的红框中的open的去掉

2.6.启动

下面是FlowGram的三个启动命令，选取一个使用即可

rush dev:docs # docs #官方文档
rush dev:demo-fixed-layout # 固定布局最佳实践
rush dev:demo-free-layout # 自由布局最佳实践

启动成功截图

在启动日志中有一下信息，代表启动成功

输入网址

输入自己的启动信息输出的端口

 http://localhost:8080

web页面