Docs

Flow Canvas

What this screen is for

The canvas is where the architecture takes shape: components become nodes, and the lines you draw between them become the wiring the application is generated from.

Before you start

To do this You need
Open App Builder the App Builder access permission

Opening it

The centre of the App Designer tab.

The Flow Canvas is the central workspace where you visually design your application architecture by placing components and connecting them.

📸 Screenshot Placeholder: The canvas with three connected components. Mark: (1) a component node, (2) its input handle, (3) its output handle, (4) a connection line, (5) the Auto-Organize control.

Canvas Overview

  • Infinite canvas with pan and zoom
  • Drag-and-drop component placement
  • Visual connection lines between components

Adding Components

Drag a component from the Component Palette onto the canvas. A new node appears displaying the component’s icon, name, and default ports. Connection handles appear at the top and bottom.

Component Nodes

Each component on the canvas is represented as a node:

                  ●  ← Input handle (top)
        ┌──────────────────────────┐
        │ [Icon]  [Component Name] │ ← Click to open config
        ├──────────────────────────┤
        │  Port(s): 3000           │
        └──────────────────────────┘
                  ●  ← Output handle (bottom)
Element Purpose Interaction
Icon Visual category indicator Display only
Component Name Identifies the component Click to open config
Port(s) Exposed container port(s) Editable in config
Input Handle Receive connections from components Click and drag to connect
Output Handle Create connections to components Click and drag to connect

Connecting Components

Connections define dependencies, data flow, and communication paths between components.

Click and hold a component’s output handle (bottom), drag to the target component’s input handle (top), and release.

A directional arrow appears connecting the two components. The App Builder may auto-generate environment variables based on the connection pattern:

Connection Pattern Generated Variables Example
Frontend → Backend REACT_APP_API_URL, API_URL
Backend → Database DB_HOST, DB_PORT, DB_NAME, POSTGRES_USER, POSTGRES_PASSWORD
Backend → Infra REDIS_HOST, REDIS_PORT, ELASTICSEARCH_URL
Backend → Message-Broker RABBITMQ_URL, KAFKA_BOOTSTRAP_SERVERS
Backend → Streaming PULSAR_SERVICE_URL

Deleting Components

Open the config modal and click Delete, or press Backspace. All connections to/from the component are also removed. This action cannot be undone.

Deleting Connections

Click on a connection line to remove it. Auto-generated environment variables may also be removed.

Canvas Navigation

Action How To
Pan Click and drag on empty canvas space
Zoom In/Out Mouse wheel up/down
Fit All to View Click the “Fit View” control button
Reset Zoom Double-click on empty canvas space

Sidecar Components

Sidecars are auxiliary containers that run alongside a main component (e.g., log collectors, service mesh proxies, monitoring agents).

To add a sidecar:

  1. Click the main component to open the Config Modal
  2. In the General tab, click “Add Sidecar”

The sidecar node appears automatically connected to the parent — no manual connection required. Sidecars receive suggested volume and bind-mount configurations from their parent. Deleting a sidecar removes both the node and its link to the parent.

Scenario

A backend that cannot reach its database.

  1. Look at the canvas before looking at any configuration. A missing connection is visible from across the room and is the most common cause.
  2. Check the direction. Connections run from an output handle to an input handle, and a reversed edge is not the same relationship.
  3. Open the backend node and check its Connected Components — see Component Configuration. If the database is not listed, the edge did not take.
  4. Redraw the connection and re-check. The environment variables generated between components follow the edge, so nothing downstream works until it is right.

When it doesn’t work

Symptom Cause How to check Fix
A dragged component did not appear It was dropped outside the canvas — Drag onto the canvas area itself
An edge will not connect Handles run output (bottom) to input (top) The node handles Drag from the lower handle to the upper one
Components are overlapping Placement is manual — Use Auto-Organize
A connection exists but nothing was generated The edge is drawn the wrong way The node’s Connected Components list Redraw it in the right direction

Next