Overview

Wavedrom 是一款功能强大且简单易用的文本转图表工具，被广泛应用于生成时序图、波形图等交互式波形。

Wavedrom 的效果如下：

输入：

输出：

Wavedrom 相关的一些网址：

官网主页：WaveDrom
在线使用：WaveDrom Editor Online
官方教程：Hitchhiker’s Guide to the WaveDrom

此外，在 VSCode 中，安装 Waveform Render 插件，也可以使用 WaveDorm 中画图。

其他版本：

1. wavedrom-gui

基本语法

Wavedrom 的基本语法如下：

绘图示例

给出一些常用的绘图示例，并对基本语法做进一步说明。

The Signal

创建一个 1-bit 的信号，名称为 “Alfa”，它的状态随着时间变化。

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

“wave” 中的每一个字符代表一个时间周期（single time period，可以直接理解为时钟周期）。

.表示当前时钟周期的状态和上一个时钟周期的状态保持一致 (Symbol.extends previous state for one more period.)。

所以，最后得到的波形如下：

Adding Clock

数字时钟是一种特殊类型的信号，它在每个时间周期内变化两次，并且具有上升沿和下降沿。

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

Putting all together (clk & signal)

通常情况下，时序图（timing diagram）中包含时钟和信号。

对于多bit信号，可是使用data实现。

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

Spacers and Gaps

时序图中有时候是需要省略一部分信号的。

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

The groups

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

Period and 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"}]}

period仅支持整数，phase支持整数与小数。

period为 2，就表示要占用 2 个时间单位；

phase为正数表示相位左移，负数表示右移动。

The config{} property

Theconfig:{...}property controls different aspects of rendering.

hscale：水平缩放

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

skins

可用的 skins 包括：default、dark、lowkey、“narrow

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

head/foot

head:{...}andfoot:{...}properties define the content of the area above and below the timing diagram.

tick：adds timeline labels aligned to vertical markers.
tock：adds timeline labels between the vertical markers.
text：adds title / caption text.
every：render ticks and tocks only once every N cycle

{signal:[{name:'clk',wave:'p....'},{name:'Data',wave:'x345x',data:'a b c'},{name:'Request',wave:'01..0'}],head:{text:'WaveDrom example',tick:0,every:2},foot:{text:'Figure 100',tock:9},}

head/ foottext has all properties of SVG text. Standard SVG tspan attributes can be used to modify default properties of text.

Arrows

先用node标记一些点，然后再用edge进行连线。连线可以选择曲线（Splines），也可以选择折线（Sharp lines）。

Splines

{signal:[{name:'A',wave:'01........0....',node:'.a........j'},{name:'B',wave:'0.1.......0.1..',node:'..b.......i'},{name:'C',wave:'0..1....0...1..',node:'...c....h..'},{name:'D',wave:'0...1..0.....1.',node:'....d..g...'},{name:'E',wave:'0....10.......1',node:'.....ef....'}],edge:['a~b t1','c-~a t2','c-~>d time 3','d~-e','e~>f','f->g','g-~>h','h~>i some text','h~->j']}

Sharp lines

{signal:[{name:'A',wave:'01..0..',node:'.a..e..'},{name:'B',wave:'0.1..0.',node:'..b..d.',phase:0.5},{name:'C',wave:'0..1..0',node:'...c..f'},{node:'...g..h'},{node:'...I..J',phase:0.5},{name:'D',wave:'0..1..0',phase:0.5}],edge:['b-|a t1','a-|c t2','b-|-c t3','c-|->e t4','e-|>f more text','e|->d t6','c-g','f-h','g<->h 3 ms','I+J 5 ms']}

保存与导出

保存或到处图像数据的按钮在左下角。