The workspace keeps the harness canvas in the center, layers and source on the left, and contextual controls on the right. The floating toolbar at the bottom selects Move, Hand and Connect pins and opens quick actions.
Left panel: layers, components and YAML
Layers lists the connectors and cables in the compiled harness. Expand a component to see its pins or conductors with IDs, labels and colors. Selecting a row selects the corresponding canvas component. The single Schematic page clears the selection; this release does not create additional pages.
Components contains searchable connector artwork, source definitions and example harnesses. A definition can exist in YAML without appearing in Layers: WireViz instantiates components used by connection sets. Templates can generate several visible instances from one definition.
The YAML editor occupies the lower part of the left panel. Collapse its heading or use Shift+Y. Drag the divider above it to resize it. When the divider has keyboard focus, Up and Down adjust its height; Home and End select the available minimum and maximum.
Right panel: context and output
The right panel has four tabs:
| Tab | Purpose |
|---|---|
| Design | Component properties when selected; document metadata, canvas settings, WireViz options, images and Graphviz overrides when nothing is selected. |
| Pins | Build a connector–cable–connector path and edit source connection sets. Selecting a drawn conductor also opens connection details. |
| BOM | Inspect generated bill-of-materials rows, download TSV and add manual BOM items. |
| Checks | Read parser, engine and rendering diagnostics. |
Click an empty part of the canvas or press Escape to clear a selection. Escape also leaves WireViz preview and returns to the Move tool.
Hide either panel with its close control, Shift+L for the left panel or Shift+P for the inspector. Tab toggles the panels when the canvas or page background has focus. It remains normal focus navigation inside controls. On narrow screens, opening one sidebar closes the other so both remain reachable.
Move, pan and zoom
Use V for Move, then drag one component at a time. Multiple selection and marquee selection are not implemented. Position fields in Design accept X and Y coordinates; arrow keys move a selected component by one canvas unit, or ten with Shift.
Use H for Hand and drag the canvas. Hold Space for temporary panning, or use the middle mouse button. Scrolling pans; a trackpad pinch zooms. The zoom menu, plus/minus keys and Shift+1 fit command offer alternatives. Shift+2 focuses the selected component or a selected connection's components.
Arrange components restores an automatic working arrangement. Undo can restore earlier component positions.
Grid and snapping
The dot grid uses 20-unit spacing. Shift+G toggles its visibility; Shift+S separately toggles snapping. Snapping applies to component dragging and library drops, even when the grid is hidden. Arrow-key nudges and numeric position fields allow finer placement.
Canvas background, grid, zoom and panel preferences are view controls. They are not WireViz manufacturing dimensions or saved document layout.
Editable canvas versus WireViz preview
The canvas presents interactive cards and connection handles. Shift+W shows WireViz's generated SVG instead. This preview is the reference for the official schematic exports, including labels, images, display options and Graphviz layout.
Manual canvas coordinates do not change YAML or the exported SVG, PNG, HTML or DOT layout. Use WireViz options or supported Graphviz overrides for output changes, then inspect the preview. See Import and export and current limitations.