使用WaveDrom绘制漂亮的时序图

WaveDrom是一个免费开源的在线数字时序图渲染引擎。它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG矢量图形，从而进行显示。WaveDrom可以嵌入到任何网页中。WaveDrom编辑器可在浏览器中运行，也可以安装在系统上，渲染引擎可以嵌入到任何网页中。

绘制数字时序图、绘制寄存器图、绘制逻辑电路图

官方网址：WaveDrom - Digital timing diagram everywhere (opens new window)

使用

打开官网，你可以看到导航栏中有Tutorial (opens new window) Editor (opens new window)这两个按钮，下面我将翻译Tutorial的内容，并在Editor中进行测试。

WaveDrom 是一个 JavaScript 应用程序。 WaveJSON 是一种描述数字时序图的格式。 WaveDrom 通过解析WaveJSON直接在浏览器中呈现图表。

元素 “signal” 是一个 WaveLanes 数组， 每个 WaveLane 都有两个必填字段：“name” 和 “wave”。

步骤 1.信号

让我们从一个快速示例开始。 以下代码将创建名为 “Alfa” 的 1 位信号，该信号的状态会随时间变化。

{ "signal" : [{ "name": "Alfa", "wave": "01.zx=ud.23.456789" }] }

“wave”字符串中的每个字符都代表一个时间段。符号“将以前的状态再延长一段时间。下面是它的外观：

步骤 2.添加时钟

数字时钟是一种特殊类型的信号。它在每个时间段内变化两次，可以有正负极性。它还可以在工作边缘上有一个可选标记。时钟块可以与其他信号状态混合，以产生时钟选通效应。代码如下：

{ 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' },
]}

以及呈现的图表：

步骤3.组合形成时序图

典型的 timing diagram 将包含 clock 和 signals （wires）。 多位信号将尝试从 “data” 数组中获取标签。

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

步骤 4.省略和间隙

{ "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." }
]}

步骤 5.组

WaveLanes 可以合并到以数组形式表示的命名组中。**['组名'， {...}， {...}， ...]**array 的第一个条目是组的名称。 这些组可以嵌套。

{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'},
  ]
]}

步骤 6.时钟相位调制

“period” 和 “phase” 参数可用于调整每个 WaveLane

{ "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" }
]}

步骤 7.config{} 属性

config：{...} 属性控制渲染的不同方面。

config：{hscale：#} 属性控制图表的水平比例。用户可以输入任何大于 0 的整数。

{ signal: [
  { name: "clk",     wave: "p...." },
  { name: "Data",    wave: "x345x",  data: ["head", "body", "tail"] },
  { name: "Request", wave: "01..0" }
  ],
  config: { hscale: 1 }
}

VScode插件安装&使用

1.在Vscode中搜索插件

     打开Vscode 软件->按下 CTRL+Shift+ X  -> 输入关键字：Waveform   -> 点击【安装】

2.在Vscode中创建Waveform 格式的Json 文件

3.绘制波形

 "Ctrl+K followed by Ctrl+D", or "Ctrl+Shift+P followed by Waveform Render: Draw" 

4.语法

名称	描述
p	表示上升沿开始的方波。如果用大写字母，会在起始边沿绘制一个箭头
n	表示下降沿开始的方波
l	表示低电平
h	表示高电平