WireSketch 是一个用于绘制 PCB 板卡接口和接线图的轻量级网页工具。它不需要后端服务，也没有运行时依赖，直接在浏览器中即可完成板卡标注、接口定义、装配连接、自动布局和图片导出。
所有板卡与装配数据都保存在可读的 JSON 描述文件中，既方便人工维护，也适合交给 AI 识别、生成或修改。
- 从 PCB 俯视图中框选接口，定义接口名称、类型、Pin 数量和物理线序
- 明确标记 Pin 1，并通过
0° / 90° / 180° / 270°描述接口方向 - 没有 PCB 图片时，可创建带默认电路板背景、尺寸、颜色和名称的虚拟板卡
- 板卡库支持搜索、导入和删除；内置默认板卡不可删除
- 标注画布支持 2%–400% 缩放、完整适配、滚动查看和快捷缩放
- 将多块 PCB 放入装配画布，通过点击两个接口创建线束
- 装配体中的每块 PCB 可以独立移动、旋转、水平翻转和缩放
- 接口端点保持在 PCB 原始接口位置，旋转、翻转和缩放后自动重新计算
- 根据信号名称自动给导线配色，并显示两端 Pin 标签
- 信号标签优先在接口宽度内横排，空间不足时自动切换为紧凑竖排
- 根据连接关系自动识别中心板卡并生成环绕式 Wiring Diagram 布局
- 支持混合走线：接口附近直线引出，必要时正交避障
- 导出高清 PNG 接线图和自包含的装配体 JSON
- 使用浏览器
localStorage自动保存当前工作状态
WireSketch 是纯静态网页，可以直接打开 index.html，也可以启动本地 HTTP 服务：
python3 -m http.server 8080然后在浏览器访问：
http://localhost:8080
建议使用较新的 Chrome、Edge 或 Firefox。项目不需要执行 npm install。
点击板卡库右上角的 ＋ 创建新板卡。
- 有 PCB 图片：点击“选择图片”或“替换图片”，导入 PNG、JPG、WEBP 等图片。
- 导入图片方向不正时：拖动“旋转”滑块可按绝对角度实时预览，松手后自动应用并保留当前角度；也可以在数值框输入精确角度并按 Enter。程序会扩展图片边界并同步换算已有接口框。
- 图片背景需要透明时：点击“吸取透明色”，再点击图片中的背景颜色；可随时重新取色或清除。取色带少量颜色容差，可处理 JPG/WEBP 的轻微背景色差。
- 没有 PCB 图片：直接使用虚拟 PCB 背景，可调整宽度、高度、背景颜色和板卡名称。
虚拟板卡中间的名称会随板卡名称自动更新。在装配体中旋转或翻转虚拟板卡时，名称仍保持从左到右正常显示。
标注画布下方提供缩小、放大和“适配”按钮：
- 缩放范围为 2%–400%
- 按住
Ctrl或⌘滚动鼠标滚轮可快速缩放 - 图片大于可视区域时，可以使用滚动条查看完整图片
缩放只影响编辑视图，不会改变接口的归一化坐标。
在 PCB 图片上按住鼠标左键拖出矩形，即可创建接口。拖动已有的接口框可以调整其位置，接口框会被限制在 PCB 图片范围内。选中接口后，在右侧填写：
- 接口名称，例如
UART1、CAN、VTX-DJI - 接口类型，例如 UART、I²C、SPI、电源或通用接口
- Pin 数量
- 从 Pin 1 开始的物理线序
- 接口旋转方向和 Pin 1 方位
选择以下接口类型时，会自动应用对应的默认针脚数量和线序：
| 接口类型 | 默认线序 |
|---|---|
| UART | VCC / GND / RX / TX |
| I²C | VCC / GND / SCL / SDA |
| SPI | VCC / GND / SCLK / MISO / MOSI / CSN |
| 电源 | V+ / G |
| USB | VCC / GND / DP / DN |
应用默认值后仍可手动调整针脚数量和信号名称。通用与 GPIO 类型不会覆盖当前线序。
接口方向约定如下：
| 旋转角度 | Pin 1 方位 |
|---|---|
0° |
左侧 |
90° |
上侧 |
180° |
右侧 |
270° |
下侧 |
画布中的红色 P1 标记就是物理线序起点。pins 数组的第一个元素永远对应 Pin 1，不应按字母排序。
点击“导出 PCB 描述”生成 .pcb.json 文件。图片会作为 Data URL 嵌入 JSON，因此描述文件可以独立复制和导入。
左侧的“导入描述文件”支持一次导入一个或多个 PCB 描述。用户创建的板卡可以删除，内置示例板卡会保持锁定。
仓库中包含两份完整示例：
切换到“连接装配”界面，从左侧点击或拖拽板卡到装配画布。同一种 PCB 可以添加多次，每次添加都会创建一个独立实例。
选中或悬停在板卡上时，板卡下方会显示控制按钮：
| 控件 | 作用 |
|---|---|
− / ＋ |
以 10% 为步进调整 PCB 大小，范围 50%–200% |
⇆ |
水平翻转 PCB |
↻ |
顺时针旋转 90° |
× |
从装配体中移除 PCB 及其相关连接 |
旋转、翻转和缩放会同时作用于 PCB 图片、接口位置、Pin 端点、导线路由、避障区域和导出结果。
选中板卡后可在右侧启用“固定板卡位置”。固定板卡不能拖动，执行自动美化布局时也会保持原坐标；旋转、翻转和缩放仍然可用。
依次点击两块板卡上的接口即可建立连接。默认按照相同针脚号一一连接：
Pin 1 → Pin 1
Pin 2 → Pin 2
Pin 3 → Pin 3
默认连接按整条线束管理：选择其中任意导线后执行删除，会删除该接口连接中的整条线束。需要逐根手动连接时，先点击端口，在右侧“端口属性”中开启“单信号线连接模式”；对端端口也必须开启该模式。点击单信号端口会在画布上展开大号 Pin 托盘；选中起点后，其他可连接端口的托盘会自动展开，直接点击目标信号即可完成连接。同一个 Pin 可以扇出连接到多个端点，托盘会显示当前连接数量；仅完全相同的 Pin 对不允许重复创建。
装配界面右侧的属性栏可设置全局默认线宽、接口信号标签间距和两端信号标签。点击线束中的任意一根实际信号线后，还可以为该信号线单独设置：
- 是否显示端点 1、端点 2 的信号名
- 在线束中间显示的自定义名称
- 覆盖全局默认值的线宽
- 覆盖全局默认值的所属线束导线间距
- 覆盖全局默认值的折线圆角半径
单根信号线未覆盖的属性会继续跟随全局配置，画布显示和导出的图片保持一致。
点击装配画布中的板卡后，属性栏会列出该实例的所有接口。每个接口都可以单独调整 5V、GND、3V3 等信号名称标签之间的间距。该设置只改变文字标签排版，不改变导线或电气端点；留空或点击“全部恢复全局标签间距”即可重新继承全局值。
“标签间距”和“导线间距”是两个独立属性：前者只改变接口旁文字标签的位置，后者改变同一线束中多根路由线之间的距离。
“折线圆角”为 0 时保持直角，大于 0 时会在路由拐点生成圆角；短线段会自动限制实际半径，避免曲线越过相邻拐点。
具体关系会写入装配体的 pinMap。UART 等协议可能需要 TX/RX 交叉连接，此时应在 JSON 中明确修改 pinMap，不要仅根据同名信号猜测。
点击已有导线后按 Delete 或 Backspace 可以删除连接：默认模式删除整条线束，单信号线模式创建的连接只删除所选信号线。
点击“自动美化布局”后，程序会把连接度最高的 PCB 作为中心板卡，并根据接口所在方向把外设排列到四周。
同一接口的 Pin 标签会作为一个整体排版：
- 接口空间足够时使用小字号横排
- 横排宽度超过接口范围时自动切换为竖排
- 标签不会再为了避让而把接口端点拉到远离真实接口的位置
也可以直接拖动每块 PCB 手工调整位置。
未选中对象时，右侧全局属性可用滑块调整装配画布宽度和高度。画布超出工作区后可滚动查看；鼠标位于画布上时直接滚动滚轮即可缩放，并保持鼠标指向的逻辑位置不变。
- “导出图片”：可自行选择 1×、2×、3× 或 4× 分辨率倍率，以高质量矢量栅格化生成 PNG（最大边 12000 px），不受当前画布缩放比例影响；图片只保留装配名称，不显示板卡或线束数量统计
- “导出 SVG”：生成可无损缩放的 SVG 文件，导线、文字和路径保持矢量格式，板卡图片以原始素材嵌入
- “导出装配体”：生成
.assembly.json文件 - “打开装配体”：重新载入已有装配描述
装配体 JSON 会嵌入所使用的 PCB 描述，因此可以作为单个文件交付或发送给 AI 继续处理。
| 所在界面 | 快捷键 | 功能 |
|---|---|---|
| 板卡标注 | Delete / Backspace |
删除当前接口 |
| 板卡标注 | Ctrl/⌘ + 鼠标滚轮 |
缩放 PCB 图片 |
| 连接装配 | R |
将选中 PCB 顺时针旋转 90° |
| 连接装配 | F |
水平翻转选中 PCB |
| 连接装配 | Delete / Backspace |
删除选中的导线或 PCB |
在输入框或下拉框中编辑时，装配体快捷键不会触发。
当前装配体格式版本为 WireSketch 1.6.0，分为两类文件：
- PCB 描述：
kind: "wiresketch/pcb" - 装配体描述：
kind: "wiresketch/assembly"
完整字段定义和 AI 使用规则见：
装配体导入和离线渲染仅接受 schemaVersion: "1.6.0"，不会迁移旧版装配体。
网页和命令行共用同一个 SVG 渲染器。可以直接把装配体 JSON 渲染为 SVG：
node scripts/render-assembly.js assembly.json assembly.svg如果省略输出路径，脚本会根据输入文件名生成 .svg 文件：
node scripts/render-assembly.js assembly.json这个功能适合自动化测试，也适合让 AI 修改装配体后立即检查实际接线图。
PowerFin PCB 描述可以通过脚本重新生成：
node scripts/generate-powerfin-pcbs.js.
├── index.html 网页结构
├── styles.css 界面和接线图样式
├── app.js 标注、装配、路由和导出逻辑
├── FORMAT.md JSON 格式与 AI 使用规范
├── schemas/
│ ├── pcb.schema.json PCB Schema
│ └── assembly.schema.json 装配体 Schema
├── examples/
│ ├── ai-board.pcb.json PCB 示例
│ └── ai-assembly.assembly.json 装配体示例
└── scripts/
├── render-assembly.js 离线 SVG 渲染
└── generate-powerfin-pcbs.js PowerFin 描述生成器
WireSketch 不会主动上传 PCB 图片或装配数据。网页状态保存在当前浏览器的 localStorage 中，导入和导出都在本地完成。
清理浏览器站点数据会删除自动保存的工作状态，重要板卡和装配体请及时导出为 JSON 文件。