---
title: 时序图绘制软件WaveDorm的使用
updated: 2022-01-12 07:29:58Z
created: 2022-01-08 13:17:44Z
---

> 原文链接：https://blog.csdn.net/ASimpleMan1/article/details/108921294

参考文档：
[Hitchhiker 的 WaveDrom 指南](https://observablehq.com/@pygc/hitchhiker-wavedrom)
[github链接](https://github.com/wavedrom/wavedrom)

 

# 信号的定义

首先，从官方的参考开始分析。官方的第一个例子如下。代码是这样的。
`{ signal: [{ name: 'Alfa', wave: '01.zx=ud.23.45' }] }`
获得的结果呢，是这样的。
![ba72398583efdfd9979a757086ffb18c.png](../../../_resources/ba72398583efdfd9979a757086ffb18c.png)
 我们可以据此呢，得到一些答案。
绘制成如下的表格。一个符号代表的是一个周期。
![14634abfcb00f2415159507da5bbfe3f.png](../../../_resources/14634abfcb00f2415159507da5bbfe3f.png)


# 时钟的定义

还是官方的例子。代码是这样的。
```
wd({ signal: [
   { name: 'pclk', wave: 'p.......' },
   { name: 'Pclk', wave: 'P.......' },
   { name: 'nclk', wave: 'n.......' },
   { name: 'Nclk', wave: 'N.......' },
   {},
   { name: 'clk0', wave: 'phnlPHNL' },
   { name: 'clk1', wave: 'xhlhLHl.' },
   { name: 'clk2', wave: 'hpHplnLn' },
   { name: 'clk3', wave: 'nhNhplPl' },
   { name: 'clk4', wave: 'xlh.L.Hx' },
 ]})
```
具体的波形却是这样的。
![ad815cb5a73757a5c2f1c5817e2351ba.png](../../../_resources/ad815cb5a73757a5c2f1c5817e2351ba.png)

也很能说明问题，具体可以总结如下。
![98738276d3661a7143827302319cde56.png](../../../_resources/98738276d3661a7143827302319cde56.png)


注意，l、L、h、H半个周期占用了一个时钟周期的时间。

# 数据标签

将上面两者，结合起来，可以得到不错的效果，这里增加一个功能，就是给相应的数据增加标签，采用“data”关键字，一个“data”中的字符与一个数据符号相对应。包括等号与大于1的数字。

代码是这样的。
```
{ signal: [
   { name: "clk",  wave: "P......." },
   { name: "bus",  wave: "x.==.==x", data: ["head", "<o>body</o>", "tail", "data"] },
   { name: "wire", wave: "0.1..0.." }
 ]}
```
得到的结果是这样的。
![f94513aa1b721848ac720fd6929b40fe.png](../../../_resources/f94513aa1b721848ac720fd6929b40fe.png)


还可以增加低电平的表示，采用的是<o>与</o>搭配的方式实现的。

 

# 间隔与间隙

 

使用“|”起到增加间隔，或者说间隙的作用。

代码如下。
```
{ 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." }
 ]}
 ```

结果如下。

![c857ea5757743b1a8186d855adc20259.png](../../../_resources/c857ea5757743b1a8186d855adc20259.png)

 

# 周期和相位

 

周期使用的是“period”关键字，相位使用的是“phase”关键字。

代码如下。
```
{ 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" }
 ]}
```
结果如下。
![c0e379d067f2ecc42dae29493af15263.png](../../../_resources/c0e379d067f2ecc42dae29493af15263.png)


# 标题和末尾

## head/foot

head: {...} and foot: {...} 属性定义时序图之上/之下的内容.

## tick

添加与垂直标记线对齐的时间轴标签。
## tock

添加在垂直标记之间的时间轴标签。
## text

添加标题文字。
![285cdff271242702a721c9d07f6fac9a.png](../../../_resources/285cdff271242702a721c9d07f6fac9a.png)

对应的代码如下。
```
{signal: [
   {name:'clk',         wave: 'p....' },
   {name:'Data',        wave: 'x345x', data: 'a b c' },
   {name:'Request',     wave: '01..0' }
 ],
 
 head:{
    text:'WaveDrom example',
    tick:0,
  },
 
 foot:{
    text:'Figure 100',
    tock:9
  },
 
}
```
还有一些其他的可以参考官方的guide document。