FlowGram.AI
指引
物料
例子
API
掘金专栏
TypeDocs
指引
物料
例子
API
掘金专栏
TypeDocs
简体中文

快速上手

INFO

快速体验 FlowGram.AI，你可以直接 在 CodeSandbox 中打开 或者 在 StackBlitz 中打开

选择开始方式：

  • 方式一：使用官方模板脚手架搭建新项目（⭐️ 推荐用于快速入门）。
  • 方式二：通过安装编辑器包集成到现有项目中。

方式一：通过官方模版创建 FlowGram.AI 应用

  1. 使用 FlowGram CLI 搭建一个可运行的演示
npm
pnpm
yarn
bun
npx @flowgram.ai/create-app@latest
  1. 在提示时选择一个模板（推荐选择 Free Layout Demo 用于快速入门）
- Free Layout Demo            # 自由布局最佳实践 (⭐️ 推荐)
- Free Layout Demo Simple     # 自由布局基本用法
- Fixed Layout Demo           # 固定布局最佳实践
- Fixed Layout Demo Simple    # 固定布局基本用法

Free Layout Demo 查看在线演示

自由布局预览

Fixed Layout Demo 查看在线演示

固定布局预览

Free Layout Demo Simple 查看在线演示

自由布局简单预览

Fixed Layout Demo Simple 查看在线演示

固定布局简单预览
  1. 查看安装的目录名称
  • 使用 Free Layout Demo 模板创建的项目，目录名称为 demo-free-layout
  • 使用 Free Layout Demo Simple 模板创建的项目，目录名称为 demo-free-layout-simple
  • 使用 Fixed Layout Demo 模板创建的项目，目录名称为 demo-fixed-layout
  • 使用 Fixed Layout Demo Simple 模板创建的项目，目录名称为 demo-fixed-layout-simple
  1. 进入项目目录
cd [project-name]
  1. 安装依赖
npm
pnpm
yarn
bun
npm install
  1. 启动开发服务器
npm
pnpm
yarn
bun
npm run dev

方式二：直接安装编辑器包

TIP

此方法适用于对 FlowGram 项目有一定了解的开发者。

如果初次接触 FlowGram，我们建议优先选择方式一，先对 FlowGram 项目进行熟悉，然后再将所需代码逐步整合到现有的工程中。

如果你需要将包添加到现有项目中，选择一个布局类型：

自由布局

节点可以在画布上任意拖动，可以使用边在节点之间进行连接，从而建立节点之间的逻辑关系

下一步：创建自由布局画布

自由布局演示
固定布局

节点在图中的位置代表了节点之间的逻辑关系

下一步：创建固定布局画布

固定布局演示