A VSCode Editor for End-to-End Analog/RF IC Design
schelectron is an open-source schematic capture and symbol design tool built as a VSCode extension. It uses an SVG-based file format that's portable, git-friendly, and viewable anywhere.
Jump to Installation | Development | Roadmap
- Design Hierarchy View: Visual tree representation of your full design structure in the sidebar
- Script Integration: Python generator scripts (.py) integrate directly with the hierarchy
- Automatic Symbol Linking: Scripts automatically link to symbols via naming convention (Name.py → Name.sym.svg)
- Drawing Tools: Lines, rectangles, circles, and text with click-to-click placement
- Port Status Panel: Color-coded indicators showing port mapping between symbols and schematics
- Double-Click Navigation: Jump directly to associated schematics or generator scripts
- Wire Drawing: Intuitive wire routing with single-click termination
- PDK Component Browser: Sidebar-based component selector for PDK primitives
- Power Ports: Built-in VSS/VDD port support
- Hdl21 Compatible: Schematics import seamlessly into Hdl21-based Python programs
- Script Templates: Create new generator scripts with HDL21 templates
- Validation: Visual indicators for script and symbol consistency
schelectron schematics are not like SVGs—they are SVGs.
- Single File: Each schematic is one file. No dependencies, no linked database.
- Universal: Any browser, any OS can render them. GitHub displays them natively.
- Git-Friendly: Text-based format diffs and merges cleanly.
- Extensible: Embed custom annotations, layout intent, or links to related documents.
Schematics use the .sch.svg extension. Symbols use .sym.svg. The VSCode extension automatically opens these in the appropriate editor mode.
The editor requires Yarn as its only dependency.
On macOS:
brew install yarnOn Debian/Ubuntu:
sudo apt install nodejs npm
sudo npm install -g n && sudo n stableBuild and install:
cd Hdl21SchematicEditor/packages/VsCodePlugin/
yarn
yarn package
code --install-extension hdl21-schematics-vscode-0.0.1.vsixThe Python importer enables importing schematics as Hdl21 generators:
pip install hdl21schematicimporterUsage:
import hdl21schematicimporter
# Import a schematic as a generator
from . import my_circuit # imports my_circuit.sch.svgSVG schematics are interpreted by two categories of programs:
- General-purpose viewers (browsers, InkScape) that render them as pictures
- Circuit importers that extract connectivity and device information
This section specifies the schema for circuit importers.
Each schematic is an SVG element stored in a .sch.svg file:
<?xml version="1.0" encoding="utf-8"?>
<svg width="1600" height="800" xmlns="http://www.w3.org/2000/svg">
<!-- Content -->
</svg>Size: Default is 1600x800 pixels. Dictated by width and height attributes.
Coordinates: Origin at top-left, x increases right, y increases down. All elements placed on a 10x10 pixel grid.
Each schematic contains four types of elements:
- Instances: Circuit element placements
- Wires: Connections between elements
- Ports: External interface annotations
- Dots: Junction indicators for wire connections
Instances are SVG groups with class hdl21-instance:
<g class="hdl21-instance" transform="matrix(1 0 0 1 X Y)">
<g class="hdl21-elements-nmos">
<!-- Symbol graphics -->
</g>
<text class="hdl21-instance-name">inst_name</text>
<text class="hdl21-instance-of">Nmos(w=1*µ, l=20*n)</text>
</g>Fields:
name: Unique instance identifierof: Python code string defining the device typekind: Element type (from the symbol class)
Wires are SVG groups with class hdl21-wire:
<g class="hdl21-wire">
<path class="hdl21-wire" d="M 100 150 L 100 350 L 200 350" />
<text class="hdl21-wire-name">net1</text>
</g>Wire paths follow Manhattan routing (orthogonal segments only). Wires with the same name are connected.
Ports annotate wires as external interfaces:
<g class="hdl21-port" transform="matrix(1 0 0 1 X Y)">
<g class="hdl21-ports-input">
<!-- Symbol graphics -->
</g>
<text class="hdl21-port-name">portname</text>
</g>Dots indicate wire junctions:
<circle cx="100" cy="200" class="hdl21-dot" />Dots are visual aids only—they don't affect circuit semantics.
Elements support 8 orientations: 4 rotations × optional reflection. Encoded in the SVG matrix transform:
| a | b | c | d | Rotation | Reflected |
|---|---|---|---|---|---|
| 1 | 0 | 0 | 1 | 0° | No |
| 0 | 1 | -1 | 0 | 90° | No |
| -1 | 0 | 0 | -1 | 180° | No |
| 0 | -1 | 1 | 0 | 270° | No |
| 1 | 0 | 0 | -1 | 0° | Yes |
| 0 | 1 | 1 | 0 | 90° | Yes |
| -1 | 0 | 0 | 1 | 180° | Yes |
| 0 | -1 | -1 | 0 | 270° | Yes |
The built-in element library includes SPICE primitives: NMOS, PMOS, NPN, PNP, resistors, capacitors, inductors, diodes, and voltage/current sources.
Each element defines:
- A pictorial symbol
- A list of named, located ports
The of string on each instance determines the actual device—symbols are technology-agnostic.
VSCode Extension (debug mode):
cd Hdl21SchematicEditor/packages/VsCodePlugin/
yarn
yarn watch
# Press F5 in VSCode to launch debug modeOr open the repository root in VSCode and press F5.
Python Importer:
cd Hdl21SchematicImporter
pip install -e ".[dev]"
pytestThe editor is a TypeScript monorepo:
- VsCodePlugin — VSCode extension entry point
- EditorCore — React/Two.js editor UI and drawing logic
- SchematicsCore — Data model and SVG import/export
- PlatformInterface — Messaging abstraction between editor and host
schelectron is building toward end-to-end analog/RF IC design:
- SPICE/FDTD simulation integration
- GDSFactory pcell conversion
- Layout editing capabilities
- DRC/LVS/PEX tooling
Thanks to these wonderful people who have contributed to this project:
 Dan Fritchman 💻 📖 🎨 🤔 🚧 |
 Arya Reais-Parsi 💻 |
 Zeyi Wang 💻 |
 Thomas Pluck 💻 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!