Flowcrest - Help Guide

Overview

Tutorial Video

Learn Flowcrest in 10 minutes with our outstanding tutorial

Master the vibe of visual node editing and AI-powered code generation

What is Flowcrest?

Flowcrest is an innovative visual node-based editor that enables you to design complex application logic structures visually. The system uses nodes and connections to represent different modules of your application and the data flow between them, then converts your visual design into AI prompts that generate working code.

Main Flowcrest interface overview showing complete interface with nodes, connections, control panels, and canvas area

Visual Design

Easily create and edit nodes and their connections with an intuitive drag-and-drop interface.

AI Integration

The created structure can be automatically converted to AI ready JSON files that in cooperation with the master prompt generate working code.

Project Management

Save, load, and manage your projects with the built-in cloud-based project management system.

Export Options

Export your work: JSON file, AI master prompt, combined text, or complete package with images.

Getting Started

Quick Start Guide

Create a New Project

Click the "New Project" button in the menu at the top-left corner, or use the Ctrl/^(control)+N keyboard shortcut.

New Project button and project settings panel showing name and user prompt fields

Configure Project Settings

Enter your project name and a User Prompt that describes your project's purpose and target environment.

Example User Prompt:

                                            "This is a web application with image editing functionality. Users can upload images, edit them with various tools like brush, eraser, selection, and transform, and save the results in different formats."
                                        

Project settings form with project name field and user prompt textarea

Create Your First Node

Right-click on the canvas and select "Add Node". Give your node a descriptive name and explain what functionality it represents.

Right-click context menu and node creation dialog showing Add Node option and node creation form

Add Inputs and Outputs

Double-click your node to edit it. Add input and output ports to define how data flows between nodes.

Node settings modal showing inputs/outputs lists with add/remove buttons

User Interface

Interface Layout

🔢 Interface Elements Reference

The numbered interface layout shows all key elements of the Flowcrest interface. Each number corresponds to a specific feature or control:

🎯 Canvas & Nodes (1, 24-31)

1. Canvas: Main workspace for node editing
24. Node Group: Visual grouping container
25. Node Name: Node title/identifier
26. Node Description: Detailed node explanation
27. Input: Data input port
28. Output: Data output port
29. Connection: Data flow line between nodes
30. Edit Button: Node editing access
31. Reveal/Hide Button: Toggle description visibility

🎛️ Project Controls (2-8)

2. Project Settings Menu: Main project panel
3. Project Name: Current project identifier
4. User Prompt: Main project description
5. Auto Saving: Automatic save toggle
6. New Project: Create new project
7. Save Project: Save current work
8. Save As: Save with new name

📤 Export/Import Controls (9-17)

9. Export Options: Main export panel
10. Import IDE Project: Analyze existing codebase
11. Export AI Project Prompt: Generate AI prompt
12. Export JSON: Raw project data
13. Export Combined: Prompt + JSON together
14. Copy Prompt: Copy AI prompt to clipboard
15. Copy JSON: Copy JSON to clipboard
16. Copy Combined: Copy both to clipboard
17. Export Package: Complete ZIP download

👤 Profile & Settings (18-23)

18. Profile Settings: User account settings
19. My Projects: Browse saved projects
20. Preferences: Application preferences
21. Help and Support: Documentation access
22. Sign Out: Logout from account
23. Profile Menu: User dropdown menu

🎛️ Project Controls (Top-Left)

Project Name: Set your project identifier
User Prompt: Additional context description for AI
Autosave Toggle: Automatic cloud saving
Save Buttons: Manual save options

Project control panel showing all buttons and input fields

📤 Export/Import (Top-Right)

Import IDE Project: Analyze existing codebase with the help of Flowcrest
Export AI Prompt: Download master prompt
Export JSON: Project structure data
Export Package: Complete ZIP with images

Export panel showing all export options and copy buttons

🧭 Navigation (Bottom-Left)

Auto Mode: Automatically detects input device

Mouse Mode: Scroll wheel zoom, middle-click or space + drag to pan

Touchpad Mode: Pinch zoom, two-finger pan

Navigation mode selector showing radio buttons for mode selection

👤 Profile Menu (Bottom-Right)

User Profile: Name and avatar display
My Projects: Browse saved projects
Settings: Profile customization

🎯 Canvas & Control Hints

The central canvas displays helpful control hints at the bottom to guide your interactions:

Canvas area with control hints displayed at the bottom center

Project Management

Project Operations

💾 Saving Projects

Autosave (Recommended)

Automatically saves your project to the cloud every few minutes. Toggle on/off with the switch in the project panel.

Manual Save

Use Ctrl+S or "Save Project" button. "Save Project As" creates a new copy.

Autosave toggle switch and save buttons in project panel

📂 Loading Projects

Access your saved projects through the profile menu in the bottom-right corner. Click "My Projects" to see all your saved work.

My Projects modal window with grid of project cards showing thumbnails, names, creation dates, and load buttons

Node Operations

Working with Nodes

🔧 Creating and Editing Nodes

Creating Nodes

Right-click on canvas → "Add Node"
Enter name and description
Nodes represent functional modules
Can be standalone or connected

Editing Node Parameter Order

Click the pencil icon in the top-left corner of the node
Drag inputs and outputs by the handle to reorder
Drop to apply changes

Node creation context menu and node editing modal side by side

🔌 Inputs and Outputs

Inputs and outputs define how data flows between nodes. They represent the information that a module receives and produces.

Best Practices:

Use descriptive names (e.g., "selectedImage", "brushSettings")
Reorder ports by dragging for cleaner connections
Only add ports that represent actual data flow
Use the pencil icon to rearrange port order

Node with multiple inputs/outputs and port reordering interface

Connections

Connecting Nodes

🔗 Creating Connections

Connections represent data flow between nodes. Drag from an output port to an input port to create a connection.

How to Connect:

Click and drag from an output port
Drag to an input port on another node
Release to create the connection
Connection appears as a curved line

Connection Rules:

Output → Input only
One output can connect to multiple inputs
One input can connect to multiple outputs
No self-connections allowed

Node connection process showing drag from output to input with connection preview

✂️ Knife Tool (Cutting Connections)

Use the knife tool to cut multiple connections at once by right-clicking and dragging across them.

How to Use Knife Tool:

Right-click and hold on empty canvas
Drag across connections you want to cut
Connections turn red when targeted
Release to cut all highlighted connections

Knife tool in action showing red highlighted connections being cut

Groups

Organizing with Groups

📦 Creating Groups

Groups help organize related nodes visually and logically. They're perfect for representing different sections of your application.

Creating Groups:

Select multiple nodes (drag box or Ctrl+click)
Right-click → "Create Group"
Or drag nodes into existing group
Customize name, color, description

Group Features:

Custom colors for visual organization
Expandable/collapsible
Move entire groups together
Add/remove nodes dynamically

Multiple nodes being selected and grouped, showing group creation dialog

🎨 Group Management

Group Operations:

Edit Group: Double-click group header
Add Nodes: Drag nodes into group area
Remove Nodes: Right-click node → "Remove from group"
Delete Group: Right-click header → "Delete Group"
Move Group: Drag group header to move all nodes

Group with colored header, showing nodes inside and group management options

Navigation

Canvas Navigation

🖱️ Mouse Controls

Zoom:

Mouse wheel up/down
Zoom centers on cursor position
Smooth zoom animation

Pan:

Middle mouse button + drag
Space + left click + drag
Smooth panning motion

📱 Touchpad Controls

Zoom:

Pinch gesture (two fingers)
Natural zoom behavior
Zoom centers on gesture

Pan:

Two-finger drag
Smooth scrolling
Momentum scrolling

Navigation mode selector showing Auto, Mouse, and Touchpad options

Export/Import

Export Options

🤖 Export AI Prompt

Generates a comprehensive AI prompt that includes your project structure, node descriptions, and user context. This is the main output for AI code generation.

What's Included:

Project name and user prompt
All node descriptions and connections
Group organization structure
Input/output specifications
Formatted for AI consumption

Export AI Prompt button and preview of generated prompt text

📄 Export JSON

Exports the raw project data in JSON format. Useful for backup, version control, or integration with other tools.

Example JSON structure:

{
  "projectName": "Image Editor",
  "userPrompt": "Web app for image editing...",
  "nodes": [...],
  "connections": [...],
  "groups": [...]
}

Export JSON button and file download dialog

📦 Export Package

Creates a complete ZIP package containing the project JSON, AI prompt, and all uploaded images.

Package Contents:

project.json - Project structure
ai_prompt.txt - Generated AI prompt
images/ - All uploaded images

Export Package button and ZIP file contents preview

Import Options

📁 Import IDE Project

The Import IDE Project feature allows you to analyze existing codebases and automatically generate a Flowcrest project structure. This powerful tool helps you visualize and understand complex projects by creating nodes that represent different modules, classes, and their relationships.

How It Works:

Click "Import IDE Project" button
Load your codebase into your IDE
Copy the prompt to your AI agent
Wait for the AI to generate the JSON structure
Import the generated JSON

Supported Languages:

JavaScript/TypeScript (React, Node.js)
Python (Django, Flask, FastAPI)
Java (Spring, Maven projects)
C# (.NET, ASP.NET)
PHP (Laravel, Symfony)
Go, Rust, and more

Import IDE Project button and file upload dialog

Analysis Process:

Once you copied the prompt, you can paste it into the chat of your AI tool of choice.

🔍 Code Structure Analysis

The AI identifies main modules and classes of your project based on the prompt
Analyzes function dependencies
Maps data flow patterns
Identifies key user interactions
Creates importable Flowcrest formatted JSON file

🏗️ Node Generation

Creates nodes for each major component
Generates descriptive names and descriptions
Sets up appropriate inputs/outputs
Groups related functionality

Import analysis progress dialog showing file processing

Generated Project Structure:

After analysis, you'll get a complete Flowcrest project with:

Organized Nodes: Each representing a key component
Logical Connections: Showing data flow and dependencies
Grouped Structure: Related nodes grouped by functionality
Detailed Descriptions: AI-generated explanations for each node
Ready for Export: Immediately usable for AI code generation

Generated node structure from imported IDE project

💡 Pro Tips:

Clean up your codebase before importing (remove node_modules, build folders)
Include README files for better context understanding
Review and refine generated nodes for optimal AI prompt generation
Use the import feature to understand unfamiliar codebases
Combine multiple small projects into one comprehensive structure

Keyboard Shortcuts

Essential Shortcuts

🎯 Selection & Editing

Select All Ctrl+A

Copy Ctrl+C

Cut Ctrl+X

Paste Ctrl+V

Delete Selected Delete

💾 Project Management

New Project Ctrl+N

Save Project Ctrl+S

↩️ History

Undo Ctrl+Z

Redo Ctrl+Shift+Z

Redo (Alt) Ctrl+Y

ℹ️ Help & Interface

Show Shortcuts ?

Pan Space + Drag

Advanced Features

Power User Features

🖼️ Image Upload & Management

Upload reference images to nodes to provide visual context for AI code generation. Images are included in package exports and help AI understand your requirements better.

Supported Formats:

PNG, JPG, JPEG, GIF
SVG vector graphics
WebP format
Maximum 10MB per image

Best Practices:

Use screenshots for UI mockups
Include wireframes and designs
Add reference images for styling
Keep images relevant to node function

Node with uploaded images showing thumbnail gallery and upload interface

Troubleshooting

Common Issues & Solutions

🔧 Performance Issues

Problem: Canvas feels slow or laggy

Solutions:

Reduce browser zoom level to 100%
Close other browser tabs
Use Chrome or Firefox for best performance
Disable browser extensions temporarily

Problem: Large projects become unresponsive

Solutions:

Use groups to organize nodes
Collapse unused groups
Break large projects into smaller modules
Limit images to essential references only

💾 Save/Load Issues

Problem: Project won't save

Solutions:

Check internet connection
Verify you're logged in
Try manual save instead of autosave
Export as backup (JSON/Package)

Problem: Can't load saved project

Solutions:

Refresh the page and try again
Check if project exists in "My Projects"
Clear browser cache and cookies
Contact support if project is missing

🖱️ Interface Issues

Problem: Can't create connections

Solutions:

Ensure you're dragging from output to input
Check that input port isn't already connected
Try zooming in for better precision

Problem: Navigation not working properly

Solutions:

Switch navigation mode (Auto/Mouse/Touchpad)
Try different input methods (mouse wheel, space+drag)
Reset zoom level to 100%

🆘 Getting Help

Still having issues?

If you continue experiencing problems:

Try refreshing the page (F5)
Clear browser cache and cookies
Try a different browser
Check browser console for error messages
Export your work as backup before troubleshooting

💡 Pro Tip: Always export your project as a package before making major changes or troubleshooting. This ensures you have a complete backup of your work.

Support

Need Help?

If you couldn't find the answer to your question in our documentation, we're here to help! Our support team is ready to assist you with any issues or questions you might have about Flowcrest.

📧 Contact Support

Fill out the form below and we'll get back to you as soon as possible.