Use the WireViz: Preview button on the editor toolbar (right of tabs),
or using the default F8 shortcut key.
Once the preview is open, it will refresh every time you save the file.
This behaviour can be disabled by setting "wireviz.refreshPreviewOnSave": false.
Configuration
Defaults are the first of the "Possible values" below.
Config UI | settings.json | Possible values | Description
---|---|---|---
Wireviz: Refresh Preview On Save | wireviz.refreshPreviewOnSave | true, false | Automatically refreshes preview on document save
Wireviz: Output Path | wireviz.outputPath | "output", null | When set, generates output files in an /output subdirectory. When null, output to the same location as the input file.
Wireviz: Preview Format | wireviz.previewFormat | "svg", "png" | Selects output file to be displayed in the preview window.
⚠ Limitations
If you have an external image in your wire harness (i.e. an image: node),
you need to set:
"wireviz.previewFormat": "png" (the WebView in VSCode won't show images on an SVG), and
"wireviz.outputPath": null (WireViz v0.3.2 throws an error outputting to a path other than the source, if you use images)