A browser-based live editor for WireViz wiring-harness diagrams. One HTML file, no install, no server, no Python.
Loomvizr turns WireViz YAML into a wiring-harness diagram and bill of materials as you type. It ports WireViz's diagram generation to JavaScript and renders it with a WebAssembly build of Graphviz, so everything runs client-side in a single, self-contained .html file you can open by double-clicking it.
Built on WireViz. Loomvizr exists because WireViz built the foundation, a clean, human-readable way to describe a wiring harness as text and turn it into a proper diagram and BOM. All Loomvizr does is make that brilliant idea reachable from a browser. Full credit and thanks below.
WireViz is an excellent way to document wiring harnesses as version-controllable text, but using it means installing Python, the WireViz package, and the Graphviz binary, then running it on the command line to regenerate an image every time you make a change. This is great for automated workflows but I wanted a live editor to collaborate with others without the setup/configuration steps.
Loomvizr removes that friction:
- Nothing to install. It's one HTML file. Open it in any modern browser.
- Live feedback. Edit the YAML on the left; the diagram, BOM, and title block on the right refresh ~600 ms after you stop typing.
- Same source of truth. It reads and writes standard WireViz YAML, so your files still work with the real WireViz tool.
Good for documenting a one-off custom cable, teaching the WireViz syntax, drafting a harness with a co-worker on a screenshare session before committing it to a repo, or producing a shareable spec sheet, all without a toolchain on hand.
-
Live YAML editor with line numbers, current-line highlight, and a resizable split.
-
Real WireViz rendering, connectors, cables, wire colours and colour codes (DIN, IEC, TEL, T568A/B…), shields, bundles, loops, connection ranges, buses/daisy chains, and connector mates.
-
Bill of materials panel with per-cable wire colours in the description, deduplication, part-number columns, and one-click TSV export.
-
Harness title block, give the whole loom a part number and description (stored in WireViz
metadata) and it renders on the diagram. -
Images, embed connector or cable photos from a URL or
data:URI. -
Built-in examples and an Open a file picker, plus a downloadable starter sample pack.
-
Exports: download the YAML, the SVG, or the BOM; filenames follow the part number.
-
Dark / light theme, and an in-app Guide with copy-paste syntax snippets.
-
Diagram controls: zoom, fit-to-window, and pan.
-
Printable spec sheet, a landscape PDF (via the browser's print dialog) with the diagram over the BOM and a clean title block for easy documentation generation.
- Download
index.html. - Open it in a browser (Chrome, Edge, Firefox, or Safari).
- Start editing, or pick a built-in example from Open ▾.
The first load fetches two small libraries (js-yaml and the Graphviz WASM renderer) from a CDN, so it needs an internet connection once; after that the browser caches them. NOTE : If you want to use this in a commercial air gapped environment just edit the paths ,download and map the js files locally.
Minimal example:
connectors:
X1:
type: D-Sub
subtype: female
pinlabels: [DCD, RX, TX, GND]
X2:
type: Molex KK 254
pinlabels: [GND, RX, TX]
cables:
W1:
wirecount: 3
gauge: 0.25 mm2
color_code: DIN
shield: true
connections:
- - X1: [5, 2, 3]
- W1: [1, 2, 3]
- X2: [1, 3, 2]The repo ships a starter pack of commented .yml harnesses, from simple cables to full aircraft looms. Load any of them with Open ▾ → Open file…:
| # | Sample | Shows off |
|---|---|---|
| 01 | USB-C to USB-A 2.0 | 4-wire + shield, USB colours |
| 02 | Cat6 Ethernet patch | color_code: T568B, twisted pairs |
| 03 | XLR microphone | shielded pair, part numbers |
| 04 | OBD-II breakout | 16-pin, hide_disconnected_pins |
| 05 | NEMA 17 stepper | 4-wire bipolar coils |
| 06 | PWM fan splitter | shared bus, partial branches |
| 07 | CAN bus backbone | shielded bus + 120 Ω terminators |
| 08 | LiPo lead with fuse | heavy gauge, additional components |
| 09 | DMX512 daisy chain | 5-pin XLR, series thru |
| 10 | Raspberry Pi 40-pin ribbon | rainbow ribbon, many pinlabels |
| 11 | Quadcopter harness | 4-in-1 ESC, FC, motors, RX, GPS |
| 12 | Fixed-wing UAV harness | power module, servos, ESC, RX, GPS, airspeed |
- Parsing & diagram generation is a JavaScript port of WireViz's core (harness model → Graphviz DOT with HTML-like labels), validated to produce byte-identical DOT against the reference tool on its own examples.
- Rendering uses
@viz-js/viz— Graphviz compiled to WebAssembly — to turn that DOT into inline SVG. - YAML is parsed with js-yaml.
No build step and no backend: the whole app is one HTML file with the ported core embedded.
Connectors (pins, pinlabels, pincolors, type/subtype, simple style, loops, hide_disconnected_pins), cables (wirecount, colors, all standard color_code schemes, gauge with AWG/mm² equivalents, length, shield, bundle), the full connection-set syntax (ranges like 1-4, parallel runs, buses/daisy chains, autogenerated components), pin and component mates via arrows, additional components with quantity multipliers, images, options, and metadata. YAML anchors and single/list merge keys (<<: *template) are resolved.
- The very first load needs internet access to fetch js-yaml and the Graphviz renderer from a CDN (cached afterwards).
- Stacked
<<merge keys (two<<:lines in one mapping) aren't supported; use a single key or a list. - Quote numeric part numbers with leading zeros (
mpn: "0080550") so the YAML parser keeps them as text. - Image
srcmust be a URL ordata:URI (local file paths don't resolve in a browser); cross-origin images display but may not embed in a downloaded SVG. - The BOM adds wire colours to each cable's description, so it isn't byte-identical to stock WireViz output (an intentional documentation aid).
loomvizr/
├─ index.html # the app — a single self-contained file
├─ loomvizr-samples/ # commented starter harnesses (.yml)
│ ├─ 01-usb-c-to-usb-a.yml
│ ├─ …
│ └─ 12-fixed-wing-uav.yml
├─ README.md
└─ LICENSE # GPL-3.0
The app is intentionally a single file with the ported WireViz core embedded, so there's no build step and nothing to bundle. samples/ is just YAML you can open from the editor.
Contributions are welcome, bug reports, new sample harnesses, and coverage for more WireViz features especially.
- Report a bug with a short YAML snippet that reproduces it and what you expected to see.
- Add a sample: drop a commented
.ymlintosamples/that shows a real-world harness or a feature not already covered, and confirm it renders. - Code changes: keep the app a single dependency-light HTML file, match the existing style, and check your change against the WireViz example set before opening a PR.
- Please keep parity with WireViz syntax; where Loomvizr adds behaviour (like wire colours in the BOM), make it additive so files still round-trip.
This project stands entirely on the shoulders of WireViz, created by Daniel Rojas and maintained by the WireViz community.
WireViz is a genuinely lovely piece of work: a thoughtful YAML schema that reads the way you'd describe a harness out loud, and a clean, well-organised codebase that turns it into precise Graphviz output. That clarity is the only reason a faithful port was even feasible, the model was a pleasure to follow, and the diagrams it produces set the standard Loomvizr simply tries to reproduce in the browser. If you do serious harness work, use WireViz directly too, and consider starring and supporting the upstream project. Loomvizr is a companion to it, not a replacement.
Rendering is powered by viz-js (Graphviz compiled to WebAssembly); YAML parsing by js-yaml. Thanks to those maintainers too.
Loomvizr's core is a port of WireViz, which is licensed under GPL-3.0. As a derivative work, Loomvizr is released under the same license. See LICENSE.
WireViz is © its authors and contributors. Loomvizr claims no affiliation with or endorsement by the WireViz project.