Signal Flow Designer

1. Overview

SIGFLOW is a browser-based AV signal flow diagram tool built into Find Boxes. It allows AV professionals to visually map signal paths between equipment — showing how sources, processors, switchers, amplifiers, and displays are interconnected.

Diagrams are saved automatically as you work and are accessible from any device with a browser. Multiple canvases can be created per project, and the component library is shared across your entire organization.

1.1 Key Concepts

Component — A piece of AV equipment defined in the library (e.g. PTZ Camera, Audio DSP). Each component has a name, category, and a set of labelled ports.

Port — An input or output point on a component. Each port has a label, signal type, and side (left, right, or bottom).

Instance — A placed copy of a component on the canvas. Multiple instances of the same component can exist on the same canvas.

Connection — A routed line drawn between two port dots, representing a physical cable or signal path.

Canvas — The infinite workspace where instances are placed and connected. Each canvas is an independent diagram.

1.2 Supported Devices

Desktop browsers (Chrome, Firefox, Safari, Edge)

Mobile phones and tablets (iOS Safari, Android Chrome)

Touch and mouse input both fully supported

2. Interface Overview

2.1 Top Bar

The top bar runs across the top of the screen and contains the main controls.

Control

Description

☰ (Hamburger)

Opens and closes the component library sidebar. On desktop the sidebar is always visible.

← Back

Returns to the project or previous page in Find Boxes.

Diagram title

Shows the name of the current canvas. Set when the canvas is created.

? Clear

Removes all components and connections from the canvas after confirmation. On mobile shows icon only.

⊹ Auto Layout

Automatically arranges components into a clean hierarchical layout. On mobile shows icon only.

? Save Image

Captures the current canvas as a PNG and saves it to the project files. On mobile shows icon only.

2.2 Sidebar — Component Library

The sidebar on the left lists all components available to your organization. From here you can search, add components to the canvas, create new components, and edit or delete existing ones.

Search bar — Filters the list by component name or category in real time.

+ New Component — Opens the component editor to define a new piece of equipment.

+ button on each list item — Adds that component to the canvas.

Right-click (or long-press on mobile) on a list item — Shows options to Edit or Delete the component from the library.

Signal type dots — Colored dots on each list item show what signal types that component uses.

2.3 Canvas

The canvas is the main work area. It is infinite — you can pan and zoom to any position.

Pan — Drag on empty canvas space (mouse or one finger on touch).

Zoom — Scroll wheel on desktop, or pinch gesture on touch devices.

+ / − buttons — Zoom in and out in fixed steps. The current zoom percentage is shown between them.

⊡ button — Resets pan and zoom to the default view.

2.4 Autosave Indicator

In the bottom-right corner of the canvas, a small indicator shows the current save state:

saving… — A change was made and is being sent to the server.

saved — All changes have been saved successfully.

save failed — A network error occurred. Changes are preserved in local storage and will retry on the next action.

3. Working with Components

3.1 Creating a Component

Click + New Component in the sidebar.

Enter a component name (required) and an optional category.

Click + Add Port to add each input and output. For each port, set:

Label — The port name as it appears on the card (e.g. "HDMI In 1").

Signal Type — The type of signal carried (see Section 3.3).

Side — Which side of the card the port appears on: Left, Right, or Bottom.

Click Save Component. The component appears in the sidebar immediately.

TIP

Use Left for inputs and Right for outputs to keep signal flow readable from left to right.

3.2 Editing and Deleting Components

Right-click any component in the sidebar (or long-press on mobile) and select Edit Component to modify its name, category, or ports.

Any instances of that component already on the canvas will update immediately to reflect the changes.

To remove a component entirely, right-click and select Delete from Library. All canvas instances of that component will be removed automatically.

NOTE

The component library is shared across your entire organization. Changes affect all canvases, not just the current one.

3.3 Signal Types and Colors

Each port is assigned a signal type, which determines the color of its dot and the color of any connection line drawn from it.

HDMI

#2b7fff — Blue

HDMI video and audio

SDI

#f97316 — Orange

Serial digital interface video

DisplayPort

#0ea5e9 — Sky blue

DisplayPort video

VGA

#84cc16 — Lime

Analogue VGA video

Analog Video

#eab308 — Amber

Composite / component video

Analog Audio

#22c55e — Green

XLR, TS, TRS audio

AES/EBU

#06b6d4 — Cyan

Digital audio (AES3)

Dante

#a78bfa — Violet

Dante networked audio

AVB

#c084fc — Purple

AVB networked audio

Network

#9333ea — Deep purple

Ethernet control / data

Control

#ef4444 — Red

RS-232, relay, GPIO

RS-232

#2dd4bf — Teal

Serial control

USB

#f472b6 — Pink

USB data / power

Power

#f59e0b — Yellow

AC / DC power

Generic

#64748b — Slate

Unlabelled / custom

3.4 Component Size Tiers

Components automatically scale to one of five size tiers based on the maximum number of ports on any single side. You do not need to select a size — it is assigned automatically.

Tier

Max ports/side

Spacing

Min Width

Recommended Use

Small

1–4

34 px

165 px

Simple sources/displays

Medium

5–8

28 px

190 px

Small processors, converters

Large

9–16

22 px

220 px

DSPs, mid-size routers

XL

17–32

18 px

290 px

Large routers, AV-over-IP systems

XXL

33–256

14 px

360 px

Broadcast routers, large patch bays

NOTE

The tier name is shown in the card header alongside the category for Medium and above (e.g. "Switcher · XL"). For very large components such as broadcast routers with 120+ ports, zoom out to see the full card.

The maximum number of ports per component is 256.

4. Building a Diagram

4.1 Adding Components to the Canvas

Click or tap the + button on any component in the sidebar. The component appears on the canvas near the centre of the current view. You can add the same component multiple times — each placement is an independent instance.

TIP

Use the search bar to quickly find a component before adding it, especially in large libraries.

4.2 Moving Components

Drag the card header (the colored bar at the top of a component card) to move it. On touch devices, drag with one finger. Connections automatically reroute as you drag.

Changes to component positions are saved automatically 1.5 seconds after you stop moving.

4.3 Removing a Component from the Canvas

Click the × button in the top-right corner of a card to remove it. Any connections attached to that card are removed at the same time.

Alternatively, right-click the card and select Remove from Canvas.

4.4 Connecting Ports

Tap or click a port dot on any component card. The dot will pulse green and a status bar message will confirm that connection mode is active.

Tap or click a port dot on a different component. A line will be drawn between the two ports.

The connection line color matches the signal type of the source port.

To cancel a connection in progress, tap empty canvas space, tap the same dot again, or press Escape on a keyboard.

TIP

You can connect any two ports regardless of signal type. The color comes from the source port. Use matching signal types to keep diagrams accurate and readable.

4.5 Deleting a Connection

Tap or click a connection line. A red × button appears at the midpoint of the line. Tap it to remove the connection.

On desktop, you can also press Delete or Backspace after clicking a line to select it.

4.6 How Lines Are Routed

SIGFLOW routes connection lines automatically using orthogonal (right-angle) paths. The router:

Exits each port perpendicular to the card edge it is on

Finds the most direct clear path to the target port

Routes around the edges of any component in the way — lines never pass through card interiors

Keeps a 20 px clearance margin from all card edges

Draws parallel lines side-by-side (6 px apart) when multiple connections share the same path

Adds a small semicircle "hump" on the newer line wherever two lines cross at right angles

TIP

If lines look cluttered, use Auto Layout (see Section 4.7) to space components out and give the router more room to work with.

4.7 Auto Layout

Press ⊹ Auto Layout in the top bar to automatically arrange all components on the canvas.

The layout algorithm:

Detects signal flow direction — analyses existing connections to determine whether your diagram flows left-to-right or top-to-bottom and matches that direction.

Assigns depth — components with no incoming connections (sources) are placed in the first column. Each subsequent column contains components that receive signal from the previous one.

Minimizes crossings — within each column, components are sorted to reduce the number of connection lines that cross each other.

Animates — components slide smoothly to their new positions over 650ms.

NOTE

Auto Layout moves all components. It does not affect which components are connected or how connections are routed.

5. Saving and Exporting

5.1 Autosave

SIGFLOW saves your work automatically. Every time you make a change — moving a component, adding a connection, or deleting something — a save is triggered 1.5 seconds later. The autosave indicator in the bottom-right corner of the canvas shows the current state.

You never need to manually save. Reloading the page or returning to a canvas later will restore exactly where you left off.

NOTE

If your device loses network connection, changes are held in your browser's local storage and will be sent to the server the next time you make a change with a working connection.

5.2 Saving as an Image

Press  Save Image in the top bar to capture the current canvas as a PNG image. The image is saved directly to the project files in Find Boxes, using the canvas name and a timestamp as the filename (e.g. Conference-Room-A-1748291234.png).

The image captures the canvas at the current zoom level. Zoom out before saving if you want the full diagram visible in a single image.

TIP

Attach saved images to proposals or project documentation to share signal flow diagrams with clients or installation teams.

5.3 Multiple Canvases

A single project can have multiple canvases — for example, one per room, floor, or system. Each canvas is independent with its own components, connections, and layout.

Canvases are created and managed from the Find Boxes project page. The component library (the list of equipment definitions) is shared across all canvases in your organization.

6. Tips and Best Practices

6.1 Organizing Large Diagrams

Use categories consistently (Source, Switcher, Processor, Amplifier, Display) to keep the library navigable.

Place sources on the left and displays on the right so signal flow reads naturally left-to-right.

Use Auto Layout after adding a batch of components to get a clean starting arrangement, then fine-tune positions manually.

Zoom out with the − button or pinch to see the full diagram for large systems.

For very large routers (120+ ports), zoom to around 25–50% to see the whole card.

6.2 Keeping Lines Readable

Leave space between components — the router needs room to find clear paths. At least 60–80px between cards gives the best results.

Avoid stacking components directly on top of each other. Lines cannot route through cards and will detour around them.

If two parallel lines are hard to distinguish, zoom in — the 6px gap between them becomes more visible at higher zoom levels.

Use Auto Layout if lines are tangled. The hierarchical arrangement gives the router the most efficient paths.

6.3 Building the Component Library

Build components once in the library and reuse them across all canvases and projects. A well-maintained library saves time on every new diagram.

Use descriptive port labels that match the silkscreen on the physical equipment (e.g. "HDMI IN 1" not "Input").

Put control ports (RS-232, Network, Relay) on the bottom so they don't clutter the left/right signal path.

For equipment with many identical ports (patch bays, large routers), number them clearly: "SDI In 1" through "SDI In 120".

6.4 Mobile Usage

Tap port dots to start and complete connections. The touch target is larger than the visible dot.

Tap the midpoint × button on a connection line to delete it.

Use the ☰ hamburger button to open the sidebar, then tap + to add a component and close the sidebar.

Pinch to zoom and single-finger drag to pan.

Rotate to landscape orientation for more canvas space on phones.