Plan the video system
before you patch a cable.

The app has four main areas:

• Toolbar: Top bar with the project name, save indicator, undo/redo, and action buttons.
• Device Library sidebar: Left panel listing your stencil cards. Drag any card onto the canvas to place it.
• Canvas: The SVG workspace where devices and wires live. Pan by holding Space and dragging. Zoom with the scroll wheel.
• Builder drawer: Slides in from the right when you create or edit a stencil.

Toolbar buttons

• ↑ Save: Immediately saves your project to the cloud. Auto-save runs every 2 seconds after a change; this forces it instantly.
• Projects: Opens the projects panel to switch between, create, or delete cloud projects.
• ↩ Undo / ↪ Redo: Undo and redo canvas changes (50-step history).
• ⌸ Bundle: Groups the currently selected wires into a cable bundle. Requires 2+ wires selected.
• ⊞ Grid: Toggles the 20 px grid snap on and off.
• ≡ Schedule: Opens the wire schedule view.
• ↓ Export Drawing: Opens the engineering drawing export modal.
• ↓ SVG / ↓ PNG: Quick export of the canvas as a vector SVG or raster PNG.
• Reset View: Returns canvas pan and zoom to the default position.
• Clear Canvas: Removes all devices and wires after confirmation.

The alignment toolbar (L, R, T, B, CV, CH, DH, DV) appears automatically when 2 or more devices are selected.

The sidebar lists every stencil available to you. The default library includes stencils for Blackmagic Design, AJA, Roland, Shure, Yamaha, Allen & Heath, and QSC.

Creating a new stencil

1. Click the + button at the top of the library sidebar to open the Builder drawer.
2. Fill in Title 1 (manufacturer), Title 2 (model), and Title 3 (device type).
3. Optionally fill in Device ID and Location (these label the instance on the canvas).
4. Add connectors using + Add (one at a time) or + Bulk (numbered series). For each, set the name, signal type, and direction (IN / OUT / BI).
5. A live preview updates on the right as you build.
6. Click Save to Library to add the stencil.

Editing an existing stencil

Click the edit icon on a library card to reopen it in the Builder drawer. Default library stencils are read-only. Use Duplicate to create an editable copy first.

Adding to the canvas

Drag any library card from the sidebar and drop it onto the canvas. The device snaps to the 20 px grid if grid snap is enabled. A toast confirms placement.

Moving devices

Click and drag any placed device to reposition it. Connected wires re-route automatically as you drag.

Selecting

• Single select: Click a device or wire.
• Multi-select: Drag a rubber-band rectangle across multiple items, or Shift+click to add individual items.
• Select all: Ctrl/Cmd+A

Copy and paste

Select a device and press Ctrl/Cmd+C to copy. Press Ctrl/Cmd+V to paste. The copy appears offset 20 px down and to the right. Connectors are preserved; wires are not copied.

Alignment

Select 2 or more devices to reveal the alignment toolbar. L/R/T/B align to the left, right, top, or bottom edge of the selection. CV/CH center vertically or horizontally. DH/DV (requires 3+ devices) distribute evenly horizontal or vertical.

Deleting

Select any device, wire, or bundle and press Delete or Backspace.

Connecting two devices

Connection points are the small white circles that appear at the edges of each device. Click one to begin a wire. Then click any connection point on another device to complete the connection. The wire routes automatically using orthogonal paths and avoids device bodies. Press Esc to cancel a wire in progress.

Straight-line wires

Hold Shift while drawing a wire to switch to straight-line mode. A preview shows the straight path as you move the mouse before clicking the destination.

Removing all wires from a connector

Double-click a connection point to remove every wire attached to that connector at once.

Wire labels

Hover over a wire to reveal a + button at each end. Click it to add labels: one pill appears near the source, one near the destination, both starting with the same text. Double-click either pill to edit inline. Single-click selects it (highlights blue). To remove labels, hover a pill and click the × button. This clears both labels on that wire.

A terminus flag marks a signal path that exits the diagram (for example, a feed going to a different sheet or a remote location).

Creating a terminus

Draw a wire from a device connection point and release it on an empty area of the canvas (not on another device). WireMapper automatically creates a terminus flag at the endpoint. There is no separate button or keyboard shortcut. The terminus is created whenever a wire ends in empty space.

Labeling a terminus

Double-click a terminus flag to open the label editor and describe the destination (for example, TO PATCH BAY, SHEET 3).

Moving a terminus

Click and drag the terminus flag to reposition it. The connected wire re-routes automatically.

Connecting to a terminus

A terminus flag has its own connection point. You can click it to start a new wire and connect to a device, effectively extending the signal path.

Bundles group multiple wires into a single visual trunk, matching how cables are physically run together in a conduit or loom.

Creating a bundle

1. Shift+click to select 2 or more wires.
2. Click the ⌸ Bundle button in the toolbar.

Adjusting stub length

When a bundle is selected, use the − and + stub controls in the toolbar to shorten or lengthen the individual wire stubs before they merge into the trunk.

Bundle labels

Double-click the trunk of a bundle to add a label (for example, a conduit or loom ID).

Unbundling

Select the bundle and press Delete, or use the unbundle button (×) that appears on the selected bundle to restore the individual wires.

SVG export

Click ↓ SVG in the toolbar to export the canvas as a scalable vector file. Opens in any vector editor or browser.

PNG export

Click ↓ PNG in the toolbar to export a raster image rendered at 2× canvas resolution.

Engineering drawing

Click ↓ Export Drawing to open the engineering drawing modal. Fill in the title block fields:

• Company, Client, Project name
• Drawing title, Drawn by, Approved by, Date, Sheet number

Select a page size (Letter, Tabloid, ANSI C, or ANSI D), then click Export PDF.

The drawing auto-scales all canvas content to fit the selected page with a double-line border and title block. Everything renders in true black, no greyscale fills.

Project file (.wmp)

From the engineering drawing modal, click Export .wmp to download a portable project file. This JSON file contains your full diagram and can be imported into any WireMapper account via the Projects panel → Import .wmp.