node-red-contrib-flowtree 1.0.3

Structured explorer for the Node-RED editor.

npm install node-red-contrib-flowtree

Flowtree

Version: 1.0.2

Flowtree is a structured, folder-based explorer for the Node-RED editor.

Node-RED normally uses a single-level flow tab structure. This works well for many projects, but large Node-RED projects can become cluttered when they contain many flows. Flowtree adds a visual folder explorer to help you organise, navigate, and manage flows in a more structured way.

Flowtree is purely visual. It does not change how Node-RED saves, deploys, or runs your project. The Node-RED backend continues to work exactly as intended. Although Flowtree uses the idea of folders and directories, these are front-end organisational folders only and do not affect the actual Node-RED runtime.

Explorer

Flowtree adds a new explorer panel to the Node-RED editor.

With Flowtree you can:

• Navigate flows using a structured explorer.
• Search, filter, and order flows.
• Create folders and flows inside any directory.
• Drag and drop folders and flows to reorganise your project.
• Rename folders.
• Change folder colours, icons, and visual styling.
• Change flow icon styling.
• Mass delete, hide, show, enable, disable, lock, and unlock flows.
• Apply hide/show, enable/disable, and lock/unlock actions to complete folders.
• Automatically apply folder actions to all flows and subfolders inside that folder.

Export and sharing

Flowtree data is stored inside the Node-RED project itself.

This means you can export and share your project with other users. If they also have Flowtree installed, they will see the same structured tree. If they do not have Flowtree installed, the project will still work normally in Node-RED.

If a user without Flowtree edits and exports the project back to you, Flowtree will continue from the existing structure. Any new flows that were created without Flowtree will appear in the root folder, while existing flows keep their original Flowtree location.

Storage

Flowtree stores all directory data in a Node-RED global environment variable.

It uses a single global environment variable named:

flowtree

This variable contains the Flowtree folder structure as JSON, including folders, folder properties, and the flow IDs assigned to each folder.

Because Node-RED stores global environment variables inside the flows.json file, your Flowtree structure can be exported, backed up, and version-compared together with your normal Node-RED project.

Example stored object in flows.json:

{
  "id": "generated-id",
  "type": "global-config",
  "env": [
    {
      "name": "flowtree",
      "value": "{...json...}",
      "type": "json"
    }
  ],
  "modules": {}
}

The flowtree JSON contains data similar to this:

{
  "version": 1,
  "folders": {
    "/Client": {
      "path": "/Client",
      "name": "Client",
      "parent": "/",
      "icon": "fa fa-folder-o",
      "color": "#88c0d0",
      "folders": [],
      "files": ["flow-id-here"]
    }
  },
  "flows": {
    "flow-id-here": {
      "id": "flow-id-here",
      "name": "Flow 1",
      "path": "/Client"
    }
  }
}

Usage

Once installed, open the flow explorer (folder icon) at the bottom right (Node-Red >=5.0.0). Drag the window to your current explorer and drop it on top. You will now have flow tree as your main explorer, however you can always swap back to the original explorer.

In older versions of Node-Red, increase the width of your sidebar. Drag the folder icon in the top right to the left so it remains in reach to select.

Important note

If you wish to delete/reset the structure and saved folders and properties. Delete the flowtree variable in your global environment variables.