WireViz Online opens directly in the editor with a working Sensor extension example. The drawing, component properties and YAML describe the same harness. A real WireViz 0.4.1 engine compiles the source in your browser and produces the schematic and bill of materials.
Download your YAML before leaving. This release has no saved projects, autosave or recovery after a page refresh. Source, imported images, undo history and manual canvas positions live in the current editor session. A YAML download preserves the harness definition; keep custom image files alongside it.
Make your first change
- Wait until the YAML footer says Up to date. The first visit must load the rendering engine.
- Select X1 on the canvas or in Layers. The right Design tab changes from document settings to connector properties.
- Open Pinout and change a label. Press Enter or leave the field to apply it. Typed component controls check the candidate harness before accepting a change.
- Select W1 and change its length, gauge or colors. Ordinary unit changes convert the value. For example, changing
0.5 mto millimeters produces500 mm. - Open Pins to inspect or add connections, then BOM to inspect generated quantities and part information.
- Use WireViz preview or Shift+W to see the official compiled drawing. Download YAML from the file menu and use the export controls for SVG, PNG, HTML, TSV or DOT.
The movable editor canvas and the WireViz preview serve different purposes. Dragging a component helps you work on the harness; exported schematics use Graphviz's automatic layout. Read Workspace and navigation before arranging a final drawing.
Add components
The + menu beside the left tabs adds a connector, splice / terminal, cable or wire bundle. New components receive available names such as X3 and W2 and appear in the drawing immediately, even before they are wired.
The Components tab also contains a searchable connector library. Click an entry to add it, or drag it onto the canvas to choose its position. Library artwork and its accompanying pin definition are a starting point; check the actual part's drawing and pin assignment. See Connector library.
To build a complete path, open Pins and choose a From connector and pin, a Cable and Wire, and a To connector and pin. Select Connect. See Connecting and disconnecting pins.
Learn from an example
The Components tab offers Sensor extension, Branching harness, Three-way splice, Shielded cable + BOM, and Reusable templates. Loading an example replaces the current source, imported images and manual positions. You can undo that replacement during the same session.
The example gallery also provides six complete YAML files, rendered diagrams and generated bills of materials. Open in editor starts the chosen harness in a new tab so your current editor session stays open.
For an existing design, use File menu → Import YAML or Import folder with images. Read Import and export for image paths and portable files.
When the drawing stops updating
While you type incomplete YAML, the last successful drawing can remain visible. The footer and Checks show whether it matches the current source. Fix the reported error or undo the edit; the drawing updates automatically. Compilation-dependent exports and connection controls wait for a valid current result.
Continue with Component properties, YAML editing, or the keyboard shortcut reference.