Waveform Render 安装及样例拆解

---

前言

本文记录Waveform Render 在Vscode 中的安装步骤及基本使用方法.

一、Waveform Render是什么？

它可以解析 WaveJSON 语法的 json 文件，绘制一幅数字电路时序图。
官网提供了的完整教程：https://wavedrom.com/tutorial.html

二、安装步骤及使用

1.在Vscode中搜索插件

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

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

2.1在 vscode 中新建一个名为 WaveformTest.json 的文件，内容如下
代码如下（示例）：

{ signal: [
  { name: "CLK",         wave: "p.....|..." },
  { name: "Data",        wave: "x234x|=.xx", data: ["head", "body", "tail", "data"] },
  { name: "Request",     wave: "0.1..0|1.0" },
]}

2.2 按 CTRL +S 保存文件
2.3 按CTRL + K ,然后再按CTRL+D
2.4 结果

这个例子展示了基本的 WaveJSON 语法：

signal 是必须的关键词，它用一个数组表示一幅时序图。 数组内每个元素描述一个信号。
每个元素至少要包含 name 和 wave 两个变量：
name 定义了信号的名称。
wave 用来描述信号的样子。
wave 定义的字符串中，每个字符代表一个时钟周期（1bit），通过不同的字符来描述信号的样子：
0 表示低电平，1 表示高电平。
p 表示上升沿开始的一个时钟周期。
. 表示与上一个时钟周期相同。

三、在线生成波形

https://wavedrom.com/editor.html

以下展示在线编辑，自动生成波形。

四、语法

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

五、总结

以上为Waveform Render 环境搭建及基本使用方法。更多使用技巧请查阅官方的完整使用教程。