VScode 画时序图（FPGA）

坚持每天写程序2025-03-29 12:40

1、先安装插件：

2、然后就可以编写一个.js文件，如下：

复制代码

{signal: [
  {name: 'clk', wave: 'p.......|..'},
  {name: 'rstn', wave: '01......|..'},
  {name: 'din_vld', wave: '0.1.0...|..'},
  {name: 'din', wave: "x.==x...|..", data: ["D0", "D1"] },
  {name: 'dout_vld', wave: '0.1.0...|..'},
  {name: 'dout', wave: "x.==x...|..", data: ["R0", "R1"]},
  {},
  {},

  {name: 'clk', wave: 'p.......|..'},
  {name: 'rstn', wave: '01......|..'},
  {name: 'din_vld', wave: '0.1.0...|..'},
  {name: 'din', wave: "x.==x...|..", data: ["D0", "D1"] },
  {name: 'dout_vld', wave: '0..1.0..|.'},
  {name: 'Result', wave: "x..==x..|..", data: ["R0", "R1"]},
  {},
  {},

  {name: 'clk', wave: 'p.......|..'},
  {name: 'rstn', wave: '01......|..'},
  {name: 'din_vld', wave: '0.1.0...|..'},
  {name: 'din', wave: "x.==x...|..", data: ["D0", "D1"] },
  {name: 'dout_vld', wave: '0...1.0.|..'},
  {name: 'Result', wave: "x...==x.|..", data: ["R0", "R1"]},
  {},
  {},


  {name: 'clk', wave: 'p.......|..'},
  {name: 'rstn', wave: '01......|..'},
  {name: 'din_vld', wave: '0.1.0...|..'},
  {name: 'din', wave: "x.==x...|..", data: ["D0", "D1"] },
  {name: 'dout_vld', wave: '0....1.0|..'},
  {name: 'Result', wave: "x....==x|..", data: ["R0", "R1"]},
  {},
  {},




]}

很容易看懂格式，或者可以看这篇博客，里面对这个语法讲的更透彻：VScode中使用WaveDrom插件画时序图(波形图)-CSDN博客。（但我用的很简单，只是简单的时序，可以对照这段代码，然后自己试一下，生成下面的图，就知道每段话是什么意思了）

3、写好js文件之后，保存之后，按快捷键ctrl+K，再按ctrl+D，就会得到输出的图片，

4、可以按鼠标右键，输出图片。