Process App
Process App
Process App
The Process App is the visual process design and workflow documentation application for FlowState. It provides interactive flowchart visualization, hierarchical subprocess navigation, process editing with undo/redo support, approval workflows, JSON schema editing for entity creation, and comprehensive execution statistics with analytics dashboards.
Key Features
- Visual Flowchart Rendering: Interactive process diagrams using ReactFlow with custom node types
- Process Editor: Full CRUD operations with command-based undo/redo, auto-save, and publish workflow
- Subprocess Navigation: Hierarchical process traversal with breadcrumb trail
- Approval Workflows: Configurable multi-approver workflows with status tracking and audit history
- Schema Editor: Visual JSON Schema editor with entity template configuration
- Execution Statistics: Analytics dashboard with metrics, charts, and linked entity tracking
- Step Palette: Drag-and-drop step creation organized by category (flow, actions, integration)
- Keyboard Shortcuts: Full keyboard support for common editor operations
Target Users
| User Type | Primary Use Cases |
|---|---|
| Process Designers | Create and edit process flowcharts, define step configurations |
| Workflow Managers | Configure approval workflows, review execution statistics |
| Business Analysts | Document processes, create reusable templates |
| Developers | Define API call steps, script steps, and agent task integrations |
| Stakeholders | Review process definitions, approve workflow steps |
Quick Links
- Features & Capabilities - Detailed feature documentation
- Getting Started - Set up and configure the app
Getting Started
Navigation
The app uses a streamlined navigation structure:
- Home (
/home) - Welcome page with quick start guide - Processes (
/processes) - Process viewer and editor - Statistics (
/stats) - Execution analytics dashboard
Viewing a Process
- Navigate to the Processes page
- Browse or search processes in the sidebar
- Click a process to view its flowchart
- Click any step to see its details in the panel below
- Double-click subprocess steps to navigate into them
Editing a Process
- Open a process in the viewer
- Click the "Edit Mode" toggle button
- Drag step types from the palette onto the canvas
- Configure step properties in the property panel
- Connect steps by dragging from output handles to input handles
- Use Ctrl/Cmd+S to save, or wait for auto-save
- Click "Publish" when ready to make the process live
Understanding Step Types
The Process App supports various step types organized into categories:
Flow Control
- Start/End - Process entry and exit points
- Decision - Conditional branching
- Parallel/Join Gateway - Parallel execution paths
- Subprocess - Nested process references
- Delay - Time-based waiting
Actions
- Action - Generic action step
- Human Task - Manual task assignment
- Approval - Multi-approver approval gate
- Notification - Send notifications
Integration
- Script - Execute JavaScript code
- API Call - HTTP request integration
- AI Agent - AI agent task execution
App Identity
| Property | Value |
|---|---|
| Package | @epicdm/flowstate-app-process |
| Base Path | /process |
| Icon | Workflow |
| Color | #6366f1 (indigo-500) |
Related Packages
- @epicdm/flowstate-app-framework - App container framework
- @epicdm/flowstate-collections - Database schemas (ProcessModel, ProcessStepModel)
- @epicdm/flowstate-rxdb - Database utilities
- @xyflow/react - Flowchart rendering library