Sysmaker Schematic Editor

A visual, canvas-based schematic editor for tscircuit built as a VS Code web extension. Design circuits on a drag-and-drop canvas; the editor keeps your TSX source in sync automatically.

Features

Visual canvas editor — place, move, and connect components with a point-and-click interface
TSX round-trip — the canvas is always authoritative; tscircuit JSX is generated from it via Babel AST manipulation
Component catalog — built-in library of resistors, capacitors, ICs, connectors, and other primitives
Net system — named nets resolve automatically; components sharing a net name are auto-wired
Automatic layout — ELK-based layout engine arranges components for readability
Subcircuits & symbols — define reusable subcircuits and custom schematic symbols
Multi-workspace — manage several projects in one session with named workspaces
Sidebar integration — dedicated activity bar panel with tree views for workspaces, files, schematics, subcircuits, symbols, and the component library

Requirements

VS Code 1.118.0 or later
pnpm (for development)

Getting Started

Install dependencies

pnpm install

Development build (watch mode)

pnpm run watch-web

Launch in browser for manual testing

pnpm run run-in-browser

This opens a Chromium window with the extension loaded. Use the Sysmaker icon in the activity bar to open the editor.

Production build & package

pnpm run package

This runs webpack in production mode and produces sysmaker-schematic-editor-x.x.x.vsix in the project root.

To build the bundles only (without packaging):

pnpm run package-web

Install in code-server

This extension is a web extension and works in code-server without modification.

CLI:

code-server --install-extension sysmaker-schematic-editor-0.0.2.vsix

UI: Extensions panel → ... → Install from VSIX…

Commands

Command	Description
`Sysmaker: Open Schematic Editor`	Open the canvas editor webview
`Sysmaker: New Workspace`	Create a new project workspace
`Sysmaker: Switch to Workspace`	Make a workspace active
`Sysmaker: Rename Workspace`	Rename an existing workspace
`Sysmaker: Delete Workspace`	Remove a workspace
`Sysmaker: New Schematic Sheet`	Add a board-level schematic file
`Sysmaker: New Subcircuit`	Add a reusable subcircuit file
`Sysmaker: New Symbol`	Add a custom schematic symbol
`Sysmaker: Insert Subcircuit`	Insert a subcircuit into the active canvas

Development

Other useful commands

pnpm run compile-web   # one-shot development build
pnpm run lint          # ESLint
pnpm run test          # compile then run all tests in Chromium
pnpm exec tsc --noEmit # type-check without emitting (catches webview types too)

Project structure

src/
  web/
    extension.ts          # extension host entry (WebWorker target)
    test/suite/           # Mocha tests (all *.test.ts run together)
  webview/
    index.tsx             # webview UI entry (browser target)
    store/
      editorStore.ts      # Zustand store — single source of truth
    catalog/              # component registry (parts, connectivity, primitives)
    net/                  # net resolution and auto-wiring
    utils/
      elkLayout.ts        # ELK automatic layout
      semanticLayout.ts   # net-role-aware arrangement
    types/
      schematic.ts        # pixel-level pin layouts for canvas renderer
      exportGraph.ts      # intermediate IR for TSX export
dist/
  web/extension.js        # compiled extension host bundle
  webview/webview.js      # compiled webview bundle

Architecture notes

The extension uses two separate webpack bundles built together:

Extension host (webworker target) — runs in VS Code's web worker; no Node.js APIs allowed.
Webview UI (web target) — standard browser environment running the React/Zustand canvas.

The two sides communicate via webview.postMessage() / webview.onDidReceiveMessage().

All editor state lives in a virtual in-memory filesystem (fsMap) — files are never written to disk directly. A typical project layout inside fsMap:

schematics/main.tsx        # board-level entry
subcircuits/*.tsx           # reusable subcircuit definitions
symbols/*.tsx               # custom symbol components
editor/meta.json            # layout cache and net anchors
project.json                # project name and version

每個檔案的功能說明

Extension Host（VS Code 擴充主機端）

`src/web/extension.ts`

整個擴充的進入點，執行於 VS Code 的 WebWorker 環境中（沒有 Node.js API）。負責：

建立 WebviewPanel，把 webview.js 注入 HTML 頁面
定義並註冊所有 VS Code 指令（新建 workspace、新建 schematic 等）
管理 5 個 Sidebar tree view（WorkspacesProvider、SchematicsProvider、SubcircuitsProvider、SymbolsProvider、CatalogViewProvider）
透過 postMessage 與 Webview 雙向通訊
在有工作資料夾時，用 vscode.workspace.fs 把檔案讀寫到磁碟；否則退回 context.globalState

`src/web/test/suite/extension.test.ts` / `index.ts`

Mocha 測試套件的入口與測試檔。所有 *.test.ts 會被 @vscode/test-web 在 Chromium 裡一次執行完。

Webview UI 主要進入點

`src/webview/index.tsx`

Webview bundle 的進入點（瀏覽器環境）。負責：

呼叫 initVscodeApi() 取得 VS Code API 實例（只能呼叫一次）
覆寫 window.alert / window.confirm，把它們轉發到 Extension Host 顯示原生對話框
監聽來自 Extension Host 的所有訊息（openFile、createFile、loadWorkspaces 等）並分派到 Zustand store
訂閱 store 變化，把 sidebar 快照和 inspector 快照推回 Extension Host
把 React 應用程式掛載到 #root

`src/webview/App.tsx`

React 應用程式根元件。根據 activeFilePath 判斷目前開啟的是哪種檔案，切換顯示：

Canvas（電路圖）模式
SymbolCanvas（符號編輯器）模式
CodeView（原始碼檢視）模式
也負責 Symbol 的儲存與匯出（把 .symbol.json 轉為 TSX）

`src/webview/catalogView.tsx`

Catalog Sidebar（次要側欄）的獨立入口點，作為 CatalogViewProvider 的 webview 內容。顯示可放置的零件清單，點擊後發送 placeComponent 訊息給 Extension Host，再由 Extension Host 轉發給主 Webview。

`src/webview/inspectorView.tsx`

Inspector Sidebar（次要側欄）的獨立入口點。接收 inspectorUpdate 訊息，渲染選取零件的屬性面板（EnhancedPropertiesPanel）；使用者修改屬性後，透過 inspectorPropertyChange 訊息回傳給主 Webview 的 store。

UI 元件（`src/webview/components/`）

檔案	功能
`Canvas.tsx`	主畫布。處理拖放、框選、連線（wiring）、縮放平移、SVG 渲染所有已放置零件與導線。
`Header.tsx`	頂部工具列。包含 ZIP 匯入/匯出、Layout 自動排版按鈕、開啟檔案等動作。
`EditorTabs.tsx`	顯示目前開啟的檔案分頁，點擊切換 `activeFilePath`。
`CodeView.tsx`	顯示目前檔案的原始 TSX 碼或匯出預覽，支援「source」與「export」兩個 tab。
`EnhancedPropertiesPanel.tsx`	選取零件時顯示的完整屬性編輯面板，支援一般零件屬性與 Subcircuit 建立流程。
`PropertiesPanel.tsx`	舊版簡易屬性面板（現已被 `EnhancedPropertiesPanel` 取代）。
`CatalogPanel.tsx`	主 Webview 內嵌的 Catalog 面板（Sidebar 版本使用 `catalogView.tsx`）。
`SchematicSymbol.tsx`	渲染單一零件的 SVG 符號圖形（接腳、形狀、標籤）。
`SymbolCanvas.tsx`	符號編輯器畫布，用來繪製自訂 IC 符號（接腳位置、形狀路徑）。
`SymbolPropertiesPanel.tsx`	符號編輯器的屬性面板（選取接腳或形狀時顯示）。
`FileTree.tsx`	Webview 內的檔案樹（已被 Sidebar tree view 取代，保留作備用）。
`StatusBar.tsx`	底部狀態列，顯示目前檔案類型、零件數、Net 數。
`WiringPanel.tsx`	連線操作輔助面板（顯示可連接的 pin 列表）。

Zustand Store（`src/webview/store/`）

`store/editorStore.ts`

整個應用程式的唯一狀態樹，由 Zustand 管理。儲存：

fsMap：虛擬檔案系統（路徑 → 內容字串）
placedComponents：畫布上所有已放置的零件
wires：所有導線連接
viewport：目前縮放與平移狀態
workspaces：所有 workspace 與 activeWorkspaceId
selectedComponentIds、activeFilePath 等 UI 狀態
全部 action：新增/更新/刪除零件、連線、Undo/Redo、Subcircuit 建立、TSX 重新生成、workspace 管理等

`store/workspaceFs.ts`

處理 workspace 的虛擬檔案系統初始化。提供：

createDefaultWorkspaceFsMap()：建立一個含有預設 schematics/main.tsx、subcircuits/index.ts、symbols/index.ts、editor/meta.json 的初始檔案集合
exportWorkspaceJson() / importWorkspaceJson()：把整個 workspace 序列化/反序列化成 JSON

`store/metaHelpers.ts`

讀寫 editor/meta.json（存在 fsMap 裡）。這個 JSON 儲存 Net Anchor 的位置（netAnchors）與 layout 快取，讓自動 net label 的位置可以被持久保存。

Catalog（`src/webview/catalog/`）

檔案	功能
`index.ts`	整合所有 catalog 項目，匯出 `CATALOG` 查找表與 `getCatalogItem(id)` / `getAllCatalogItems()`。
`parts.ts`	定義所有被動元件與主動元件：Resistor、Capacitor、Inductor、Diode、Transistor、LED、Switch、IC Chip、自訂 Chip、Pin Header、Test Point、Voltage Source/Probe 等。
`connectivity.ts`	定義連線類元件：Trace（導線）、Net Label、Net Port、Net（net 節點）。
`primitives.ts`	定義繪圖圖元：Schematic Line、Arc、Text、Port（符號接腳）等，主要用於符號編輯器。

每個 CatalogItem 提供：

metadata（id、label、kind、editablePropsSchema、defaultProps）
emitTSX(props)：根據屬性生成對應的 tscircuit JSX 字串

Net 系統（`src/webview/net/`）

檔案	功能
`NetRegistry.ts`	把 net 名稱（如 `VCC`、`GND`、`SPI_CLK`）映射到穩定的 ID，並推斷每個 net 的語意角色（power、ground、spi、i2c、clock 等）。`autoWireCommonNets()` 利用它來自動連接同名 net 的零件。
`electricalGraph.ts`	從 `placedComponents` + `wires` 建構 `ElectricalGraphModel`：把所有接腳位置、導線段、節點（Junction）整合成圖結構，供 layout 與 netlist 使用。
`extractNetlist.ts`	從 `ElectricalGraphModel` 提取完整的 netlist（每個 net 包含哪些元件接腳）。
`junctionGraph.ts`	處理導線的幾何交叉判斷（Union-Find 演算法），判斷哪些線段實際相交形成節點（Junction）。

Utils（`src/webview/utils/`）

檔案	功能
`tsxManipulator.ts`	使用 `@babel/parser` + `@babel/traverse` + `@babel/generator` 操作 TSX AST，支援新增/刪除/更新零件屬性，以及從畫布狀態完整重建 TSX 原始碼（`regenerateTSX()`）。
`exportCompiler.ts`	把 `ExportGraph`（中間 IR）編譯成 tscircuit JSX 字串，包含 trace 路由點的序列化。
`elkLayout.ts`	呼叫 `elkjs`（自帶 bundled 版，無需 Web Worker）執行自動電路圖排版。把 `PlacedComponent` 轉換為 ELK 節點/邊，取回座標後更新 store。
`semanticLayout.ts`	在送給 ELK 之前，根據零件語意（IC、去耦電容、電源符號、類比等）預先分群、決定哪些 net 用 label 策略而非拉線，讓 ELK 結果更易讀。
`fileClassification.ts`	根據檔案路徑與內容（是否有 `<board>`、`<subcircuit>`、`symbol=` 等特徵）判斷 `ActiveFileType`，決定要顯示哪個編輯器模式。
`sidebarBridge.ts`	從 Zustand store 快照建構 `SidebarState`，供 Extension Host 更新 sidebar tree view。
`projectManager.ts`	解析 fsMap 中所有檔案，建立 subcircuit registry、symbol registry、依賴圖（dependency graph）；也處理 ZIP 批次匯入/匯出。
`symbolDocument.ts`	讀寫 `.symbol.json` 符號文件格式；把符號文件轉成 TSX 零件程式碼（`generateSymbolTsx()`）；把現有 TSX 逆向解析回符號文件（`importSymbolTsxToDocument()`）。
`coordinateScale.ts`	畫布像素座標與 tscircuit schematic 座標（單位 mm）之間的換算，固定 scale 為 20px/unit。
`vscodeApiSingleton.ts`	包裝 `acquireVsCodeApi()`（只能呼叫一次），提供全域唯一的 `vscodeApi` 實例給 store 和 `index.tsx` 使用。
`previewRenderer.ts`	預留的 preview 渲染框架（目前是 stub），未來用來把 TSX 編譯成 SVG 預覽。

Types（`src/webview/types/`）

檔案	功能
`catalog.ts`	核心型別：`CatalogItem`、`PlacedComponent`、`WireConnection`、`FSMap`、`EditorState`、`PropSchema` 等。
`schematic.ts`	每種零件類型的接腳像素佈局（`COMPONENT_SCHEMATICS`），供 Canvas 渲染時計算接腳位置。
`exportGraph.ts`	中間 IR 型別：`ExportGraph`、`ExportTrace`、`ExportNetLabel`、`ExportNode` 等，是畫布狀態到最終 TSX 的橋樑。
`electricalGraph.ts`	電氣圖型別：`ElectricalGraphModel`、`Net`、`Port`、`Junction`、`WireSegment` 等。
`electricalTruth.ts`	更高層的電氣真值型別，用於語意 layout 分析。
`workspace.ts`	Workspace 相關型別：`StoredWorkspaceState`、`WorkspaceExport`、`StoredProjectState` 等。
`project.ts`	專案管理型別：`SubcircuitDefinition`、`SymbolDefinition`、`DependencyGraph`、`FileTreeNode` 等。
`schematicView.ts`	Schematic 視圖相關型別。
`symbolDocument.ts`	符號文件格式型別：`SymbolDocument`、`SymbolPort`、`SymbolShape`、`SymbolToolMode` 等。
`catalog.ts` 內的 `ExposedPortSelection`	Subcircuit 建立時，選擇要暴露哪些接腳的型別。

Config（`src/webview/config/`）

`config/paths.ts`

動態設定 subcircuits 資料夾路徑（預設 subcircuits/），可由 Extension Host 透過 configUpdate 訊息覆蓋。提供 getSubcircuitsFolder()、getSubcircuitsPrefix()、getSubcircuitsIndexPath() 等 getter。

Lib（`src/webview/lib/`）

檔案	功能
`lib/parts/Potentiometer.tsx`	可變電阻（電位器）的 React 零件元件，供 catalog 使用。
`lib/patches/index.ts`	Patch 系統：定義對舊版 fsMap 資料格式的遷移補丁，在載入時自動修正不相容的舊資料。

External Assets

KiCad 符號庫

KiCad 官方符號庫透過 GitHub API 動態抓取，無需本地 clone。Extension 啟動時會呼叫 https://api.github.com/repos/KiCad/kicad-symbols 取得符號庫清單，並在使用者選取符號時按需下載內容，結果會快取於 context.globalState。

License

MIT

sysmaker schematic editor

chia0419

Sysmaker Schematic Editor

Features

Requirements

Getting Started

Install dependencies

Development build (watch mode)

Launch in browser for manual testing

Production build & package

Install in code-server

Commands

Development

Other useful commands

Project structure

Architecture notes

每個檔案的功能說明

Extension Host（VS Code 擴充主機端）

`src/web/extension.ts`

`src/web/test/suite/extension.test.ts` / `index.ts`

Webview UI 主要進入點

`src/webview/index.tsx`

`src/webview/App.tsx`

`src/webview/catalogView.tsx`

`src/webview/inspectorView.tsx`

UI 元件（`src/webview/components/`）

Zustand Store（`src/webview/store/`）

`store/editorStore.ts`

`store/workspaceFs.ts`

`store/metaHelpers.ts`

Catalog（`src/webview/catalog/`）

Net 系統（`src/webview/net/`）

Utils（`src/webview/utils/`）

Types（`src/webview/types/`）

Config（`src/webview/config/`）

`config/paths.ts`

Lib（`src/webview/lib/`）

External Assets

KiCad 符號庫

License

sysmaker schematic editor

chia0419

Sysmaker Schematic Editor

Features

Requirements

Getting Started

Install dependencies

Development build (watch mode)

Launch in browser for manual testing

Production build & package

Install in code-server

Commands

Development

Other useful commands

Project structure

Architecture notes

每個檔案的功能說明

Extension Host（VS Code 擴充主機端）

src/web/extension.ts

src/web/test/suite/extension.test.ts / index.ts

Webview UI 主要進入點

src/webview/index.tsx

src/webview/App.tsx

src/webview/catalogView.tsx

src/webview/inspectorView.tsx

UI 元件（src/webview/components/）

Zustand Store（src/webview/store/）

store/editorStore.ts

store/workspaceFs.ts

store/metaHelpers.ts

Catalog（src/webview/catalog/）

Net 系統（src/webview/net/）

Utils（src/webview/utils/）

Types（src/webview/types/）

Config（src/webview/config/）

config/paths.ts

Lib（src/webview/lib/）

External Assets

KiCad 符號庫

License

`src/web/extension.ts`

`src/web/test/suite/extension.test.ts` / `index.ts`

`src/webview/index.tsx`

`src/webview/App.tsx`

`src/webview/catalogView.tsx`

`src/webview/inspectorView.tsx`

UI 元件（`src/webview/components/`）

Zustand Store（`src/webview/store/`）

`store/editorStore.ts`

`store/workspaceFs.ts`

`store/metaHelpers.ts`

Catalog（`src/webview/catalog/`）

Net 系統（`src/webview/net/`）

Utils（`src/webview/utils/`）

Types（`src/webview/types/`）

Config（`src/webview/config/`）

`config/paths.ts`

Lib（`src/webview/lib/`）