摘要：WaveDrom是一個(gè)免費(fèi)開(kāi)源的在線數(shù)字時(shí)序圖渲染引擎。它可以使用JavaScript, HTML5和SVG來(lái)將時(shí)序圖的WaveJSON描述轉(zhuǎn)成SVG矢量圖形，從而進(jìn)行顯示。WaveDrom可以嵌入到任何網(wǎng)頁(yè)中。WaveDrom編輯器可在瀏覽器中運(yùn)行，也可以安裝在系統(tǒng)上，渲染引擎可以嵌入到任何網(wǎng)頁(yè)中。

一、WaveDrom功能

繪制數(shù)字時(shí)序圖、繪制寄存器圖、繪制邏輯電路圖

二、WaveDrom的使用

• 在線編輯器 https://wavedrom.com/editor.html
• 官網(wǎng) https://wavedrom.com/

WaveDrom可以在線編輯也可以下載安裝，可以在官網(wǎng)首頁(yè)找到這兩個(gè)入口。在線編輯方式，版本較新，但需要聯(lián)網(wǎng)。下載安裝方式，版本較官網(wǎng)舊一些，無(wú)需聯(lián)網(wǎng)即可使用。

在編輯器中輸入WaveJSON 格式的數(shù)字時(shí)序圖描述，即可實(shí)時(shí)渲染出相應(yīng)的數(shù)字時(shí)序圖。aveJSON 格式是十分簡(jiǎn)單的，主要需要記憶的是各個(gè)符號(hào)所對(duì)應(yīng)的波形。

三、繪制時(shí)序圖

下面的代碼將創(chuàng)建名為“Alfa”的1位信號(hào)，該信號(hào)隨時(shí)間改變其狀態(tài)。

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

“wave”字符串中的每個(gè)字符都代表一個(gè)時(shí)間段。符號(hào)“將以前的狀態(tài)再延長(zhǎng)一段時(shí)間。下面是它的外觀：

加時(shí)鐘：數(shù)字時(shí)鐘是一種特殊類型的信號(hào)。它在每個(gè)時(shí)間段內(nèi)變化兩次，可以有正負(fù)極性。它還可以在工作邊緣上有一個(gè)可選標(biāo)記。時(shí)鐘塊可以與其他信號(hào)狀態(tài)混合，以產(chǎn)生時(shí)鐘選通效應(yīng)。代碼如下：

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

以及呈現(xiàn)的圖表：

WaveLanes 可以統(tǒng)一在以數(shù)組形式表示的命名組中。['組名'， {...}， {...}， ...]數(shù)組的第一個(gè)條目是組的名稱，這些組可以嵌套。

{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:'A1A2'},
{name:'wdata',wave:'x3.x....',data:'D1'},
],
{},
['Slave',
['ctrl',
{name:'ack',wave:'x01x0.1x'},
],
{name:'rdata',wave:'x.....4x',data:'Q2'},
]
]}

四、時(shí)序圖教程

網(wǎng)址：https://wavedrom.com/tutorial.html

里面包含多個(gè)示例，可以很好地對(duì)WaveDrom進(jìn)行學(xué)習(xí)。

五、邏輯電路圖教程

網(wǎng)址：https://wavedrom.com/tutorial2.html

里面講解了邏輯電路圖的繪制示例。

六、Github主頁(yè)

WaveDromGithubhttps://github.com/wavedrom/wavedrom

七、VScode中使用Waveform

在VScode應(yīng)用商店中搜索Waveform Render，這個(gè)就相當(dāng)于WaveDrom

左邊鍵入代碼，右邊會(huì)自動(dòng)生成時(shí)序圖，非常好用：