FlowGram.AI

https://flowgram.ai/
Admin
FlowGram.AI is a visual editor framework for building flow diagrams and workflow editors with...
Tokens:429,834
Snippets:2,646
Trust Score:6.4
Update:5 months ago
Show doc for...
Tokens:
Raw
### Start Node Configuration Example

Source: https://flowgram.ai/guide/runtime/node

Example of a Start node configuration, defining the workflow's input data structure using JSONSchema.

```json
{
  "id": "start_0",
  "type": "start",
  "data": {
    "title": "开始节点",
    "outputs": {
      "type": "object",
      "properties": {
        "prompt": {
          "type": "string",
          "description": "用户输入的提示词"
        }
      },
      "required": ["prompt"]
    }
  }
}
```

--------------------------------

### Basic Editor Setup

Source: https://flowgram.ai/guide/getting-started/fixed-layout.html

Set up the editor context using `FixedLayoutEditorProvider` and render the canvas with `EditorRenderer`. This example includes default Semi components.

```javascript
const FlowGramApp = () => (
  <FixedLayoutEditorProvider
    materials={{ components: defaultFixedSemiMaterials }}
  >
    <EditorRenderer />
  </FixedLayoutEditorProvider>
);
```

--------------------------------

### Complete Editor Setup with Custom Node Registration

Source: https://flowgram.ai/guide/getting-started/free-layout.html

This comprehensive example shows the full setup of the FlowGram editor, including importing styles and components, defining a custom node renderer, registering it, and providing initial data for nodes and edges.

```jsx
import '@flowgram.ai/free-layout-editor/index.css';

import {
  FreeLayoutEditorProvider,
  EditorRenderer,
  useNodeRender,
  WorkflowNodeProps,
  WorkflowNodeRenderer,
} from '@flowgram.ai/free-layout-editor';

const NodeRender = (props: WorkflowNodeProps) => {
  const { form, selected } = useNodeRender();
  return (
    <WorkflowNodeRenderer
      style={{
        width: 280,
        minHeight: 88,
        height: 'auto',
        background: '#fff',
        border: '1px solid rgba(6, 7, 9, 0.15)',
        borderColor: selected ? '#4e40e5' : 'rgba(6, 7, 9, 0.15)',
        borderRadius: 8,
        boxShadow: '0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.02)',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        position: 'relative',
        padding: 12,
        cursor: 'move',
      }}
      node={props.node}
    >
      {form?.render()}
    </WorkflowNodeRenderer>
  );
};

const FlowGramApp = () => (
  <FreeLayoutEditorProvider
    materials={{
      renderDefaultNode: NodeRender,
    }}
    nodeRegistries={[
      {
        type: 'custom',
      },
    ]}
    initialData={{
      nodes: [
        {
          id: '1',
          type: 'custom',
          meta: {
            position: { x: 250, y: 100 },
          },
        },
      ],
      edges: [],
    }}
  >
    <EditorRenderer />
  </FreeLayoutEditorProvider>
);

export default FlowGramApp;
```

--------------------------------

### Install styled-components with bun

Source: https://flowgram.ai/guide/getting-started/free-layout.html

Install the styled-components library using bun if it's not already installed.

```bash
bun add styled-components
```

--------------------------------

### LLM Node Configuration Example

Source: https://flowgram.ai/guide/runtime/node

Example of an LLM node configuration, specifying model details, API credentials, and prompts. The user prompt is referenced from the Start node's input.

```json
{
  "id": "llm_0",
  "type": "llm",
  "data": {
    "title": "LLM节点",
    "inputsValues": {
      "modelName": {
        "type": "constant",
        "content": "gpt-3.5-turbo"
      },
      "apiKey": {
        "type": "constant",
        "content": "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      },
      "apiHost": {
        "type": "constant",
        "content": "https://api.openai.com/v1"
      },
      "temperature": {
        "type": "constant",
        "content": 0.7
      },
      "systemPrompt": {
        "type": "constant",
        "content": "你是一个有帮助的助手。"
      },
      "prompt": {
        "type": "ref",
        "content": ["start_0", "prompt"]
      }
    },
    "inputs": {
      "type": "object",
      "required": ["modelName", "apiKey", "apiHost", "temperature", "prompt"],
      "properties": {
        "modelName": { "type": "string" },
        "apiKey": { "type": "string" },
        "apiHost": { "type": "string" },
        "temperature": { "type": "number" },
        "systemPrompt": { "type": "string" },
        "prompt": { "type": "string" }
      }
    },
    "outputs": {
      "type": "object",
      "properties": {
        "result": { "type": "string" }
      }
    }
  }
}
```

--------------------------------

### Full Editor Initialization with Imports

Source: https://flowgram.ai/guide/getting-started/free-layout.html

A complete example demonstrating the import of editor styles and components, along with the provider and renderer setup for the FlowGram application.

```jsx
import '@flowgram.ai/free-layout-editor/index.css';
import { FreeLayoutEditorProvider, EditorRenderer } from '@flowgram.ai/free-layout-editor';
  

const FlowGramApp = () => (
<FreeLayoutEditorProvider>
<EditorRenderer />
</FreeLayoutEditorProvider>
);
  
export default FlowGramApp;
```

--------------------------------

### Unity MonoBehaviour Example

Source: https://flowgram.ai/guide/concepts/canvas-engine

A basic example of a MonoBehaviour script in Unity, demonstrating common lifecycle methods like Awake, Start, and Update.

```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class MyMonoBehavior : MonoBehaviour
{
    void Awake()
    {
        Debug.Log("Awake method is always called before application starts.");
    }
    void Start()
    {
        Debug.Log("Start method is always called after Awake().");
    }
    void Update()
    {
        Debug.Log("Update method is called in every frame.");
    }
}
```

--------------------------------

### Install styled-components with npm

Source: https://flowgram.ai/guide/getting-started/free-layout.html

Install the styled-components library using npm if it's not already installed.

```bash
npm install styled-components
```

--------------------------------

### Install styled-components with pnpm

Source: https://flowgram.ai/guide/getting-started/free-layout.html

Install the styled-components library using pnpm if it's not already installed.

```bash
pnpm add styled-components
```

--------------------------------

### Basic Usage Example

Source: https://flowgram.ai/materials/components/condition-context

Example demonstrating the basic usage of ConditionProvider, ConditionRow, and DBConditionRow.

```APIDOC
## Basic Usage

### Description

Demonstrates the basic setup and usage of the ConditionContext components.

### Code Example

```typescript
import React from 'react';
import { Field } from '@flowgram.ai/free-layout-editor';
import {
  ConditionProvider,
  ConditionRow,
  DBConditionRow,
  type ConditionOpConfigs,
  type IConditionRule
} from '@flowgram.ai/form-materials';

const OPS: ConditionOpConfigs = {
  cop: {
    abbreviation: 'C',
    label: 'Custom Operator',
  },
};

const RULES: Record<string, IConditionRule> = {
  string: {
    cop: { type: 'string' },
  },
};

const formMeta = {
  render: () => (
    <>
      <FormHeader />
      <ConditionProvider ops={OPS} rules={RULES}>
        <Field<any | undefined> name="condition_row">
          {({ field }) => (
            <ConditionRow value={field.value} onChange={(value) => field.onChange(value)} />
          )}
        </Field>
        <Field<any | undefined> name="db_condition_row">
          {({ field }) => (
            <DBConditionRow
              options={[
                {
                  label: 'UserName',
                  value: 'username',
                  schema: { type: 'string' },
                },
              ]}
              value={field.value}
              onChange={(value) => field.onChange(value)}
            />
          )}
        </Field>
      </ConditionProvider>
    </>
  ),
};
```
```

--------------------------------

### Start Node.js Server

Source: https://flowgram.ai/guide/runtime/quick-start

Navigate to the runtime directory and start the Node.js server using npm run dev.

```bash
cd packages/runtime/nodejs
npm run dev
```

--------------------------------

### Build and Start Production Server

Source: https://flowgram.ai/guide/runtime/quick-start

Build the project for production and then start the Node.js server using the compiled output.

```bash
cd packages/runtime/nodejs
npm run build
node dist/index.js
```

--------------------------------

### Install Project Dependencies

Source: https://flowgram.ai/guide/contributing

Installs all project dependencies using Rush.

```bash
rush install
```

--------------------------------

### Install Node.js Version Manager

Source: https://flowgram.ai/guide/runtime/quick-start

Install and set the recommended Node.js LTS version using nvm.

```bash
nvm install lts/hydrogen
nvm alias default lts/hydrogen # set default node version
nvm use lts/hydrogen
```

--------------------------------

### Install styled-components with yarn

Source: https://flowgram.ai/guide/getting-started/free-layout.html

Install the styled-components library using yarn if it's not already installed.

```bash
yarn add styled-components
```

--------------------------------

### Install Free Auto Layout Plugin

Source: https://flowgram.ai/guide/plugin/free-auto-layout-plugin.html

Install the plugin using npm, yarn, pnpm, bun, or deno.

```bash
npm install @flowgram.ai/free-auto-layout-plugin
```

```bash
yarn add @flowgram.ai/free-auto-layout-plugin
```

```bash
pnpm add @flowgram.ai/free-auto-layout-plugin
```

```bash
bun add @flowgram.ai/free-auto-layout-plugin
```

```bash
deno add npm:@flowgram.ai/free-auto-layout-plugin
```

--------------------------------

### Install Free Stack Plugin with Deno

Source: https://flowgram.ai/guide/plugin/free-stack-plugin.html

Install the free stack plugin using Deno. Deno can install npm packages directly.

```bash
deno add npm:@flowgram.ai/free-stack-plugin
```

--------------------------------

### Install Form Materials with bun

Source: https://flowgram.ai/materials/introduction

Install the official form materials package using bun for use in your project.

```bash
bun add @flowgram.ai/form-materials
```

--------------------------------

### Install Project Dependencies

Source: https://flowgram.ai/guide/getting-started/quick-start.html

Install all necessary project dependencies using your preferred package manager.

```bash
npm install
```

```bash
pnpm install
```

```bash
yarn install
```

```bash
bun install
```

--------------------------------

### Install Free Snap and Minimap Plugins

Source: https://flowgram.ai/guide/getting-started/free-layout.html

Install the necessary dependencies for the free-snap and minimap plugins using npm, pnpm, yarn, or bun.

```bash
npm install @flowgram.ai/free-snap-plugin @flowgram.ai/minimap-plugin
```

```bash
pnpm add @flowgram.ai/free-snap-plugin @flowgram.ai/minimap-plugin
```

```bash
yarn add @flowgram.ai/free-snap-plugin @flowgram.ai/minimap-plugin
```

```bash
bun add @flowgram.ai/free-snap-plugin @flowgram.ai/minimap-plugin
```

--------------------------------

### Export Plugin Installation

Source: https://flowgram.ai/guide/plugin/export-plugin.html

Instructions for installing the export plugin using various package managers.

```APIDOC
## Installation

### npm
```
npm install @flowgram.ai/export-plugin
```

### yarn
```
yarn add @flowgram.ai/export-plugin
```

### pnpm
```
pnpm add @flowgram.ai/export-plugin
```

### bun
```
bun add @flowgram.ai/export-plugin
```

### deno
```
deno add npm:@flowgram.ai/export-plugin
```
```

--------------------------------

### Install Minimap Plugin

Source: https://flowgram.ai/guide/plugin/minimap-plugin.html

Install the @flowgram.ai/minimap-plugin using npm.

```bash
npm install @flowgram.ai/minimap-plugin
```

--------------------------------

### Install Form Materials with deno

Source: https://flowgram.ai/materials/introduction

Install the official form materials package using deno for use in your project.

```bash
deno add npm:@flowgram.ai/form-materials
```

--------------------------------

### ReduxStore Data Management Example

Source: https://flowgram.ai/guide/concepts/ecs

Illustrates a basic ReduxStore setup for managing nodes and edges in a canvas. Suitable for simpler applications where centralized data management is preferred, but may lead to performance bottlenecks with complex updates.

```javascript
const store = () => ({
  nodes: [{
    position: any
    form: any
    data3: any

  }],
  edges: []
})

function Playground() {
  const { nodes } = useStore(store)

  return nodes.map(node => <Node data={node} />)
}
```

--------------------------------

### Install Free Stack Plugin with Yarn

Source: https://flowgram.ai/guide/plugin/free-stack-plugin.html

Install the free stack plugin using Yarn. This is an alternative package manager for installation.

```bash
yarn add @flowgram.ai/free-stack-plugin
```

--------------------------------

### Install Export Plugin

Source: https://flowgram.ai/guide/plugin/export-plugin.html

Install the export plugin using npm. This is the first step to enable export functionality.

```bash
npm install @flowgram.ai/export-plugin
```

--------------------------------

### Basic Usage Example

Source: https://flowgram.ai/materials/components/inputs-values-tree

A basic example demonstrating how to integrate and use the InputsValuesTree component within a form.

```APIDOC
## Basic Usage Example

This example shows a simple implementation of the `InputsValuesTree` component within a React form.

```typescript
import { InputsValuesTree } from '@flowgram.ai/form-materials';
import { Field, FormHeader } from '@flowgram.ai/form-materials'; // Assuming these are available
import React from 'react';

const formMeta = {
  render: () => (
    <>
      <FormHeader />
      <Field<Record<string, any> | undefined>
        name="inputs_values"
        defaultValue={{
          a: {
            b: {
              type: 'ref',
              content: ['start_0', 'str'],
            },
            c: {
              type: 'constant',
              content: 'hello',
            },
          },
          d: {
            type: 'constant',
            content: '{ "a": "b"}',
            schema: { type: 'object' },
          },
        }}
      >
        {({ field }) => (
          <InputsValuesTree value={field.value} onChange={(value) => field.onChange(value)} />
        )}
      </Field>
    </>
  ),
};

export default formMeta;
```

```

--------------------------------

### Install Free Layout Editor with bun

Source: https://flowgram.ai/guide/getting-started/free-layout.html

Install the FlowGram.AI free layout editor package using bun.

```bash
bun add @flowgram.ai/free-layout-editor
```

--------------------------------

### Install Export Plugin with Yarn, pnpm, bun, or Deno

Source: https://flowgram.ai/guide/plugin/export-plugin.html

Alternative installation methods for the export plugin using different package managers.

```bash
yarn add @flowgram.ai/export-plugin
```

```bash
pnpm add @flowgram.ai/export-plugin
```

```bash
bun add @flowgram.ai/export-plugin
```

```bash
deno add npm:@flowgram.ai/export-plugin
```

--------------------------------

### Basic Usage Example

Source: https://flowgram.ai/materials/components/display-inputs-values

Demonstrates how to integrate the DisplayInputsValues component into your form using the provided example.

```APIDOC
## Basic Usage Example

This example shows how to use `DisplayInputsValues` alongside `InputsValuesTree` in a form.

### Code Example

```typescript
import { InputsValuesTree, DisplayInputsValues } from '@flowgram.ai/form-materials';

const formMeta = {
  render: () => (
    <>
      <Field<Record<string, any> | undefined> name="inputs_values">
        {({ field }) => (
          <InputsValuesTree value={field.value} onChange={(value) => field.onChange(value)} />
        )}
      </Field>
      <Field<Record<string, any> | undefined> name="inputs_values">
        {({ field }) => <DisplayInputsValues value={field.value} />}
      </Field>
    </>
  ),
}
```

### Visual Representation

```
Start -
str
Start -
arr_str
Start -
obj
Add
  

a
d
e
Start
Add
Debug
```
```

--------------------------------

### Install FlowGram.AI CLI

Source: https://flowgram.ai/materials/cli

Use npx to run the FlowGram.AI CLI tool directly. No global installation is required.

```bash
npx @flowgram.ai/cli@latest [command]
```

--------------------------------

### Install Form Materials with yarn

Source: https://flowgram.ai/materials/introduction

Install the official form materials package using yarn for use in your project.

```bash
yarn add @flowgram.ai/form-materials
```

--------------------------------

### Using useVariableTree Example

Source: https://flowgram.ai/materials/components/variable-selector

Example of fetching and displaying the variable tree using the `useVariableTree` hook.

```APIDOC
## Using useVariableTree Example

### Description
This example demonstrates how to use the `useVariableTree` hook to fetch variable tree data and render it using a `Tree` component, along with custom filtering via `VariableSelectorProvider`.

### Code
```typescript
import { useVariableTree } from '@flowgram.ai/form-materials';

const formMeta = {
  render: () => {
    const treeData = useVariableTree({});

    return (
      <VariableSelectorProvider skipVariable={(variable) => variable?.key === 'str'}>
        <FormHeader />
        <Tree treeData={treeData} defaultExpandAll />
      </VariableSelectorProvider>
    );
  },
}
```

### Tip
The `useVariableTree` hook is also utilized by components like `PromptEditorWithVariables`, `SQLEditorWithVariables`, and `JsonEditorWithVariables` to obtain the current scope's variable tree.
```

--------------------------------

### Install Fixed Layout Editor Dependencies (bun)

Source: https://flowgram.ai/guide/getting-started/fixed-layout.html

Install the necessary packages for the fixed layout editor using bun.

```bash
bun add @flowgram.ai/fixed-layout-editor @flowgram.ai/fixed-semi-materials
```

--------------------------------

### Install Form Materials with npm

Source: https://flowgram.ai/materials/introduction

Install the official form materials package using npm for use in your project.

```bash
npm install @flowgram.ai/form-materials
```

--------------------------------

### Install Form Materials with pnpm

Source: https://flowgram.ai/materials/introduction

Install the official form materials package using pnpm for use in your project.

```bash
pnpm add @flowgram.ai/form-materials
```

--------------------------------

### Install Panel Manager Plugin with deno

Source: https://flowgram.ai/guide/plugin/panel-manager-plugin.html

Install the panel manager plugin using deno. This command adds the package from npm.

```bash
deno add npm:@flowgram.ai/panel-manager-plugin
```

--------------------------------

### Install Node.js LTS Version

Source: https://flowgram.ai/guide/contributing

Installs and sets the default Node.js version to the LTS Hydrogen release using nvm.

```bash
nvm install lts/hydrogen
nvm alias default lts/hydrogen # 设为默认 Node 版本
nvm use lts/hydrogen
```

--------------------------------

### Run Documentation and Demos

Source: https://flowgram.ai/guide/contributing

Starts the documentation site or specific demo applications.

```bash
rush dev:docs                  # 在 apps/docs 启动文档站（含增量构建）
rush dev:demo-fixed-layout     # 运行固定布居示例
rush dev:demo-free-layout      # 运行自由布居示例
```

--------------------------------

### Get Node Service

Source: https://flowgram.ai/api/core/flow-node-entity

Accesses IOC services provided to the node. For example, to get the SelectionService.

```typescript
node.getService(SelectionService)
```

--------------------------------

### Retrieving Type Definitions

Source: https://flowgram.ai/materials/common/json-schema-preset

Examples of how to get type definitions using the `useTypeManager` hook.

```APIDOC
## Retrieving Type Definitions

### Description

This section provides examples of how to retrieve type definitions using the `useTypeManager` hook, which is part of the FlowGram.AI type management system.

### Code Examples

```typescript
// Assuming useTypeManager is imported and available in your component context
const typeManager = useTypeManager();

// Get type definition by schema
const typeBySchema = typeManager.getTypeBySchema({ type: "color" });
const arrayColorType = typeManager.getTypeBySchema({ type: "array", items: { type: "color" } });

// Get type definition by type name
const colorTypeByName = typeManager.getTypeByName("color");
```

### Notes

- `getTypeBySchema` allows retrieval based on a JSON schema object.
- `getTypeByName` retrieves definitions using the registered type name.
```

--------------------------------

### Navigate to Project Directory

Source: https://flowgram.ai/guide/getting-started/quick-start.html

Change into the newly created project directory. Replace `[project-name]` with your actual project directory name.

```bash
cd [project-name]
```

--------------------------------

### Workflow Definition Example

Source: https://flowgram.ai/guide/runtime/introduction

This JSON defines a simple workflow with start, LLM, and end nodes, illustrating the structure of nodes and edges.

```json
{
  "nodes": [
    { "id": "start", "type": "Start", "meta": {}, "data": {} },
    { "id": "llm", "type": "LLM", "meta": {}, "data": { "systemPrompt": "你是助手", "userPrompt": "{{start.input}}" } },
    { "id": "end", "type": "End", "meta": {}, "data": {} }
  ],
  "edges": [
    { "sourceNodeID": "start", "targetNodeID": "llm" },
    { "sourceNodeID": "llm", "targetNodeID": "end" }
  ]
}
```

--------------------------------

### Start Development Server

Source: https://flowgram.ai/guide/getting-started/quick-start.html

Launch the development server to view and work on your FlowGram.AI application.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
bun dev
```

--------------------------------

### Install Free Layout App

Source: https://flowgram.ai/examples/free-layout/free-layout-simple

Use npx to create a new app with the free-layout-simple template.

```bash
npx @flowgram.ai/create-app@latest free-layout-simple
```

--------------------------------

### Register Custom Arrow Renderer

Source: https://flowgram.ai/api/core/workflow-lines-manager

Example of registering a custom arrow component in the renderer registry. Refer to the Line Configuration Guide for detailed usage.

```javascript
// Simple example: register custom arrow
const editorProps = {
  materials: {
    components: {
      'arrow-renderer': MyCustomArrow,
    },
  },
};

```

--------------------------------

### Poll for Task Completion and Get Results

Source: https://flowgram.ai/guide/runtime/api

Example function to poll for a task's termination status using TaskReportAPI and then retrieve its results with TaskResultAPI. Includes timeout functionality.

```typescript
// 使用示例：等待任务完成并获取结果
async function waitForResult(taskID, pollingInterval = 1000, timeout = 60000) {
  const startTime = Date.now();

  while (Date.now() - startTime < timeout) {
    // 获取任务报告
    const report = await TaskReportAPI({ taskID });

    // 如果任务已终止，获取结果
    if (report && report.workflow.terminated) {
      return await TaskResultAPI({ taskID });
    }

    // 等待一段时间后再次检查
    await new Promise(resolve => setTimeout(resolve, pollingInterval));
  }

  throw new Error('等待任务结果超时');
}
```

--------------------------------

### Get Node Data (Component)

Source: https://flowgram.ai/api/core/flow-node-entity

Retrieves component data for a node, similar to fetching an Entity's Component in ECS architecture. Examples include transform and render data.

```typescript
node.getData(FlowNodeTransformData) // transform 矩阵数据, 包含节点的 x，y，width，height 等信息
```

```typescript
node.getData(FlowNodeRenderData) // 节点的渲染数据, 包含渲染状态等数据
```

```typescript
node.lines // 自由布局的线条数据
```

--------------------------------

### Get Node Form Value and Render

Source: https://flowgram.ai/api/utils/get-node-form

Demonstrates how to retrieve a node's form using `getNodeForm` and render it. Requires enabling the Node Engine. The second example shows usage with the `useNodeRender` hook.

```javascript
function BaseNode({ node }) {
  const form = getNodeForm(node);
  console.log(form.getValueIn('title'))
  return <div>{form?.render()}</div>
}
```

```javascript
function BaseNode() {
  const { form } = useNodeRender();
  console.log(form.getValueIn('title'))
  return <div>{form?.render()}</div>
}
```

--------------------------------

### Basic Usage Example

Source: https://flowgram.ai/materials/components/blur-input

Demonstrates the basic usage of the BlurInput component with initial text and shows how the value updates after the input loses focus.

```APIDOC
## Basic Usage of BlurInput

### Description
This example shows how to use the BlurInput component with a default value. The displayed value updates only after the user clicks outside the input field.

### Request Example
```typescript
const formMeta = {
  render: () => (
    <>
      <FormHeader />
      <Field<string> name="blur_input" defaultValue="Initial text">
        {({ field }) => (
          <>
            <BlurInput
              value={field.value}
              onChange={(value) => field.onChange(value)}
              placeholder="Please enter text"
            />
            <p className="mt-2">Current value: {field.value}</p>
            <p className="text-sm text-gray-500">
              Note: Value updates after clicking outside the input
            </p>
          </>
        )}
      </Field>
    </>
  )
}
```

### Response Example
```json
{
  "current_value": "Updated text after blur"
}
```
```

--------------------------------

### Basic Usage Example

Source: https://flowgram.ai/materials/components/display-schema-tag

Demonstrates the basic implementation of the DisplaySchemaTag component.

```APIDOC
## Basic Usage Example

This example shows how to use the `DisplaySchemaTag` component with a sample JSON Schema.

### Code Example

```jsx
import { DisplaySchemaTag } from '@flowgram.ai/form-materials';

const formMeta = {
  render: () => (
    <>
      <DisplaySchemaTag
        title="Transaction"
        value={{
          type: 'object',
          properties: {
            transaction_id: { type: 'integer' },
            amount: { type: 'number' },
            description: { type: 'string' },
            archived: { type: 'boolean' },
            owner: {
              type: 'object',
              properties: {
                id: { type: 'integer' },
                username: { type: 'string' },
                friends: {
                  type: 'array',
                  items: {
                    type: 'object',
                    properties: {
                      id: { type: 'integer' },
                      username: { type: 'string' },
                    },
                  },
                },
              },
            },
          },
        }}
      />
    </>
  ),
}
```
```

--------------------------------

### Install Panel Manager Plugin with yarn

Source: https://flowgram.ai/guide/plugin/panel-manager-plugin.html

Install the panel manager plugin using yarn. This is an alternative package manager for installation.

```bash
yarn add @flowgram.ai/panel-manager-plugin
```

--------------------------------

### Install Free Stack Plugin with pnpm

Source: https://flowgram.ai/guide/plugin/free-stack-plugin.html

Install the free stack plugin using pnpm. This is another package manager option for installation.

```bash
pnpm add @flowgram.ai/free-stack-plugin
```

--------------------------------

### Install Panel Manager Plugin with pnpm

Source: https://flowgram.ai/guide/plugin/panel-manager-plugin.html

Install the panel manager plugin using pnpm. This is another alternative package manager for installation.

```bash
pnpm add @flowgram.ai/panel-manager-plugin
```

--------------------------------

### Example: Editor Background Configuration

Source: https://flowgram.ai/guide/plugin/background-plugin.html

Integrate background configuration directly into editor properties. This example shows a dark theme with a logo featuring neumorphism effects.

```javascript
// 在编辑器配置中直接使用 background 属性
const editorProps = {
  // 背景配置
  background: {
    // 深色主题背景
    backgroundColor: '#1a1a1a',
    dotColor: '#ffffff',
    dotSize: 1,
    gridSize: 20,
    dotOpacity: 0.3,

    // 品牌Logo
    logo: {
      text: 'FLOWGRAM.AI',
      position: 'center',
      size: 200,
      opacity: 0.25,
      color: '#ffffff',
      fontFamily: 'Arial, sans-serif',
      fontWeight: 'bold',

      // 新拟态效果
      neumorphism: {
        enabled: true,
        textColor: '#E0E0E0',
        lightShadowColor: 'rgba(255,255,255,0.9)',
        darkShadowColor: 'rgba(0,0,0,0.15)',
        shadowOffset: 6,
        shadowBlur: 12,
        intensity: 0.6,
        raised: true
      }
    }
  }
}
```

--------------------------------

### Indent Guides Function

Source: https://flowgram.ai/auto-docs/coze-editor/functions/indentGuides

Retrieves a list of indent guides.

```APIDOC
## indentGuides()

### Description
Retrieves a list of indent guides.

### Method
N/A (This appears to be a function call within a library, not a REST API endpoint)

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
indentGuides()
```

### Response
#### Success Response
- **extensions** (Extension[]) - A list of extension objects representing indent guides.

#### Response Example
```json
[
  {
    "id": "guide1",
    "name": "Guide One",
    "type": "indent"
  },
  {
    "id": "guide2",
    "name": "Guide Two",
    "type": "indent"
  }
]
```
```

--------------------------------

### Install Free Stack Plugin with Bun

Source: https://flowgram.ai/guide/plugin/free-stack-plugin.html

Install the free stack plugin using Bun. Bun is a fast JavaScript runtime and package manager.

```bash
bun add @flowgram.ai/free-stack-plugin
```

--------------------------------

### Install Global Dependencies

Source: https://flowgram.ai/guide/contributing

Installs the global versions of pnpm and Rush package manager.

```bash
npm i -g pnpm@10.6.5 @microsoft/rush@5.150.0
```

--------------------------------

### Custom Filtering Logic Example

Source: https://flowgram.ai/materials/components/variable-selector

Example of using `VariableSelectorProvider` with `skipVariable` for custom filtering.

```APIDOC
## Custom Filtering Logic Example

### Description
This example shows how to use `VariableSelectorProvider` to apply a custom filtering logic, specifically skipping variables with the key 'str'.

### Code
```typescript
import { VariableSelector } from '@flowgram.ai/form-materials';

const formMeta = {
  render: () => (
    <VariableSelectorProvider skipVariable={(variable) => variable?.key === 'str'}>
      <FormHeader />
      <Field<string[] | undefined> name="variable_selector">
        {({ field }) => (
          <VariableSelector
            value={field.value}
            onChange={(value) => field.onChange(value)}
          />
        )}
      </Field>
    </VariableSelectorProvider>
  ),
}
```
```

--------------------------------

### Filtering Variable Types Example

Source: https://flowgram.ai/materials/components/variable-selector

Example of using `includeSchema` to filter variables by type.

```APIDOC
## Filtering Variable Types Example

### Description
This example demonstrates how to filter the displayed variables using the `includeSchema` prop to only show variables of type 'string'.

### Code
```typescript
import { VariableSelector } from '@flowgram.ai/form-materials';

const formMeta = {
  render: () => (
    <>
      <FormHeader />
      <Field<string[] | undefined> name="variable_selector">
        {({ field }) => (
          <VariableSelector
            value={field.value}
            onChange={(value) => field.onChange(value)}
            includeSchema={{ type: 'string' }}
          />
        )}
      </Field>
    </>
  ),
}
```
```

--------------------------------

### Basic Usage of ConditionContext

Source: https://flowgram.ai/materials/components/condition-context

Demonstrates the basic setup and usage of ConditionProvider with ConditionRow and DBConditionRow components. Ensure necessary imports are included.

```tsx
import React from 'react';
import { Field } from '@flowgram.ai/free-layout-editor';
import {
  ConditionProvider,
  ConditionRow,
  DBConditionRow,
  type ConditionOpConfigs,
  type IConditionRule
} from '@flowgram.ai/form-materials';

const OPS: ConditionOpConfigs = {
  cop: {
    abbreviation: 'C',
    label: 'Custom Operator',
  },
};

const RULES: Record<string, IConditionRule> = {
  string: {
    cop: { type: 'string' },
  },
};

const formMeta = {
  render: () => (
    <>
      <FormHeader />
      <ConditionProvider ops={OPS} rules={RULES}>
        <Field<any | undefined> name="condition_row">
          {( { field } ) => (
            <ConditionRow value={field.value} onChange={(value) => field.onChange(value)} />
          )}
        </Field>
        <Field<any | undefined> name="db_condition_row">
          {( { field } ) => (
            <DBConditionRow
              options={[ 
                {
                  label: 'UserName',
                  value: 'username',
                  schema: { type: 'string' },
                },
              ]}
              value={field.value}
              onChange={(value) => field.onChange(value)}
            />
          )}
        </Field>
      </ConditionProvider>
    </>
  ),
};

```

--------------------------------

### Install FlowGram.AI CLI

Source: https://flowgram.ai/examples/fixed-layout/fixed-feature-overview

Use this command to install the FlowGram.AI CLI for creating new applications.

```bash
npx @flowgram.ai/create-app@latest fixed-layout
```
Tokens:
Raw