WaveDrom时序图完全教程：从基础波形到复杂信号交互

WaveDrom是一款功能强大的开源数字时序图渲染引擎，专为硬件工程师、数字电路设计师和嵌入式开发者设计。这个强大的工具能够将简单的JSON格式描述转换为精美的SVG矢量图形时序图，极大简化了数字时序文档的创建过程。## 为什么选择WaveDrom？🚀WaveDrom的核心优势在于其简洁高效的**WaveJSON格式**。与传统的绘图工具不同，WaveDrom采用纯文本描述，这使得时序图

穆花钥Norma

1205人浏览 · 2026-03-24 04:49:01

穆花钥Norma · 2026-03-24 04:49:01 发布

WaveDrom时序图完全教程：从基础波形到复杂信号交互

【免费下载链接】wavedrom :ocean: Digital timing diagram rendering engine 项目地址: https://gitcode.com/gh_mirrors/wa/wavedrom

WaveDrom是一款功能强大的开源数字时序图渲染引擎，专为硬件工程师、数字电路设计师和嵌入式开发者设计。这个强大的工具能够将简单的JSON格式描述转换为精美的SVG矢量图形时序图，极大简化了数字时序文档的创建过程。

为什么选择WaveDrom？🚀

WaveDrom的核心优势在于其简洁高效的WaveJSON格式。与传统的绘图工具不同，WaveDrom采用纯文本描述，这使得时序图可以像代码一样进行版本控制、复用和维护。无论是简单的时钟信号还是复杂的总线交互，WaveDrom都能轻松应对。

快速入门：你的第一个时序图

要开始使用WaveDrom，你只需要几行简单的WaveJSON代码。以下是一个基础示例，展示了时钟信号、数据总线和控制信号的时序关系：

{ signal: [
  { name: "clk", wave: "p......" },
  { name: "bus", wave: "x.34.5x", data: "head body tail" },
  { name: "wire", wave: "0.1..0." }
]}

这段代码会生成一个包含时钟脉冲、总线数据和单线信号的完整时序图。WaveDrom支持多种信号类型，包括时钟（p/P/n/N）、数据总线（x/数字）、单线信号（0/1/z/x）等。

核心功能详解 📊

1. 信号波形语法

WaveDrom的波形语法直观易懂：

p / P：正时钟脉冲
n / N：负时钟脉冲
0 / 1：逻辑低/高电平
x：未知状态
z：高阻态
.：保持前一个状态
=：总线相等状态
数字（2-9）：多值总线状态

2. 分组与层次结构

对于复杂的系统，WaveDrom支持信号分组功能，这在test/test.html中有详细示例：

{ signal: [
  { name: 'clk', wave: 'p..Pp..P'},
  ['Master',
    ['ctrl',
      {name: 'write', wave: '01.0....'},
      {name: 'read', wave: '0...1..0'}
    ],
    { name: 'addr', wave: 'x3.x4..x', data: 'A1 A2'},
    { name: 'wdata', wave: 'x3.x....', data: 'D1'},
  ],
  {},
  ['Slave',
    ['ctrl',
      {name: 'ack', wave: 'x01x0.1x'},
    ],
    { name: 'rdata', wave: 'x.....4x', data: 'Q2'},
  ]
]}

3. 寄存器位域描述

除了时序图，WaveDrom还支持寄存器位域描述，这在test/reg-vl.json5中有所体现：

{reg:[
  {bits: 7, name: 0x07, attr: ['VLxU,VLE zero-extended', 'VLxU,VLE zero-extended, fault-only-first']},
  {bits: 5, name: 'vd', attr: 'destination of load', type: 2},
  {bits: 3, name: 'width'},
  {bits: 5, name: 'rs1', attr: 'base address', type: 4}
]}

实战应用场景 🛠️

场景一：内存控制器时序

以下是一个DDR内存控制器的时序示例，展示了地址命令、数据选通和数据总线的精确时序关系：

{ signal: [
  { name: "CK", wave: "P.......", period: 2 },
  { name: "CMD", wave: "x.3x=x4x=x=x=x=x", data: "RAS NOP CAS NOP NOP NOP NOP", phase: 0.5 },
  { name: "ADDR", wave: "x.=x..=x........", data: "ROW COL", phase: 0.5 },
  { name: "DQS", wave: "z.......0.1010z." },
  { name: "DQ", wave: "z.........5555z.", data: "D0 D1 D2 D3" }
]}

场景二：握手协议时序

主从设备间的握手协议是数字系统中常见的场景，WaveDrom可以清晰展示请求-应答时序：

{ signal: [
  { name: "clk", wave: "p.....|..." },
  { name: "Data", wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
  { name: "Request", wave: "0.1..0|1.0" },
  {},
  { name: "Acknowledge", wave: "1.....|01." }
]}

集成与部署指南 🔧

网页集成方法

将WaveDrom集成到网页中非常简单，只需三个步骤：

引入WaveDrom库文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/default.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/wavedrom.min.js"></script>

设置页面加载事件：

<body onload="WaveDrom.ProcessAll()">

在页面中插入WaveJSON代码：

<script type="WaveDrom">
{ signal: [
  { name: "clk", wave: "p......" },
  { name: "bus", wave: "x.34.5x", data: "head body tail" },
  { name: "wire", wave: "0.1..0." }
]}
</script>

Vue.js集成

对于现代前端框架，WaveDrom也提供了便捷的集成方式。查看vue/WaveDrom.vue组件，可以看到如何创建响应式的WaveDrom组件：

<template>
  <div>
    <textarea v-model="text" placeholder="JSON (WaveDrom)"></textarea>
    <br>
    <div :id="'a' + id"></div>
  </div>
</template>