WaveDrom 可以根据特定指令生成时序 / 波形图（SVG/PNG），并且也可以在浏览器中运行。同时也提供了在线编辑器和教程、教程 2。

信号（signal)

名称（name）和波形（wave）

绘制信号时，需要向 WaveDrom 传递键为 signal，值为 WaveLanes 的数组，WaveLane 一般至少需要包含两个属性：名称（name）和波形（wave），例如（在官方在线编辑器中打开）：

1
{ "signal" : [{ "name": "clk", "wave": "P..........." }] }

波形的名称将显示在波形左侧，波形由一个字符串指定，每个字符都代表了一个周期的波形，每个字符代表的意义如下：

符号 含义 样例 渲染结果
. 与上一周期状态相同 { signal : [{ name: ".", wave: "p..." }]}
p 在周期开始时为上升沿的时钟信号 { signal : [{ name: "p", wave: "p.pp" }]}
P 在周期开始时为上升沿的时钟信号，上升沿有箭头 { signal : [{ name: "P", wave: "P.PP" }]}
n 在周期开始时为下降沿的时钟信号 { signal : [{ name: "n", wave: "n.nn" }]}
N 在周期开始时为下降沿的时钟信号，下降沿有箭头 { signal : [{ name: "N", wave: "N.NN" }]}
0 低电平，有过渡 { signal : [{ name: "0", wave: "0.01" }]}
l 低电平，无过渡 { signal : [{ name: "l", wave: "l.lh" }]}
1 高电平，有过渡 { signal : [{ name: "1", wave: "1.10" }]}
h 高电平，无过渡 { signal : [{ name: "h", wave: "h.hl" }]}
z 高阻态 { signal : [{ name: "z", wave: "z.zz" }]}
d 下拉（弱 0） { signal : [{ name: "d", wave: "d.dd" }]}
u 上拉（弱 1） { signal : [{ name: "u", wave: "u.uu" }]}
x 未定义 { signal : [{ name: "x", wave: "x.xx" }]}
2/= 值（颜色为 2） { signal : [{ name: "2", wave: "2.22" }]}
3 值（颜色为 3） { signal : [{ name: "3", wave: "3.33" }]}
4/5/6 值（颜色为 4/5/6） { signal : [{ name: "4/5/6", wave: "4.56" }]}
7/8/9 值（颜色为 7/8/9） { signal : [{ name: "7/8/9", wave: "7.89" }]}
\| 延长前一个周期并绘制间隙 { signal : [{ name: "\|", wave: "xx\|x" }]}

这两个属性也可以没有，都没有时将显示一个空行。

值名称（data）

通过WaveLane的data数组按波形中值出现的顺序指定值的名称：

1
{ "signal" : [{ "name": "bus",  "wave": "x.==.=x", "data": ["head", "body", "tail", "data"] }]}

分组

通过数组的第一项的值控制分组：

1
2
3
4
5
6
7
8
{ signal: [
  ['Slave',
    ['ctrl',
      {name: 'ack',   wave: 'x01x0.1x'},
    ],
    {  name: 'rdata', wave: 'x.....4x', data: 'Q2'},
  ]
]}

周期（period）和相位（phase）

通过WaveLane的period和phase项控制周期和相位：

1
2
3
4
5
{ 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: "DQ",   wave: "z.........5555z.", data: "D0 D1 D2 D3" }
]}

节点（node）

node可以指定节点并在边沿处显示：

1
2
3
4
{ signal: [
  { name: 'A', wave: '01........0....',  node: '.a...c....j' },
  ],
}

连线（edge）

通过指定连线（edge）连接两个节点，连线有两种类型，一种是圆滑的：

1
2
3
 ~    -~
<~>  <-~>
 ~>   -~>  ~->

例如：

1
2
3
4
5
6
7
8
9
10
11
12
{ 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'
  ]
}

另一种是直线：

1
2
3
4
 -   -|   -|-
<-> <-|> <-|->
 ->  -|>  -|->  |->
 +

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
{ 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'
  ]
}

寄存器（reg）

名称（name）和比特数（bit）

名称（name）和比特数（bit）是寄存器最基本的两个属性，名称将显示在寄存器框内且可以为空，比特数代表此与区域的长度。列表的顺序是从高位到低位，一个寄存器默认在一行中显示。

1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8},
    {               bits: 7},
    {name: 'BRK',   bits: 5},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3},
    {               bits: 7}
]}

类型（type）

类型（type）指定寄存器的颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
{reg:[
    { bits: 1, name:""},
    { bits: 1, type: 0},
    { bits: 1, type: 1},
    { bits: 1, type: 2},
    { bits: 1, type: 3},
    { bits: 1, type: 4},
    { bits: 1, type: 5},
    { bits: 1, type: 6},
    { bits: 1, type: 7},
    { bits: 1, type: 8},
    { bits: 1, type: 9},
]}

属性（attr）

属性（attr）指定寄存器下方文字或二进制数字并按列表顺序依次显示，当属性为文字时直接显示，为数字时将展开为二进制，若数字的二进制超过最大范围则截取有效部分：

1
2
3
4
5
6
7
8
{reg: [
    {bits: 7,  name: 'opcode',    attr: 'OP'},
    {bits: 5,  name: 'rd',        attr: 'dest'},
    {bits: 3,  name: 'func3',     attr: 'T0 T1 T2 T3 T4 T5 T6 T7 T8 T9'.split(' '), type: 4},
    {bits: 5,  name: 'rs1',       attr: 'src1'},
    {bits: 5,  name: 'rs2',       attr: 'src2'},
    {bits: 7,  name: 'funct7', attr: [0, 1, 2, 3, 4, 5, 8, 16, 32, 64]}
]}

旋转（rotate）

1
2
3
4
5
6
7
{reg:[
    {name: 'label -90', bits: 1, rotate: -90},
    {name: 'label -45', bits: 1, rotate: -45},
    {name: 'label 45', bits: 1, rotate: 45},
    {name: 'label 90', bits: 1, rotate: 90},
    {name: 'label 0', bits: 1, rotate: 0},
],config:{vspace:100}}

宽度（hspace）、高度（vspace）

1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8, attr: 'RO'},
    {               bits: 7},
    {name: 'BRK',   bits: 5, attr: ['RW', 'FOO'], type: 4},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3, type: 5},
    {               bits: 7}
],config:{hspace: 800, vspace: 150}}

多行（lanes）

1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8},
    {               bits: 7},
    {name: 'BRK',   bits: 5, type: 4},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3, type: 5},
    {               bits: 7}
],config:{lanes:2}}

行号（label）

指定寄存器左侧（left）或者右侧（right）的行号，参数为起始值。

1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8},
    {               bits: 7},
    {name: 'BRK',   bits: 5, type: 4},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3, type: 5},
    {               bits: 7}
],config:{lanes:2, label: {right: 2}}}

位数（bit）

当位数大于已有的寄存器长度时，剩余长度用空白填充。当位数小于已有的寄存器长度时，多余的寄存器将不会显示。

1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8},
    {               bits: 7},
    {name: 'BRK',   bits: 5, type: 4},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3, type: 5},
    {               bits: 7}
],config:{bits: 48}}

水平顺序（vflip）/ 垂直顺序（hflip）

默认顺序为水平方向上高位在低位在后，垂直方向上为高位在上低位在下，通过水平顺序（vflip）/ 垂直顺序（hflip）可以改变该顺序。

1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8},
    {               bits: 7},
    {name: 'BRK',   bits: 5, type: 4},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3, type: 5},
    {               bits: 7}
],config:{vflip: true}}
1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8},
    {               bits: 7},
    {name: 'BRK',   bits: 5, type: 4},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3, type: 5},
    {               bits: 7}
],config:{lanes:2, hflip: true}}

紧凑（compact）

1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8},
    {               bits: 7},
    {name: 'BRK',   bits: 5, type: 4},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3, type: 5},
    {               bits: 7}
],config:{lanes:2, compact: true}}

字号（fontsize）/ 间隙（margin）

通过fontsize指定字号

1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8},
    {               bits: 7},
    {name: 'BRK',   bits: 5, type: 4},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3, type: 5},
    {               bits: 7}
],config:{fontsize: 20}}

通过margin指定与边缘的距离，包括上（top）下（bottom）左（left）右（right）四个方向。

1
2
3
4
5
6
7
8
{reg:[
    {name: 'IPO',   bits: 8},
    {               bits: 7},
    {name: 'BRK',   bits: 5, type: 4},
    {name: 'CPK',   bits: 2},
    {name: 'Clear', bits: 3, type: 5},
    {               bits: 7}
],config:{margin: {left: 60}}}

配置（config）

水平缩放（hscale）

通过指定配置（config）的水平缩放（hscale）值来控制水平缩放，该值必须为大于零的整数（也就是说只能放大），若要缩小周期，需要配置皮肤。

1
2
3
4
{ signal: [
  { name: "clk",     wave: "p...." },],
  config: { hscale: 2 }
}

皮肤（skin）

通过指定配置（config）的皮肤（skin）添加不同的配色或是周期大小，可选的皮肤自已在这里查看，例如使用 narrow 可以减小周期长度，dark 为深色皮肤。

1
2
3
4
{ signal: [
  { name: "clk",     wave: "p...." },],
  config: { skin: 'narrow' }
}

（在官方在线编辑器中打开)

1
2
3
4
{ signal: [
  { name: "clk",     wave: "p...." },],
  config: { skin: 'dark' }
}

（在官方在线编辑器中打开）

项眉（head）/ 项脚（foot）（适用于波形图）

配置（config）的项眉（head）/ 项脚（foot）可以配置位于波形图上方和下方的文字（text）和坐标（tick 对齐周期起始位置，tock 在周期中居中，其值为起始值，every 指定显示周期）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{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
 },
}

通过控制文本的tspan属性来指定文本的样式，有预定义的类：h1、h2、h3、h4、h5、h6（控制字体大小），muted、warning、error、info、success控制文本样式（颜色、斜体、粗细），其他tspan属性也可以直接使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{signal: [
  {name:'clk', wave: 'p.....PPPPp....' },
  {name:'dat', wave: 'x....2345x.....', data: 'a b c d' },
  {name:'req', wave: '0....1...0.....' }
],
head: {text:
  ['tspan',
    ['tspan', {class:'error h1'}, 'error '],
    ['tspan', {class:'warning h2'}, 'warning '],
    ['tspan', {class:'info h3'}, 'info '],
    ['tspan', {class:'success h4'}, 'success '],
    ['tspan', {class:'muted h5'}, 'muted '],
    ['tspan', {class:'h6'}, 'h6 '],
    'default ',
    ['tspan', {fill:'pink', 'font-weight':'bold', 'font-style':'italic'}, 'pink-bold-italic']
  ]
},
foot: {text:
  ['tspan', 'E=mc',
    ['tspan', {dy:'-5'}, '2'],
    ['tspan', {dy: '5'}, '. '],
    ['tspan', {'font-size':'25'}, 'B '],
    ['tspan', {'text-decoration':'overline'},'over '],
    ['tspan', {'text-decoration':'underline'},'under '],
    ['tspan', {'baseline-shift':'sub'}, 'sub '],
    ['tspan', {'baseline-shift':'super'}, 'super ']
  ],tock:-5
}
}

转载 link