#Quick Start

Choose a way to start:

• Option 1: Use the official template scaffolding to build a new project (⭐️ Recommended for a quick start).
• Option 2: Integrate into an existing project by installing the editor package.

#Option 1: Create a FlowGram.AI Application via the Official Template

1. Use the FlowGram CLI to set up a runnable demo.

npx @flowgram.ai/create-app@latest

2. Select a template when prompted (it is recommended to choose Free Layout Demo for a quick start).

- Free Layout Demo            # Best practice for free layout (⭐️ Recommended)
- Free Layout Demo Simple     # Basic usage of free layout
- Fixed Layout Demo           # Best practice for fixed layout
- Fixed Layout Demo Simple    # Basic usage of fixed layout

Free Layout Demo View Online Demo

Fixed Layout Demo View Online Demo

Free Layout Demo Simple View Online Demo

Fixed Layout Demo Simple View Online Demo

3. Check the installed directory name.

• For a project created with the Free Layout Demo template, the directory name is demo-free-layout.
• For a project created with the Free Layout Demo Simple template, the directory name is demo-free-layout-simple.
• For a project created with the Fixed Layout Demo template, the directory name is demo-fixed-layout.
• For a project created with the Fixed Layout Demo Simple template, the directory name is demo-fixed-layout-simple.

4. Enter the project directory.

cd [project-name]

5. Install dependencies.

npm install

6. Start the development server.

npm run dev

#Option 2: Install the Editor Package Directly

If you need to add the package to an existing project, choose a layout type:

Free Layout

Nodes can be dragged freely on the canvas, and edges can be used to connect nodes to establish logical relationships between them.

Next: Create a Free Layout Canvas

Fixed Layout

The position of nodes in the graph represents the logical relationship between them.

Next: Create a Fixed Layout Canvas