3个步骤掌握FlowGram.AI：从入门到实战的工作流开发指南

2026-05-05 10:48:09作者：伍希望

FlowGram is an extensible workflow development framework with built-in canvas, form, variable, and materials that helps developers build AI workflow platforms faster and simpler.

项目地址：https://gitcode.com/gh_mirrors/fl/flowgram.ai

FlowGram.AI是一款功能强大的工作流开发框架，专为可视化流程设计打造。无论你是初学者还是有经验的开发者，本指南将带你通过三个关键步骤，从基础认知到核心能力再到实战落地，全面掌握FlowGram.AI的使用方法，轻松构建专业的可视化工作流系统。

如何快速搭建FlowGram.AI开发环境

让我们从最基础的环境搭建开始，这是探索FlowGram.AI世界的第一步。就像烹饪需要准备好食材和厨具，开发FlowGram.AI项目也需要先搭建好合适的开发环境。

首先，请确保你的系统中安装了Node.js 18或更高版本。打开终端，执行以下命令创建一个新的FlowGram项目：

npx @flowgram.ai/create-app@latest

执行命令后，系统会提示你选择项目模板。这里我们推荐选择"Free Layout Demo"模板，它包含了最完整的功能展示，非常适合初学者学习。

项目创建完成后，进入项目目录并安装依赖：

cd demo-free-layout
npm install

最后，启动开发服务器：

npm start

在浏览器中打开 http://localhost:3000，你就能看到FlowGram的完整界面了。

专家提示：如果启动过程中遇到依赖冲突，可以尝试删除node_modules文件夹和package-lock.json文件，然后重新执行npm install命令。

快速检查清单

✓ 已安装Node.js 18+版本
✓ 成功创建FlowGram项目
✓ 能够启动开发服务器并访问界面

核心布局模式实现指南

FlowGram.AI提供了两种核心布局模式，它们就像两种不同的画布，适用于不同类型的创作需求。让我们深入了解这两种模式的特点和应用场景。

自由布局模式

自由布局模式就像一张无限延伸的画布，你可以在上面随心所欲地摆放和连接节点。这种模式非常适合创意性、探索性的工作流设计。

在自由布局中，你可以：

随意拖拽节点到任意位置
创建自定义连线路径
实现复杂的多分支流程

下面是一个简单的自由布局工作流示例代码：

// 创建自由布局画布
const canvas = new FlowCanvas({
  mode: 'free',
  container: document.getElementById('canvas-container'),
  width: 1200,
  height: 800
});

// 添加节点
const node1 = canvas.addNode({
  type: 'llm',
  position: { x: 100, y: 100 },
  data: { prompt: 'Hello, FlowGram!' }
});

const node2 = canvas.addNode({
  type: 'output',
  position: { x: 300, y: 100 }
});

// 连接节点
canvas.connectNodes(node1, node2);

固定布局模式

固定布局模式采用垂直排列方式，节点按照执行顺序从上到下排列，就像一条生产线，每个节点完成特定的任务后将结果传递给下一个节点。这种模式特别适合需要严格顺序的业务流程。

固定布局的主要特点：

节点在网格上精准对齐
支持复合节点嵌套管理
自动维护流程执行顺序

// 创建固定布局画布
const canvas = new FlowCanvas({
  mode: 'fixed',
  container: document.getElementById('canvas-container'),
  width: 800,
  height: 600
});

// 添加顺序节点
canvas.addNode({
  type: 'start',
  position: { x: 100, y: 50 }
});

canvas.addNode({
  type: 'llm',
  position: { x: 100, y: 150 },
  data: { prompt: 'Hello, FlowGram!' }
});

canvas.addNode({
  type: 'end',
  position: { x: 100, y: 250 }
});

避坑指南

不要在一个项目中混合使用两种布局模式
自由布局中注意节点位置不要重叠过多
固定布局中保持节点间距一致以确保美观

快速检查清单

✓ 理解两种布局模式的区别
✓ 能够创建简单的自由布局工作流
✓ 能够创建简单的固定布局工作流

如何构建一个天气推荐工作流

现在让我们通过一个实际案例来巩固所学知识。我们将构建一个天气推荐工作流，它能够根据天气情况为用户提供穿搭建议。

问题分析

我们需要创建一个工作流，它能够：

获取用户所在城市
查询该城市的实时天气数据
根据温度和天气状况生成穿搭建议
将结果展示给用户

解决方案

我们可以通过以下步骤实现这个工作流：

添加一个"输入"节点，用于获取用户所在城市
添加一个"HTTP请求"节点，调用天气API获取数据
添加一个"代码"节点，解析天气数据
添加一个"LLM"节点，根据天气数据生成穿搭建议
添加一个"输出"节点，展示结果给用户

实现代码

// 创建画布
const canvas = new FlowCanvas({
  mode: 'fixed',
  container: document.getElementById('canvas-container')
});

// 添加节点
const inputNode = canvas.addNode({
  type: 'input',
  position: { x: 100, y: 50 },
  data: { 
    fields: [{ name: 'city', label: '城市', type: 'text' }]
  }
});

const httpNode = canvas.addNode({
  type: 'http',
  position: { x: 100, y: 150 },
  data: {
    url: 'https://api.weather.com/weather',
    method: 'GET',
    params: [{ name: 'city', value: '{{input.city}}' }]
  }
});

const codeNode = canvas.addNode({
  type: 'code',
  position: { x: 100, y: 250 },
  data: {
    code: `
      const { temperature, condition } = input;
      return { 
        temperature, 
        condition,
        isHot: temperature > 25,
        isCold: temperature < 10
      };
    `
  }
});

const llmNode = canvas.addNode({
  type: 'llm',
  position: { x: 100, y: 350 },
  data: {
    prompt: `根据天气情况推荐穿搭:
      温度: {{code.temperature}}°C
      天气: {{code.condition}}
      
      如果温度>25°C，推荐轻薄衣物
      如果温度<10°C，推荐厚重衣物
      其他情况，推荐适中衣物
    `
  }
});

const outputNode = canvas.addNode({
  type: 'output',
  position: { x: 100, y: 450 },
  data: {
    template: `
      <div>
        <h3>今日穿搭建议</h3>
        <p>{{llm.result}}</p>
      </div>
    `
  }
});

// 连接节点
canvas.connectNodes(inputNode, httpNode);
canvas.connectNodes(httpNode, codeNode);
canvas.connectNodes(codeNode, llmNode);
canvas.connectNodes(llmNode, outputNode);