Getting Started with Flowchart App

This guide will help you get up and running with the Flowchart App, a visual workflow designer for creating node-based diagrams.

Prerequisites

Before using the Flowchart App, ensure you have:

• Access to the FlowState platform
• A modern web browser (Chrome, Firefox, Safari, or Edge)
• Basic familiarity with flowchart concepts

Accessing the App

1. Navigate to the FlowState app launcher
2. Click on the Flowchart app (identified by the git-branch icon)
3. The app will open at the /flowchart route

Initial Setup

When you first open the Flowchart App, you'll see the welcome screen with options to create a new flow or explore examples.

Step 1: Explore the Interface

The Flowchart App interface consists of:

Step 2: Try an Example Flow

Before creating your own flowchart, explore the built-in examples:

1. From the welcome screen, click one of the View Example buttons
2. Choose from three example types:
   • Data Model: Epic FlowState hierarchy visualization
   • MCP Integration: Chat app architecture diagram
   • Product Initiative: Goal-to-delivery workflow
3. Pan and zoom to explore the diagram
4. Click Close to return to the main view

Step 3: Create Your First Flowchart

1. Click the New button in the toolbar (or "Create New Flow" on welcome screen)
2. A new tab opens with an empty canvas
3. Use the Node Palette to add your first node:
   • Click a node type (Database Schema, Process Action, LLM Agent, or Custom)
   • The node appears on the canvas
4. Add more nodes and connect them by dragging from one node's handle to another

Understanding Node Types

The Flowchart App provides four specialized node types:

Database Schema Node

Use for visualizing database tables and data models.

+------------------+
|   Table Name     |
+------------------+
| field1: string   |
| field2: number   |
| field3: boolean? |
+------------------+

Process Action Node

Use for workflow and process diagrams with different shapes:

• Process (Rectangle): Standard process steps
• Decision (Diamond): Conditional branching
• Start (Circle): Flow entry points
• End (Circle): Flow termination

LLM Agent Node

Use for AI system architecture diagrams showing:

• Agent name and role
• Model configuration
• Temperature settings

Custom Node

Use for flexible, domain-specific concepts with customizable key-value fields.

Canvas Controls

Next Steps

Once you've completed the initial setup:

• Explore Features & Capabilities to learn about all available functionality
• Follow Creating a Flowchart for a detailed workflow guide
• Review the FAQ for answers to common questions
• Check Troubleshooting if you encounter any issues