[Geliogabalus]

Summary

New TypeScript demo: a schematic editor for Yosys JSON netlists (write_json output). The netlist is shown as a schematic laid out with ELK (@joint/layout-elk), and the Yosys JSON in the left sidebar stays in sync as you edit.

How it's built

The demo uses the workflow-builder architecture. src/system/ is copied from workflow-builder with three small changes: the default port ids are A/Y, the ELK options are tuned for schematics (junction points are collected and wire labels are left out of the layout), and there is one new attribute.

• src/yosys/ converts between Yosys JSON and the diagram data.
  • Import looks at which bits each port reads. A port that reads a whole output becomes a single wire. A port that reads part of a bus gets a split, one built from several sources gets a join, and constant bits become constant nodes.
  • Export gives every output port new net bit numbers and writes them back into each cell's connections.
  • Loading a file and saving it again keeps the same connections, and a second round produces identical output.
• src/registry/ describes each supported Yosys cell type in one definition: ports, parameters, shape and parameter mapping. To support another cell type, you add one definition.
  • First set: $not $and $or $xor $xnor $_NAND_ $_NOR_ $add $sub $mul $eq $ne $lt $gt $mux $dff $dffe $adff.
  • Unknown cells and submodule instances show up as generic blocks and are exported unchanged.
• Interactions are the same ones workflow-builder uses:
  • port menus (add, drive or disconnect)
  • the + button on wires to insert a cell
  • the ⋮ node menu (change cell type, delete)
  • the cell picker dialog, drag to connect (an input can only have one driver)
  • an inspector bound to the data, undo/redo, file drop and the minimap
• Styling follows the KiCad default schematic colour theme: wires green, buses blue with a width marker, junction dots. Wires connecting ports of different widths are drawn red and dashed.

Note on dependencies

@joint/layout-elk 4.4.0 has not been published yet. Like the demos on elk-layout-demos-refactor, package.json points to the local tarballs: file:../../.packages/joint-layout-elk.tgz plus an override that pins @joint/core to .packages/joint-core.tgz. Once the package is released, both should switch to registry versions.

Testing

• tsc --noEmit, eslint, and the webpack build all pass.

• I ran the example netlist through the converters, saved it and loaded it again; the connections came back the same.

• I tested the interactions in a headless browser with Playwright:

  • adding cells from a port
  • inserting a cell on a wire
  • drag-to-connect, and a second driver on the same input being rejected
  • a width change, undo, delete, changing a polarity, and New

  No console errors came up.

• The example counter.json is written by hand in write_json format. It's worth also checking the demo with a netlist that Yosys actually generated.

🤖 Generated with Claude Code