数字电路波形图绘制工具WaveDrom简介

最近写东西的时候，需要画波形图，无意中找到了一蛮好用的工具：WaveDrom

WaveDrom 是一个 JavaScript 应用程序。WaveJSON 是一种描述数字时序图的格式。WaveDrom 直接在浏览器内部渲染这些时序图。元素 “signal” 是一个 WaveLane 数组。每个 WaveLane 包含两个必填字段：“name”（名称）和 “wave”（波形）。

本文简要介绍WaveDrom的使用方法.

简介

WaveDrom是一个免费和开放源代码的在线数字时序图（波形）渲染引擎，使用javascript，HTML5和SVG将WaveJSON输入文本描述转换为SVG矢量图形。

WaveJSON是JSON格式的应用程序。 WaveJSON的目的是为数字硬件/ IC工程师使用的数字时序图提供一种紧凑的交换格式。

• WaveDrom可以支持在线使用https://wavedrom.com/editor.html
• 也有跨平台的离线工具https://github.com/wavedrom/wavedrom.github.io/releases

使用

WaveDrom是编程语言式画图，通过撰写json文件说明要如何绘图，WaveDrom再将其转换为图形。看一个官方示例

{signal: [
  {name: 'clk', wave: 'p.....|...'},
  {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},
  {name: 'req', wave: '0.1..0|1.0'},
  {},
  {name: 'ack', wave: '1.....|01.'}
]}

渲染出来如下图

效果看起来还不错，对吧！
再来看josn文件，不要看json里面写得复杂，其实拆分起来很简单，动手做一做，半个小时内轻松上手。

基础信号

信号都是以一个周期为单位绘制，一个周期的信号使用一个符号(数字/字符)表示, . 符号表示延续上一个符号

无意义信号

x: 表示无意义信息，例如

{signal: [
  {name: 'inv-a', wave: 'xxx'},
  {name: 'inv-b', wave: 'x..'},
],
}

时钟信号

时钟信号用4种字符表示

• p: positive ,正极性clock, 前半周为高电平，后半周为低电平
• n: negative,负极性clock, 前半周为低电平，后半周为高电平
• h：high, 一个周期高电平
• l：low, 一个周期低电平