# totaljs-es/flow architecture

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

- Interactive diagram: https://gitdiagram.com/totaljs-es/flow
- Repository: https://github.com/totaljs-es/flow

## Overview

Total.js Flow v11 is a web application for designing and operating FlowStreams. Users reach the designer through the web interface, while the server exposes stream-management actions and a WebSocket entry point to the Flow runtime. Stream definitions are loaded from and saved to a JSON database; authentication, OpenPlatform access, settings, variables, and bookmarks provide supporting capabilities. The README gives little product detail, so the map follows the sampled routes and actions; unsampled UI and extension relationships are left unconnected where their wiring is not shown.

Main entry points: [`controllers/default.js`](https://github.com/totaljs-es/flow/blob/master/controllers/default.js) (Web and socket routes), [`modules/openplatform.js`](https://github.com/totaljs-es/flow/blob/master/modules/openplatform.js) (OpenPlatform integration), [`actions/streams.js`](https://github.com/totaljs-es/flow/blob/master/actions/streams.js) (Stream management), [`definitions/flowstream.js`](https://github.com/totaljs-es/flow/blob/master/definitions/flowstream.js) (Stream database)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web interface"]
  node_webapp["Web app shell<br/>[index.html]"]
  node_designer["Flow designer<br/>[designer.html]"]
  node_browser_runtime["Browser SPA<br/>[spa.min@20.js]"]
  node_syntax_highlighting["Syntax highlighting"]
end

subgraph group_flows["Flow management"]
  node_flow_routes["Web and socket routes<br/>[default.js]"]
  node_stream_actions["Stream management<br/>[streams.js]"]
  node_flow_runtime["Flow runtime"]
  node_flow_database[("Stream database<br/>[flowstream.js]")]
end

subgraph group_access["Access and platform"]
  node_auth_actions["Login actions<br/>[auth.js]"]
  node_auth_definition["Authentication<br/>[auth.js]"]
  node_openplatform["OpenPlatform integration<br/>[openplatform.js]"]
end

subgraph group_extensions["Extensions and settings"]
  node_settings["Settings actions<br/>[settings.js]"]
  node_variables["Variable actions<br/>[variables.js]"]
  node_console["Console actions<br/>[console.js]"]
  node_bookmarks["Bookmarks plugin<br/>[index.js]"]
  node_cdn["CDN downloader<br/>[cdn.js]"]
  node_extension_loader["Extension loader<br/>[extensions.js]"]
end

node_user(("User"))
node_platform_service["OpenPlatform service"]

node_flow_routes -->|"renders"| node_designer
node_flow_routes -->|"dispatches sockets"| node_flow_runtime
node_stream_actions -->|"manages streams"| node_flow_runtime
node_flow_database -->|"loads and saves"| node_flow_runtime
node_auth_definition -->|"delegates auth"| node_openplatform
node_openplatform -->|"requests sessions"| node_platform_service
node_user -.->|"uses"| node_webapp

click node_webapp "https://github.com/totaljs-es/flow/blob/master/views/index.html"
click node_designer "https://github.com/totaljs-es/flow/blob/master/views/designer.html"
click node_browser_runtime "https://github.com/totaljs-es/flow/blob/master/public/spa.min%4020.js"
click node_syntax_highlighting "https://github.com/totaljs-es/flow/blob/master/public/highlight.min%401020.js"
click node_flow_routes "https://github.com/totaljs-es/flow/blob/master/controllers/default.js"
click node_stream_actions "https://github.com/totaljs-es/flow/blob/master/actions/streams.js"
click node_flow_database "https://github.com/totaljs-es/flow/blob/master/definitions/flowstream.js"
click node_auth_actions "https://github.com/totaljs-es/flow/blob/master/actions/auth.js"
click node_auth_definition "https://github.com/totaljs-es/flow/blob/master/definitions/auth.js"
click node_openplatform "https://github.com/totaljs-es/flow/blob/master/modules/openplatform.js"
click node_settings "https://github.com/totaljs-es/flow/blob/master/actions/settings.js"
click node_variables "https://github.com/totaljs-es/flow/blob/master/actions/variables.js"
click node_console "https://github.com/totaljs-es/flow/blob/master/actions/console.js"
click node_bookmarks "https://github.com/totaljs-es/flow/blob/master/plugins/bookmarks/index.js"
click node_cdn "https://github.com/totaljs-es/flow/blob/master/modules/cdn.js"
click node_extension_loader "https://github.com/totaljs-es/flow/blob/master/extensions.js"

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_webapp,node_designer,node_browser_runtime,node_syntax_highlighting,node_user toneBlue
class node_flow_routes,node_stream_actions,node_flow_runtime,node_flow_database toneAmber
class node_auth_actions,node_auth_definition,node_openplatform toneMint
class node_settings,node_variables,node_console,node_bookmarks,node_cdn,node_extension_loader toneRose
class node_platform_service toneIndigo
```

## Components

### Web interface

- [Web app shell](https://github.com/totaljs-es/flow/blob/master/views/index.html): `views/index.html`
- [Flow designer](https://github.com/totaljs-es/flow/blob/master/views/designer.html): `views/designer.html`
- [Browser SPA](https://github.com/totaljs-es/flow/blob/master/public/spa.min%4020.js): `public/spa.min@20.js`
- [Syntax highlighting](https://github.com/totaljs-es/flow/blob/master/public/highlight.min%401020.js): `public/highlight.min@1020.js`

### Flow management

- [Web and socket routes](https://github.com/totaljs-es/flow/blob/master/controllers/default.js): `controllers/default.js`
- [Stream management](https://github.com/totaljs-es/flow/blob/master/actions/streams.js): `actions/streams.js`
- **Flow runtime**
- [Stream database](https://github.com/totaljs-es/flow/blob/master/definitions/flowstream.js): `definitions/flowstream.js`

### Access and platform

- [Login actions](https://github.com/totaljs-es/flow/blob/master/actions/auth.js): `actions/auth.js`
- [Authentication](https://github.com/totaljs-es/flow/blob/master/definitions/auth.js): `definitions/auth.js`
- [OpenPlatform integration](https://github.com/totaljs-es/flow/blob/master/modules/openplatform.js): `modules/openplatform.js`

### Extensions and settings

- [Settings actions](https://github.com/totaljs-es/flow/blob/master/actions/settings.js): `actions/settings.js`
- [Variable actions](https://github.com/totaljs-es/flow/blob/master/actions/variables.js): `actions/variables.js`
- [Console actions](https://github.com/totaljs-es/flow/blob/master/actions/console.js): `actions/console.js`
- [Bookmarks plugin](https://github.com/totaljs-es/flow/blob/master/plugins/bookmarks/index.js): `plugins/bookmarks/index.js`
- [CDN downloader](https://github.com/totaljs-es/flow/blob/master/modules/cdn.js): `modules/cdn.js`
- [Extension loader](https://github.com/totaljs-es/flow/blob/master/extensions.js): `extensions.js`

### Other components

- **User**
- **OpenPlatform service**

## Connections

- Web and socket routes → Flow designer: renders (evidence: `controllers/default.js`)
- Web and socket routes → Flow runtime: dispatches sockets (evidence: `controllers/default.js`)
- Stream management → Flow runtime: manages streams (evidence: `actions/streams.js`)
- Stream database → Flow runtime: loads and saves (evidence: `definitions/flowstream.js`)
- Authentication → OpenPlatform integration: delegates auth (evidence: `definitions/auth.js`)
- OpenPlatform integration → OpenPlatform service: requests sessions (evidence: `modules/openplatform.js`)
- User → Web app shell: uses