VScode中使用WaveDrom插件画时序图(波形图)

小火子Velsuked

已于 2023-04-05 15:58:12 修改

阅读量1.9w

点赞数 39

分类专栏： wavedrom 文章标签： vscode

于 2021-12-10 17:34:31 首次发布

本文链接：https://blog.csdn.net/qq_42446721/article/details/121857435

版权

wavedrom 专栏收录该内容

1 篇文章

订阅专栏

WaveDrom是一款用于在VSCode中生成时序图的插件，通过简单易懂的语法描述信号波形。基本结构包括在大括号内的信号数组，每个信号由name和wave属性定义。wave字符串中字符代表信号状态，如p代表正沿时钟。进阶使用中，Config属性可以控制渲染，如hscale调整比例，skin选择布局，head/foot添加标题和时间线标签，edge定义箭头。此外，还能通过JavaScript代码块动态生成时序图。保存时序图可以选择PNG或SVG格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WaveDrom插件介绍

在VScode应用商店中搜索Waveform Render，这个就相当于WaveDrom了：
在这里插入图片描述
左边键入代码，右边会自动生成时序图，非常好用：
第一次打开时，要先按ctrl+k, 再按ctrl + d才能自动生成时序图；先按ctrl+k, 再按ctrl + l能够实时刷新.

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.'}
]}

从示例代码可以看出，这个波形描述语言的总体框架如下：

{signal: [
 
]}

在两个中括号里面填充你需要描述的波形，一般波形描述如下：

{signal: [
  {name: 'clk', wave:'p...........|...'},
  
]}

每个波形的描述都在一个大括号{}内，别忘了大括号的结尾有一个逗号（，），name: 以及 wave:后面都要有 ’ ’ 或者 “” ，引号内部写相关信息：name: ‘信号的名字’ ， wave: ‘信号的特征’。

上面例子中wave:'p…'中p代表一个时钟周期，'p…'中的点是重复的意思，有几个点就重复几次
'p…|…'中，|代表省略了一系列时钟，没画出来，上面例子的波形如下：
在这里插入图片描述
其中wave所对应的字符串每个字符串对应一个信号值。常用的字符值有：
p - when first in string creates positive edged clock wave

n - when first in string creates negative edged clock wave

P - same as p but with arrow

N - same as n but with arrow

0 - low level

1 - high level

= - value (default color 2)

2 - value with color 2

3 - value with color 3

4 - value with color 4

5 - value with color 5

x - undefined value

. - extends previous cycle

z - high-impedance state

u - pull-up (weak 1)

d - pull-down (weak 0)

| - extends previous cycle and draw gap on top of it

例子1

{signal:[
  {name:"plck",wave:"p"},		// p -> 0-1（无箭头）
  {name:"Plck",wave:"P"},		// P -> 0-1（有箭头）
  {name:"nlck",wave:"n"},		// n -> 1-0（无箭头）
  {name:"Nlck",wave:"N"}		// N -> 1-0（有箭头）
]}

在这里插入图片描述

例子2

{signal:[
  {name:"hlck",wave:"hL"},	// h -> 1，L -> 0（有箭头）
  {name:"Hlck",wave:"Hl"},	// H -> 1（有箭头），l -> 0
  {name:"llck",wave:"lH"},	
  {name:"Llck",wave:"Lh"},	
  {name:"lck1",wave:"01010"},		// 0和1表示信号有上下升沿的高低电平
  {name:"lck2",wave:"xlhLHx"}		// x -> 阴影，就是不定态
]}

在这里插入图片描述

例子3

wave: "x.==.=x"中的=是填充符，就是依次填充data里面的数据:

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

在这里插入图片描述

例子4

波道可以联合在以数组形式表示的命名组中。[‘组名’，{.}，{.}，.]数组的第一个条目是组的名称。可以嵌套组；
{}表示空出一行；
wave: 'x3.x4…x’中的3和4相当于有颜色显示的填充符=，除了0和1这个两个数字，其他数字都各表示一种颜色:

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

在这里插入图片描述

例子5

period：周期
phase：相位

{signal:[
 {name:"CLK",wave:"p........",period:2},		
 {name:"CLK_Mul",wave:"p........",period:1},
 {name:"CLK_Mul_Inv",wave:"p........",period:1, phase:0.5},
 {name:"CLK_90",wave:"p........",period:2, phase:-0.5}, 		
]}

在这里插入图片描述

WaveDrom的进阶使用

Config: {.} 属性控制不同方面的渲染

1. hscale

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

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

在这里插入图片描述

2. skin(布局)

config：{skin：’…’}属性可用于选择WaveDrom布局。该属性仅在页面上的第一个时序图内起作用。 WaveDrom编辑器包括两个标准：“默认”和“窄”（ ‘default’ and ‘narrow’）：

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

在这里插入图片描述

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

在这里插入图片描述

head/foot添加文字内容描述

head：{…}和foot：{…}属性定义了时序图上方和下方的区域内容。

1. tick

tick 添加与垂直标记对齐的时间线标签：

{ signal: [
 { name: "clk",     wave: "p...." },
 { name: "Data",    wave: "x345x",  data: ["head", "body", "tail"] },
 { name: "Request", wave: "01..0" }
 ],
config: {skin:'default'},
head:{tick:3}
}

在这里插入图片描述

2. tock

tock在垂直标记(tick)之间添加时间线标签：

{ signal: [
 { name: "clk",     wave: "p...." },
 { name: "Data",    wave: "x345x",  data: ["head", "body", "tail"] },
 { name: "Request", wave: "01..0" }
 ],
config: {skin:'default'},
head:{tick:3,tock:0}
}

在这里插入图片描述

{ signal: [
 { name: "clk",     wave: "p...." },
 { name: "Data",    wave: "x345x",  data: ["head", "body", "tail"] },
 { name: "Request", wave: "01..0" }
 ],
config: {skin:'default'},
head:{tick:3,tock:0},
foot:{tick:2,tock:5}
}

在这里插入图片描述

3. text

text 添加标题/标题文本：

{ signal: [
 { name: "clk",     wave: "p...." },
 { name: "Data",    wave: "x345x",  data: ["head", "body", "tail"] },
 { name: "Request", wave: "01..0" }
 ],
config: {skin:'default'},
head:{text:'WaveDrom example',tick:3,tock:0},
foot:{text:'Figure 100',tick:2,tock:5}
}

在这里插入图片描述

4. every

每N个周期tick和tocks作用一次

5. 文本属性

Head/foot 文本具有 SVG 文本的所有属性。标准 SVG tspan 属性可用于修改文本的默认属性。
用于表示 SVG 文本内容的 JsonML 标记语言。可以使用几种预定义的样式并混合使用:
h1 h2 h3 h4 h5 h6 – 预定义字体大小。
muted warning error info success – 字体颜色样式，没错，就是这几个单词表示字体的颜色
其他 SVG tspan 属性可以在自由式中使用，如下所示：

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

在这里插入图片描述

箭头

1. 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'
 ]
}

在这里插入图片描述

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

在这里插入图片描述

嵌入代码块

(function (bits, ticks) {
 var i, t, gray, state, data = [], arr = [];
 for (i = 0; i < bits; i++) {
   arr.push({name: i + '', wave: ''});
   state = 1;
   for (t = 0; t < ticks; t++) {
     data.push(t + '');
     gray = (((t >> 1) ^ t) >> i) & 1;
     arr[i].wave += (gray === state) ? '.' : gray + '';
     state = gray;
   }
 }
 arr.unshift('gray');
 return {signal: [
   {name: 'bin', wave: '='.repeat(ticks), data: data}, arr
 ]};
})(5, 16)