# sakazuki/node-red-desktop architecture

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

- Interactive diagram: https://gitdiagram.com/sakazuki/node-red-desktop
- Repository: https://github.com/sakazuki/node-red-desktop

## Overview

Node-RED Desktop wraps the Node-RED editor and runtime in an Electron application. The main process coordinates startup, editor/runtime lifecycle, file operations, settings, and optional integrations; users edit and deploy flows in the editor, which the runtime serves locally. The graph also preserves documented-in-source settings, project/palette, debug, update, tray, and ngrok capabilities. Some wiring is omitted because the excerpts do not show the relevant handlers or preload implementation.

Main entry points: [`src/main/main.ts`](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/main.ts) (App coordinator), [`src/main/node-red.ts`](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/node-red.ts) (Node-RED app), [`src/main/config-manager.ts`](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/config-manager.ts) (App configuration), [`src/main/file-manager.ts`](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/file-manager.ts) (Flow file manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Desktop app"]
  node_main["App coordinator<br/>[main.ts]"]
  node_window["Editor window<br/>[browser-window.ts]"]
  node_renderer["Editor interactions<br/>[renderer.js]"]
  node_settingsui["Settings UI<br/>[settings.js]"]
  node_eventbus["App event bus<br/>[app-event-bus.ts]"]
end

subgraph group_runtime["Node-RED runtime"]
  node_nodered["Node-RED app<br/>[node-red.ts]"]
  node_exec["Runtime commands"]
end

subgraph group_state["Files and settings"]
  node_flowstore[("Flow and user data<br/>[custom-storage.ts]")]
  node_config[("App configuration<br/>[config-manager.ts]")]
  node_files["Flow file manager<br/>[file-manager.ts]"]
  node_history["Recent files<br/>[file-history.ts]"]
end

subgraph group_integrations["Desktop integrations"]
  node_menu["App menu<br/>[menu.ts]"]
  node_tray["System tray<br/>[tray.ts]"]
  node_updater["Auto updater<br/>[auto-update.ts]"]
  node_ngrokmgr["Tunnel manager<br/>[ngrok-manager.ts]"]
end

node_user(("Desktop user"))
node_ngrok{{"ngrok service"}}
node_electronstore[("Electron settings store")]
node_node_red{{"Node-RED runtime"}}
node_filesystem[("Local filesystem")]

node_user -->|"uses editor"| node_window
node_main -->|"creates"| node_config
node_main -->|"creates"| node_files
node_main -->|"creates"| node_history
node_main -->|"creates"| node_menu
node_main -->|"creates"| node_nodered
node_main -->|"creates"| node_window
node_main -->|"starts runtime"| node_nodered
node_main -->|"starts updater"| node_updater
node_main -->|"starts tray"| node_tray
node_main -->|"loads history"| node_history
node_main -->|"connects tunnel"| node_ngrokmgr
node_ngrokmgr -.->|"opens tunnel"| node_ngrok
node_config -->|"reads and writes"| node_electronstore
node_nodered -->|"initializes runtime"| node_node_red
node_nodered -->|"configures storage"| node_flowstore
node_nodered -->|"patches commands"| node_exec
node_nodered -->|"emits lifecycle events"| node_eventbus
node_eventbus -->|"dispatches events"| node_main
node_nodered -->|"serves and loads flows"| node_filesystem
node_flowstore -->|"reads and writes data"| node_filesystem
node_files -->|"manages flow files"| node_filesystem
node_history -->|"persists recent files"| node_config
node_main -->|"saves settings"| node_config
node_main -->|"opens and saves flows"| node_files
node_main -->|"sends settings"| node_settingsui
node_settingsui -->|"submits settings"| node_main
node_renderer -->|"reports editor changes"| node_main
node_main -->|"updates menu"| node_menu
node_main -->|"quits to install"| node_updater
node_main -->|"controls window"| node_tray

click node_main "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/main.ts"
click node_window "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/browser-window.ts"
click node_renderer "https://github.com/sakazuki/node-red-desktop/blob/main/src/renderer/renderer.js"
click node_settingsui "https://github.com/sakazuki/node-red-desktop/blob/main/src/renderer/settings.js"
click node_eventbus "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/app-event-bus.ts"
click node_nodered "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/node-red.ts"
click node_exec "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/node-red-runtime-exec.ts"
click node_flowstore "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/custom-storage.ts"
click node_config "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/config-manager.ts"
click node_files "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/file-manager.ts"
click node_history "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/file-history.ts"
click node_menu "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/menu.ts"
click node_tray "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/tray.ts"
click node_updater "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/auto-update.ts"
click node_ngrokmgr "https://github.com/sakazuki/node-red-desktop/blob/main/src/main/ngrok-manager.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_main,node_window,node_renderer,node_settingsui,node_eventbus,node_user toneBlue
class node_nodered,node_exec,node_electronstore,node_filesystem toneAmber
class node_flowstore,node_config,node_files,node_history toneMint
class node_menu,node_tray,node_updater,node_ngrokmgr toneRose
class node_ngrok,node_node_red toneIndigo
```

## Components

### Desktop app

- [App coordinator](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/main.ts): `src/main/main.ts`
- [Editor window](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/browser-window.ts): `src/main/browser-window.ts`
- [Editor interactions](https://github.com/sakazuki/node-red-desktop/blob/main/src/renderer/renderer.js): `src/renderer/renderer.js`
- [Settings UI](https://github.com/sakazuki/node-red-desktop/blob/main/src/renderer/settings.js): `src/renderer/settings.js`
- [App event bus](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/app-event-bus.ts): `src/main/app-event-bus.ts`

### Node-RED runtime

- [Node-RED app](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/node-red.ts): `src/main/node-red.ts`
- [Runtime commands](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/node-red-runtime-exec.ts): `src/main/node-red-runtime-exec.ts`

### Files and settings

- [Flow and user data](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/custom-storage.ts): `src/main/custom-storage.ts`
- [App configuration](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/config-manager.ts): `src/main/config-manager.ts`
- [Flow file manager](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/file-manager.ts): `src/main/file-manager.ts`
- [Recent files](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/file-history.ts): `src/main/file-history.ts`

### Desktop integrations

- [App menu](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/menu.ts): `src/main/menu.ts`
- [System tray](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/tray.ts): `src/main/tray.ts`
- [Auto updater](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/auto-update.ts): `src/main/auto-update.ts`
- [Tunnel manager](https://github.com/sakazuki/node-red-desktop/blob/main/src/main/ngrok-manager.ts): `src/main/ngrok-manager.ts`

### Other components

- **Desktop user**
- **ngrok service**
- **Electron settings store**
- **Node-RED runtime**
- **Local filesystem**

## Connections

- Desktop user → Editor window: uses editor
- App coordinator → App configuration: creates
- App coordinator → Flow file manager: creates
- App coordinator → Recent files: creates
- App coordinator → App menu: creates
- App coordinator → Node-RED app: creates
- App coordinator → Editor window: creates
- App coordinator → Node-RED app: starts runtime
- App coordinator → Auto updater: starts updater
- App coordinator → System tray: starts tray
- App coordinator → Recent files: loads history
- App coordinator → Tunnel manager: connects tunnel
- Tunnel manager → ngrok service: opens tunnel
- App configuration → Electron settings store: reads and writes
- Node-RED app → Node-RED runtime: initializes runtime
- Node-RED app → Flow and user data: configures storage
- Node-RED app → Runtime commands: patches commands
- Node-RED app → App event bus: emits lifecycle events
- App event bus → App coordinator: dispatches events
- Node-RED app → Local filesystem: serves and loads flows
- Flow and user data → Local filesystem: reads and writes data
- Flow file manager → Local filesystem: manages flow files
- Recent files → App configuration: persists recent files
- App coordinator → App configuration: saves settings
- App coordinator → Flow file manager: opens and saves flows
- App coordinator → Settings UI: sends settings
- Settings UI → App coordinator: submits settings
- Editor interactions → App coordinator: reports editor changes
- App coordinator → App menu: updates menu
- App coordinator → Auto updater: quits to install
- App coordinator → System tray: controls window