ROHD Schematic Viewer

ROHD Schematic Viewer is an interactive viewer for netlists produced by the ROHD netlister using a superset of the Yosys JSON netlist format (which are also supported). It is designed for exploring ROHD-generated designs in Visual Studio Code, a web browser, or a native Flutter application.

Use it to navigate a design hierarchy, inspect module ports and internal connections, find and highlight nets, and progressively expand the logic relevant to an investigation.

Open the hosted ROHD Schematic Viewer

Click the image to watch the viewer progressively expand a design and reveal the connections that matter.

Embed the Viewer in a Flutter Application

Import the package library and place EmbeddedSchematicViewer in the host application's widget tree:

import 'package:rohd_schematic_viewer/schematic_viewer.dart';

EmbeddedSchematicViewer.fromJson(
  schematicJson: netlistJson,
  themeMode: SchematicThemeMode.dark,
  expansionMode: SchematicExpansionMode.defaultView,
)

On Flutter web, the viewer loads its declared package-owned ELK assets on the first layout request. Host applications do not need to copy scripts or modify their web/index.html.

themeMode and expansionMode are controlled properties: updates from the host application are applied without replacing the widget. The initialThemeMode and initialExpansionMode parameters remain available for backward-compatible uncontrolled embeddings.

Use EmbeddedSchematicViewer.fromJson, .fromNetlistMap, .fromHierarchy, or .fromAsset to make the viewer's input mode explicit. The original constructor remains temporarily available as a deprecated compatibility path.

The main schematic_viewer.dart library exposes only the embeddable widget, its configuration enums, and reusable icon and help widgets. Import shared hierarchy, cross-probing, and source-navigation contracts from their owning packages. Optional schematic APIs use separate entry points:

schematic_host.dart for standalone and extension host pages;
schematic_layout.dart for custom layout engines and immutable layout data;
schematic_connectivity.dart for read-only netlist connectivity traversal.

Rendering, canvas state, painters, BLoCs, and concrete layout implementations are internal and are not supported package APIs.

The JSON must use the Yosys-compatible netlist structure described below. See the complete runnable widget example for a minimal application and netlist.

Generate a Netlist Directly with ROHD

ROHD Schematic Viewer requires a netlist in the Yosys JSON netlist format. Plain Yosys JSON is sufficient for schematic exploration. For a ROHD design, build the top-level module and pass it to NetlistService; ROHD-generated netlists can also preserve ROHD types for structured signals:

You can generate a netlist from any ROHD top-level module with a small Dart program. Replace MyModule with the top-level module from your design, and make sure the program is run from a Dart or Flutter package that depends on rohd:

import 'dart:io';
import 'package:rohd/rohd.dart';

Future<void> main() async {
  final myModule = MyModule();
  await myModule.build();

  final synthesizer = NetlistSynthesizer();
  final builder = SynthBuilder(myModule, synthesizer);
  final netlistJson =
      synthesizer.generateCombinedJson(builder, myModule);
  print(netlistJson);

  await Directory('build').create(recursive: true);
  await File('build/my_hardware.rohd.json').writeAsString(netlistJson);
}

For example, save the program as tool/generate_netlist.dart and run:

dart run tool/generate_netlist.dart

Then open build/my_hardware.rohd.json in the viewer. For source navigation metadata in the VS Code extension, use the NetlistService example below instead.

Choose How to Open the Viewer

Visual Studio Code

The VS Code extension is the recommended option when schematic exploration is part of an editing or debugging workflow.

After installing the extension:

Right-click a Yosys JSON file and select Open as Schematic.
Or run Open as Schematic from the Command Palette.
Or use Open With... and select the schematic custom editor.

The schematic opens as a custom editor in the current VS Code workspace. This mode enables integration with compatible ROHD extensions, including ROHD Wave Viewer.

Web Browser

Use the hosted application without installing an extension:

Open ROHD Schematic Viewer

Select a Yosys JSON netlist from your computer. The hosted viewer processes the file locally in your browser; it does not upload the netlist to an application server. This release supports interactive schematic traversal in the browser. The standalone hosted application processes the netlist locally in the browser.

Desktop Application

Run the native Flutter application for a standalone desktop experience. The application initially loads the bundled demonstration schematic; use its file picker to open another Yosys JSON netlist. This standalone application does not currently provide services beyond schematic exploration.

Instructions for building and running desktop, web, and VS Code extension configurations are in doc/BUILD.md.

Quick Start

Generate a Yosys JSON netlist, using NetlistService for a ROHD design.
Open the netlist.
Click a module instance to inspect it in the design hierarchy.
Expand a module with its + control to reveal its internal logic.
Click a wire to highlight every connected segment.
Search for a wire with Ctrl+F or Cmd+F when the relevant net is not visible.
Double-click a highlighted wire to zoom to its connected region.

The viewer supports incremental expansion and collapse, so large designs can be explored without rendering every level of hierarchy at once.

Explore a Design Hierarchy

Click module instances to select them, then use their expansion controls to reveal or hide internal structure. Click a port to incrementally show or collapse only the logic connected through that port.

This focused expansion is useful for tracing a signal through a large design:

expand a module to inspect its cells and connections;
expand an individual port to follow only the relevant fanin or fanout;
collapse modules or ports that are no longer relevant;
use ROHD type information to inspect LogicArray values and LogicStructure fields with their intended structure.

Find and Inspect Wires

Click a wire to highlight all of its connected segments in orange. Hover over a wire to view its signal name and hierarchy path. In an embedded or DevTools workflow that supplies current signal values, the tooltip also displays the value.

Use Find Wire with Ctrl+F or Cmd+F to search by name or hierarchy path:

search for a full path such as FloatAdder/mantissa_sum;
enter a partial name such as mantissa to find related wires;
use the arrow keys to navigate results and Enter to select one;
allow the viewer to expand collapsed blocks automatically when a result is inside them.

The result counter identifies the current match and total number of matches.

Navigate the Schematic

Action	Control
Select a wire or module	Click
Highlight all segments of a wire	Click a wire
Zoom to the highlighted wire	Double-click
Fit the complete schematic	`F`
Toggle multi-bit width overlays	Settings menu: Display widths
Find a wire	`Ctrl+F` / `Cmd+F`
Navigate wire-search results	`Up` / `Down`
Select the current search result	`Enter`
Close wire search	`Esc`
Pan	Scroll or click-drag
Zoom	`Ctrl+Scroll` / `Cmd+Scroll`

The in-application Help button contains the current interaction reference.

JSON Format Support

ROHD Schematic Viewer reads the Yosys JSON netlist format:

{
  "creator": "Yosys 0.35 (git sha1 abcdef1, clang version 15.0.0)",
  "modules": {
    "top": {
      "ports": { ... },
      "cells": { ... },
      "netnames": { ... }
    }
  }
}

See the Yosys write_json documentation for the base format and doc/netlist_json_format.md for the ROHD-specific extensions supported by the viewer.

Troubleshooting

A schematic does not load

Confirm that the file is valid Yosys JSON.
Open VS Code Developer Tools (F12) and check for errors when using the extension.
If VS Code reports that the Flutter renderer is unavailable, rebuild the extension with make build or reinstall it with make install.

A wire or connection is not visible

Expand the containing module or port.
Use Ctrl+F or Cmd+F to search for the wire by name or hierarchy path.
Confirm that the input netlist includes the relevant cells, connections, and net names.

Send Signal(s) is intentionally hidden until another compatible ROHD viewer registers in the current VS Code session. Open the other viewer, or reload the VS Code window after installing or updating an extension.

Development and Contributions

This README is the user guide. Instructions for selecting dependency modes, running Flutter configurations, packaging the VS Code extension, and troubleshooting builds are in doc/BUILD.md.