create-node

# FlowGram Custom Node Development ## 概述 本 SKILL 用于指导在 FlowGram 项目的 `apps/demo-free-layout/src/nodes` 目录下创建新的自定义工作流节点。 ## 核心概念 ### 节点数据结构 节点数据在保存时会存储到后端，基本结构如下： ```typescript { id: 'node_xxxxx', // 节点 ID type: 'node_type', // 节点类型 data: { title: 'Node Title', // 节点标题 inputsValues: { ... }, // 节点表单字段的初始值（实际的值） inputs: { ... }, // 节点表单的 JSON Schema（定义表单结构） outputs: { ... }, // 节点输出的 JSON Schema（工作流执行时的输出） // ... 其他自定义字段 } } ``` ### 三个核心字段 #### 1. `data.inputsValues` - 节点表单字段的初始值 存储表单中各个字段的实际值，每个��段值包含 `type` 和 `content` 两个属性： ```typescript inputsValues: { url: { type: 'constant', // 常量类型 content: 'https://...', // 实际的值 }, prompt: { type: 'template', // 模板类型（支持变量引用） content: 'Hello {var}', // 可以引用变量 }, } ``` **`type` 的可选值**： - `'constant'`：常量值，不支持变量引用 - `'template'`：模板值，支持 `{variableName}` 语法引用变量 - `'variable'`：变量引用 #### 2. `data.inputs` - 节点表单的 JSON Schema 使用 JSON Schema 定义表单的结构，系统会根据这个 Schema 自动生成表单界面： ```typescript inputs: { type: 'object', required: ['url'], // 必填字段 properties: { url: { type: 'string', }, timeout: { type: 'number', minimum: 0, maximum: 60000, }, prompt: { type: 'string', extra: { formComponent: 'prompt-editor', // 指定自定义组件 }, }, }, } ``` #### 3. `data.outputs` - 节点输出的 JSON Schema 定义节点在工作流执行时的输出数据结构，供下游节点使用： ```typescript outputs: { ...