WireViz Online is wire harness design software for describing connectors, cable conductors and their connections in a browser. It combines a visual cable harness editor with the WireViz 0.4.1 Python library. The library compiles your YAML into a wiring diagram and bill of materials. The editor helps you create that YAML, make connections and inspect the result.
Online wiring diagram workflow
Add connectors and cables, enter pin labels and cable properties, then map each connector pin to a conductor. Use the editable canvas to work on the harness and WireViz preview to inspect the generated wiring diagram. Download the diagram and editable YAML when you are ready. The getting-started guide follows this workflow step by step.
This editor documents cable and wire harness connectivity. It does not provide building wiring plans, PCB layout or circuit simulation. The open-source WireViz engine is bundled with the editor; this independently maintained web application is described in version and attribution.
Design and edit
| Feature | What you can do | Guide |
|---|---|---|
| Canvas and layers | Pan, zoom, arrange components, select a layer and show or hide panels | Workspace |
| Connectors | Add general connectors, splices and parts from the local artwork library | Components |
| Cable properties | Choose gauge presets, convert units, set conductor count, colors and shield | Components |
| Wiring | Draw pin-to-wire connections or use the Pins panel | Connections |
| Source editor | Edit YAML with syntax highlighting, shared undo and compilation feedback | YAML editing |
| Keyboard and context menus | Copy, paste, duplicate, rename, nudge, fit and access actions quickly | Shortcuts |
| Grid | Show the 20-unit grid and snap component positions to it | Workspace |
Document a harness with the library
| Feature | What it describes | Reference |
|---|---|---|
| Connector pinouts | Numeric or named pins, labels, colors, hidden unused pins and loops | Connectors |
| Cables and wire bundles | Cross-section, length, per-wire colors and labels, shields, part data | Cables |
| Connection sets | Pin maps, ranges, branches, single-ended wires, shields and mating | Connections |
| Reusable definitions | Templates, named instances, anchors and merged YAML mappings | Templates |
| Images | Connector illustrations, sizing, captions and uploaded local assets | Images |
| Bill of materials | Cable lengths, part numbers, extra components and quantity multipliers | BOM |
| Presentation | Display options, colors and Graphviz tweaks | Options |
Advanced syntax remains editable in YAML even when it does not have a dedicated visual control. Read the reference for the accepted types and examples before applying a property.
Review and export
The canvas is an editable schematic. WireViz preview displays the official diagram generated by the library and Graphviz. Compilation checks the source, component references and supported connection definitions; it is not an electrical safety or manufacturing certification check.
Download YAML, SVG, PNG, DOT, a TSV bill of materials or an HTML drawing with the BOM. See import and export for the contents of each format and how images travel with your design.
What stays in your browser
The editor runs WireViz locally in a Web Worker after downloading its runtime. Your active source, image uploads and undo history live in the current browser session. Download your YAML before closing the editor. There is no cloud project saving, collaboration, order processing, AI assistant or MCP connection in this release.
See limitations for the full distinction between the library, the canvas and the hosted editor.
Try a complete example
Start with a simple harness, add a shield, or study a branched harness. Each page includes a rendered diagram, editable YAML and an Open in editor link.
Guides for common tasks
- Create a connector pinout diagram with explicit pin IDs, signal labels and conductor mappings.
- Generate a wire harness BOM with cable lengths, part numbers and additional components.