# vernamusic/flowai architecture

> Architecture diagram of the GitHub repository vernamusic/flowai, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vernamusic/flowai
- Repository: https://github.com/vernamusic/flowai

## Overview

FlowAI is a browser-based visual workflow builder. Users create or select a saved workflow, add and connect nodes on the canvas, configure nodes and variables, run the workflow, and review execution logs. The editor and Zustand store coordinate the workflow UI; execution evaluates node order and uses variable resolution and HTTP-request handling. Persistence is browser localStorage, not a backend. The graph follows README descriptions and indexed imports; unsampled modules are included where their role is documented, without assuming unshown calls.

Main entry points: [`src/store/workflow.store.ts`](https://github.com/vernamusic/flowai/blob/main/src/store/workflow.store.ts) (Workflow store), [`src/components/workflow/editor/workflow-canvas.tsx`](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/editor/workflow-canvas.tsx) (Workflow canvas), [`src/components/workflow/editor/workflow-editor.tsx`](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/editor/workflow-editor.tsx) (Workflow editor), [`src/lib/workflow/execution/execution-engine.ts`](https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/execution/execution-engine.ts) (Execution engine)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_dashboard["Dashboard"]
  node_workflow_routes["Workflow routes<br/>[page.tsx]"]
  node_workflow_list["Workflow list<br/>[workflow-list.tsx]"]
  node_new_workflow["Create workflow"]
end

subgraph group_design["Workflow design"]
  node_editor["Workflow editor"]
  node_canvas["Workflow canvas"]
  node_node_library["Node library<br/>[node-library.tsx]"]
  node_node_catalog["Node definitions<br/>[nodes.ts]"]
  node_workflow_node["Canvas node<br/>[workflow-node.tsx]"]
  node_inspector["Workflow inspector"]
  node_node_config["Node configuration"]
  node_variable_input["Variable inputs<br/>[variable-input.tsx]"]
end

subgraph group_runtime["Execution runtime"]
  node_execution["Execution engine"]
  node_http_request["HTTP requests<br/>[http-request.ts]"]
  node_run_button["Run workflow"]
  node_execution_panel["Execution panel"]
  node_execution_logs["Execution logs<br/>[execution-logs.tsx]"]
end

subgraph group_state["State and persistence"]
  node_store["Workflow store<br/>[workflow.store.ts]"]
  node_storage[("Browser storage")]
end

subgraph group_variables["Variables"]
  node_variable_context["Variable context"]
  node_variable_parser["Variable parser<br/>[variable-parser.ts]"]
  node_variable_resolver["Variable resolver"]
end

node_user(("User"))

node_user -->|"opens"| node_dashboard
node_user -->|"browses"| node_workflow_list
node_dashboard -->|"reads workflows"| node_storage
node_workflow_list -->|"reads workflows"| node_storage
node_workflow_list -->|"deletes workflow"| node_store
node_user -->|"creates"| node_new_workflow
node_new_workflow -->|"initializes"| node_store
node_workflow_routes -->|"renders"| node_editor
node_editor -->|"renders"| node_canvas
node_editor -->|"renders"| node_inspector
node_editor -->|"renders"| node_node_library
node_node_library -->|"uses definitions"| node_node_catalog
node_canvas -->|"renders"| node_workflow_node
node_canvas -->|"updates workflow"| node_store
node_canvas -.->|"accepts dropped nodes"| node_node_library
node_canvas -->|"creates node"| node_node_catalog
node_inspector -.->|"configures node"| node_node_config
node_node_config -->|"updates configuration"| node_store
node_variable_input -.->|"edits workflow values"| node_store
node_store -->|"saves workflow"| node_storage
node_store -->|"runs workflow"| node_execution
node_run_button -->|"starts run"| node_store
node_execution -->|"executes requests"| node_http_request
node_execution -->|"builds context"| node_variable_context
node_execution -->|"resolves config"| node_variable_resolver
node_variable_resolver -->|"parses expressions"| node_variable_parser
node_variable_resolver -->|"reads values"| node_variable_context
node_execution_panel -->|"reads execution state"| node_store
node_execution_logs -->|"reads execution logs"| node_store

click node_dashboard "https://github.com/vernamusic/flowai/blob/main/src/components/dashboard/dashboard-overview.tsx"
click node_workflow_routes "https://github.com/vernamusic/flowai/blob/main/src/app/(dashboard)/workflows/%5Bid%5D/page.tsx"
click node_workflow_list "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/workflow-list.tsx"
click node_new_workflow "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/new-workflow-button.tsx"
click node_editor "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/editor/workflow-editor.tsx"
click node_canvas "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/editor/workflow-canvas.tsx"
click node_node_library "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/sidebar/node-library.tsx"
click node_node_catalog "https://github.com/vernamusic/flowai/blob/main/src/constants/nodes.ts"
click node_workflow_node "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/nodes/workflow-node.tsx"
click node_inspector "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/inspector/workflow-inspector.tsx"
click node_node_config "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/configuration/node-config-panel.tsx"
click node_variable_input "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/variables/variable-input.tsx"
click node_store "https://github.com/vernamusic/flowai/blob/main/src/store/workflow.store.ts"
click node_storage "https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/workflow-storage.ts"
click node_execution "https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/execution/execution-engine.ts"
click node_http_request "https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/execution/http-request.ts"
click node_run_button "https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/execution/run-workflow-button.tsx"
click node_execution_panel "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/execution/execution-panel.tsx"
click node_execution_logs "https://github.com/vernamusic/flowai/blob/main/src/components/workflow/execution/execution-logs.tsx"
click node_variable_context "https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/variables/variable-context.ts"
click node_variable_parser "https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/variables/variable-parser.ts"
click node_variable_resolver "https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/variables/variable-resolver.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_dashboard,node_workflow_routes,node_workflow_list,node_new_workflow,node_user toneBlue
class node_editor,node_canvas,node_node_library,node_node_catalog,node_workflow_node,node_inspector,node_node_config,node_variable_input toneAmber
class node_execution,node_http_request,node_run_button,node_execution_panel,node_execution_logs toneMint
class node_store,node_storage toneRose
class node_variable_context,node_variable_parser,node_variable_resolver toneIndigo
```

## Components

### Application

- [Dashboard](https://github.com/vernamusic/flowai/blob/main/src/components/dashboard/dashboard-overview.tsx): `src/components/dashboard/dashboard-overview.tsx`
- [Workflow routes](https://github.com/vernamusic/flowai/blob/main/src/app/(dashboard)/workflows/%5Bid%5D/page.tsx): `src/app/(dashboard)/workflows/[id]/page.tsx`
- [Workflow list](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/workflow-list.tsx): `src/components/workflow/workflow-list.tsx`
- [Create workflow](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/new-workflow-button.tsx): `src/components/workflow/new-workflow-button.tsx`

### Workflow design

- [Workflow editor](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/editor/workflow-editor.tsx): `src/components/workflow/editor/workflow-editor.tsx`
- [Workflow canvas](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/editor/workflow-canvas.tsx): `src/components/workflow/editor/workflow-canvas.tsx`
- [Node library](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/sidebar/node-library.tsx): `src/components/workflow/sidebar/node-library.tsx`
- [Node definitions](https://github.com/vernamusic/flowai/blob/main/src/constants/nodes.ts): `src/constants/nodes.ts`
- [Canvas node](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/nodes/workflow-node.tsx): `src/components/workflow/nodes/workflow-node.tsx`
- [Workflow inspector](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/inspector/workflow-inspector.tsx): `src/components/workflow/inspector/workflow-inspector.tsx`
- [Node configuration](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/configuration/node-config-panel.tsx): `src/components/workflow/configuration/node-config-panel.tsx`
- [Variable inputs](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/variables/variable-input.tsx): `src/components/workflow/variables/variable-input.tsx`

### Execution runtime

- [Execution engine](https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/execution/execution-engine.ts): `src/lib/workflow/execution/execution-engine.ts`
- [HTTP requests](https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/execution/http-request.ts): `src/lib/workflow/execution/http-request.ts`
- [Run workflow](https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/execution/run-workflow-button.tsx): `src/lib/workflow/execution/run-workflow-button.tsx`
- [Execution panel](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/execution/execution-panel.tsx): `src/components/workflow/execution/execution-panel.tsx`
- [Execution logs](https://github.com/vernamusic/flowai/blob/main/src/components/workflow/execution/execution-logs.tsx): `src/components/workflow/execution/execution-logs.tsx`

### State and persistence

- [Workflow store](https://github.com/vernamusic/flowai/blob/main/src/store/workflow.store.ts): `src/store/workflow.store.ts`
- [Browser storage](https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/workflow-storage.ts): `src/lib/workflow/workflow-storage.ts`

### Variables

- [Variable context](https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/variables/variable-context.ts): `src/lib/workflow/variables/variable-context.ts`
- [Variable parser](https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/variables/variable-parser.ts): `src/lib/workflow/variables/variable-parser.ts`
- [Variable resolver](https://github.com/vernamusic/flowai/blob/main/src/lib/workflow/variables/variable-resolver.ts): `src/lib/workflow/variables/variable-resolver.ts`

### Other components

- **User**

## Connections

- User → Dashboard: opens
- User → Workflow list: browses
- Dashboard → Browser storage: reads workflows (evidence: `src/components/dashboard/dashboard-overview.tsx`)
- Workflow list → Browser storage: reads workflows (evidence: `src/components/workflow/workflow-list.tsx`)
- Workflow list → Workflow store: deletes workflow (evidence: `src/components/workflow/workflow-list.tsx`)
- User → Create workflow: creates (evidence: `src/components/workflow/new-workflow-button.tsx`)
- Create workflow → Workflow store: initializes (evidence: `src/components/workflow/new-workflow-button.tsx`)
- Workflow routes → Workflow editor: renders (evidence: `src/app/(dashboard)/workflows/[id]/page.tsx`)
- Workflow editor → Workflow canvas: renders (evidence: `src/components/workflow/editor/workflow-editor.tsx`)
- Workflow editor → Workflow inspector: renders (evidence: `src/components/workflow/editor/workflow-editor.tsx`)
- Workflow editor → Node library: renders (evidence: `src/components/workflow/editor/workflow-editor.tsx`)
- Node library → Node definitions: uses definitions (evidence: `src/components/workflow/sidebar/node-library.tsx`)
- Workflow canvas → Canvas node: renders (evidence: `src/components/workflow/editor/workflow-canvas.tsx`)
- Workflow canvas → Workflow store: updates workflow (evidence: `src/components/workflow/editor/workflow-canvas.tsx`)
- Workflow canvas → Node library: accepts dropped nodes
- Workflow canvas → Node definitions: creates node
- Workflow inspector → Node configuration: configures node
- Node configuration → Workflow store: updates configuration (evidence: `src/components/workflow/configuration/node-config-panel.tsx`)
- Variable inputs → Workflow store: edits workflow values
- Workflow store → Browser storage: saves workflow (evidence: `src/store/workflow.store.ts`)
- Workflow store → Execution engine: runs workflow (evidence: `src/store/workflow.store.ts`)
- Run workflow → Workflow store: starts run (evidence: `src/lib/workflow/execution/run-workflow-button.tsx`)
- Execution engine → HTTP requests: executes requests (evidence: `src/lib/workflow/execution/execution-engine.ts`)
- Execution engine → Variable context: builds context (evidence: `src/lib/workflow/execution/execution-engine.ts`)
- Execution engine → Variable resolver: resolves config (evidence: `src/lib/workflow/execution/execution-engine.ts`)
- Variable resolver → Variable parser: parses expressions (evidence: `src/lib/workflow/variables/variable-resolver.ts`)
- Variable resolver → Variable context: reads values (evidence: `src/lib/workflow/variables/variable-resolver.ts`)
- Execution panel → Workflow store: reads execution state (evidence: `src/components/workflow/execution/execution-panel.tsx`)
- Execution logs → Workflow store: reads execution logs (evidence: `src/components/workflow/execution/execution-logs.tsx`)