flowgram.ai

本技能为开发人员提供在 FlowGram.ai 生态系统中构建自定义节点的全面架构。它专为 demo-free-layout 环境而设计，旨在将专业功能整合到可视化的 AI 工作流中。无论您是要构建需要标准输入的简单实用节点，还是需要自定义布局、状态管理和独特用户交互的复杂节点，本指南都概述了必要的结构、注册步骤和最佳实践。

• 通过提供简单节点（基于 JSON Schema 的自动表单）和复杂节点（自定义 React 组件）的模板，简化节点创建过程。

• 标准化节点数据结构，包括 inputsValues、输入 schema 和输出定义，以确保与运行时引擎的兼容性。

• 促进与 FlowGram 核心组件的深度整合，如 PromptEditorWithVariables、VariableSelector 和 JsonCodeEditor。

• 管理 demo-free-layout 架构内的依赖注入和注册，确保节点在画布中可被识别。

• 使用 FlowGram Field 组件管理字段，处理验证、绑定和响应式状态。

• 对于基本的 API 调用或足够使用自动表单的实用操作，请使用简单节点模板。

• 对于高交互性的组件（如高级 HTTP 调试器、数据可视化工具或多步骤配置表单），请使用复杂节点模式。

• 所有节点必须遵守 WorkflowNodeType 常量注册，以保持模块化。

• 利用预留的 SVG/JPG 图标路径，确保节点面板的视觉一致性。

• 务必为输入和输出定义清晰的 JSON schema，以促进画布中互连节点之间的数据流畅传输。

• 遵循单一职责原则：每个自定义节点应代表工作流中一个特定且明确的工作单元。