Flowchart App
Flowchart App
Flowchart App
The Flowchart App is a visual workflow designer for FlowState. It provides a node-based diagram editor built on React Flow (@xyflow/react), enabling users to create, edit, and visualize flowcharts, data models, system architectures, and process flows.
Key Features
- Visual Node-Based Editing: Drag-and-drop interface with multiple node types
- Tabbed Editor Interface: Work on multiple flowcharts simultaneously with up to 10 tabs
- Specialized Node Types: Database schemas, process actions, LLM agents, and custom nodes
- Built-in Examples: Pre-configured example flows demonstrating common use cases
- Interactive Canvas: Pan, zoom, and navigate with minimap and controls
- Real-time Sync: RxDB integration for data persistence (in development)
Target Users
| User Type | Primary Use Cases |
|---|---|
| Architects | Design system architectures and data models |
| Developers | Visualize code structure and integration flows |
| Product Managers | Create process flows and user journey diagrams |
| Technical Writers | Document workflows and system interactions |
Quick Links
- Features & Capabilities - Detailed feature documentation
- Getting Started - Set up and configure the app
Getting Started
Creating a New Flowchart
- Click the "New" button in the toolbar or "Create New Flow" in the welcome screen
- Use the Node Palette to add nodes to your canvas
- Connect nodes by dragging from source handles to target handles
- Save your work (auto-save in development)
Exploring Examples
The app includes three built-in example flows:
- Data Model Example: Epic FlowState hierarchy (Org > Workspace > Project > Task)
- MCP Integration Example: Chat app architecture with MCP server connections
- Product Initiative Flow: Goal-to-delivery workflow visualization
Click any "View Example" button from the welcome screen to explore these diagrams.
Node Types
| Node Type | Icon | Purpose |
|---|---|---|
| Database Schema | Database | Visualize database tables with fields |
| Process Action | Cog | Model process steps, decisions, start/end points |
| LLM Agent | Bot | Define AI agent configurations |
| Custom | Package | Create flexible custom nodes |
App Identity
| Property | Value |
|---|---|
| Package | @epicdm/flowstate-app-flowchart |
| Base Path | /flowchart |
| Icon | git-branch |
| Color | #F59E0B |
Related Packages
- @epicdm/flowstate-app-framework - App container framework
- @epicdm/db-collections - Database schemas including FlowModel
- @epicdm/flowstate-rxdb - Database utilities