跳转至

波形编辑器 - Waveform Editor

🌊 网页端数字波形编辑工具，支持 SoC 设计

🎯 项目目标

  • 网页端波形绘制和编辑
  • 支持 SoC/IC 设计常用波形格式
  • 不受地域限制，随时随地访问
  • 支持协作和分享

🔍 类似开源项目

项目 特点 链接
GTKWave 经典波形查看器，支持 VCD/FST https://gtkwave.sourceforge.net
Surfer 现代波形查看器 GitHub
WaveDrom 数字时序图，JSON 描述 https://wavedrom.com
Verilator 仿真 + 波形生成 https://verilator.org
FSTWave 快速波形查看 GitHub

📋 功能规划

MVP（最小可行产品）

  • 网页端波形绘制
  • 支持基本波形类型（时钟、数据、总线）
  • 导入/导出 VCD 格式
  • 缩放和平移
  • 保存为图片/SVG

进阶功能

  • 支持 FST/LXT 格式
  • 波形编辑（手动绘制）
  • 信号分组和标记
  • 测量工具（周期、占空比）
  • 协作编辑
  • 版本历史

🛠️ 技术栈建议

前端

  • React / Vue.js - 主框架
  • Canvas / SVG - 波形渲染
  • D3.js - 数据可视化
  • TypeScript - 类型安全

后端（可选）

  • Node.js / Python - API 服务
  • SQLite / PostgreSQL - 数据存储
  • WebSocket - 实时协作

文件格式

  • VCD (Value Change Dump) - 标准格式
  • FST (Fast Signal Trace) - 高性能
  • JSON - 自定义格式

📁 项目结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
waveform-editor/
├── README.md
├── package.json
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── WaveformCanvas.vue
│   │   │   ├── SignalPanel.vue
│   │   │   └── Timeline.vue
│   │   ├── utils/
│   │   │   ├── vcd-parser.js
│   │   │   └── waveform-renderer.js
│   │   └── App.vue
│   └── public/
├── backend/
│   ├── server.js
│   ├── api/
│   └── storage/
└── examples/
    └── sample.vcd

⏱️ 开发计划

阶段 时间 目标
Phase 1 2 周 基础波形渲染
Phase 2 2 周 VCD 解析器
Phase 3 2 周 交互功能（缩放/平移）
Phase 4 2 周 导出和分享
Phase 5 4 周 协作功能

🎨 UI 设计参考

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
┌─────────────────────────────────────────────────┐
│  Waveform Editor                    [导入] [导出]│
├─────────────────────────────────────────────────┤
│ 信号列表  │  波形显示区域                        │
│ ─────────├──────────────────────────────────────│
│ □ clk    │  ┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐        │
│ □ reset  │  └───┘   └───────────┘   └───        │
│ □ data   │  ────────████████───────██████        │
│ □ addr   │  0x0000  0x00FF  0x0100  0x0200       │
│          │                                       │
│          │  [───────●───────] 10ns/div  [ zoom ] │
├──────────┴───────────────────────────────────────┤
│ 时间：0ns - 1000ns    信号：4    [播放] [暂停]   │
└─────────────────────────────────────────────────┘

📊 支持信号类型

类型 示例 描述
时钟 01010101 周期性方波
数据 0011ZZXX 数字信号
总线 0x1A3F 多位宽数据
模拟 ~~~~∧∧∧∧ 连续值

🚀 快速开始

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# 克隆项目
cd ~/.openclaw/workspace/projects/waveform-editor

# 安装前端依赖
cd frontend && npm install

# 启动开发服务器
npm run dev

# 访问 http://localhost:5173

🌐 部署方案

方案 1：静态托管

  • Vercel / Netlify / GitHub Pages
  • 纯前端，无需后端

方案 2：自建服务器

  • Docker 部署
  • Nginx 反向代理

方案 3：云服务

  • 阿里云 OSS + CDN
  • 腾讯云 COS

创建时间：2026-03-13