目錄
背景介紹
工具介紹
案例分析：
案例一
偶分頻電路波形圖（以10分頻電路為例）
奇分頻（5分頻為例）
案例二
結束語
今天翻網頁學習FPGA的相關知識時，無意翻到了一個畫波形圖的工具，激起了我的興趣，有的時候我是需要畫波形圖的，用手畫十分的麻煩且不标準，難以對齊，且要花費大量的時間，果然，前人大牛們已經經曆了這個過程并寫出了一個工具來解決此問題，真是有一種膜拜的感覺，我感覺自己真的很菜，需要學習的東西太多，想法很多，先是學會如何使用這個工具。畫出一些基本的波形圖。
本博文使用兩個案例來說明如何畫波形圖，這兩個案例，都是之前我寫過的博文，由于波形圖手畫不标準（我沒尺子），我就沒有畫，而是直接仿真得出的，這不利于原理分析，今天來完善下。順便學會了這個工具的使用方法。
首先貼出來工具的下載下傳位址：Wavedrom
最上方有4個選項，第一個是tutorial（教程），點選進去，有軟體或工具的使用方法，文法等。
第二個是Editor（編輯器），點選進去，就可以線上編寫波形，無需下載下傳軟體，當然人家也把軟體做好了，各種平台上的軟體，真的很崇拜呀。
第三個是source，點選進去會進入這個開源項目的各種源檔案，裡面由所有你想知道的東西，就看你能不能看懂了。
最下方的第一項是Download editor，下載下傳這個編輯器，可以離線編輯。
其他的自己檢視吧，我就不介紹了。
再我的博文案例貼出來：
【FPGA】分頻電路設計（Verilog HDL設計）（良心博文）
模6計數器以及模10計數器（Verilog HDL語言設計）（Modelsim仿真與ISE綜合）
下面這段代碼是這個工具預設的一段示例代碼，先貼出來供大緻了解，參觀參觀：
{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.'}
]}
這段代碼描述出來的波形圖為：
從代碼看，幾乎可以說是一目了然，很容易上手，畫出來的波形圖也很美觀，簡直了。
雖然代碼簡單，但是細節還是需要認真的研究一下的，多找幾個案例練手，達到熟練的目的。
下面預設你看過這篇博文了，分頻電路設計，不看也沒關系，我說的直接一些吧。
這篇博文中要實作一個偶分頻電路，原理是對時鐘的上升沿進行計數，從0開始計數，計數到4（相當于經過了5個時鐘周期），分頻時鐘clk_div翻轉一次。
在Modelsim進行功能仿真得到的電路圖如下：
下面我就要畫出類似這個的原理圖：
先看軟體提供的示例代碼：
{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:'p...'中p代表一個時鐘周期，後面的點是p的重複，有幾個點就重複幾次，p也算一次；
wave:'p...|...'中，|代表省略了一系列時鐘，沒畫出來。
上面的那段代碼描述的波形為：
當然也可以添加上升沿辨別，隻需要将代碼中的p換成大寫的P（Positive）就好了，如下：
{signal: [
{name: 'clk', wave:'P...........|...'},
]}
描述的波形如下：
下面添加一個計數，從0開始計數，計數到4，然後計數器清零：
{signal: [
{name: 'clk', wave:'P...........|...'},
{name: 'cnt', wave:'============|===',data:['0','1','2','3','4','0','1','2','3','4','0','1','2','3','4']},
]} 描述出的波形為：
至于怎麼寫的，wave中=代碼那一個個數字框，後面的data是填充資料用的。見下圖：
這段描述很清晰了。
下面添加一個分頻時鐘，五個時鐘周期翻轉一次：
{signal: [
{name: 'clk', wave:'P...........|...'},
{name: 'cnt', wave:'============|===',data:['0','1','2','3','4','0','1','2','3','4','0','1','2','3','4']},
{name: 'clk_div10', wave:'0....1....0.|1..'},
]} 有了上面的基礎，就逐漸上手了，這段代碼描述的波形是：
這就是10分頻，clk_div10的時鐘周期是clk的10倍，頻率是其1/10，這也是10分頻的意思。
畫分頻電路波形圖的所用的這些簡單的語言上面已經講完了，下面直接畫出5分頻電路的波形圖。
先簡要的說明一下原理：
假如是一個占空比為50%的5分頻電路，那麼就需要在基準時鐘clk的2.5個時鐘周期，分頻時鐘clk_div5翻轉一次，如何實作2.5個時鐘周期翻轉一次呢？
這就需要産生一個與clk完全相反的時鐘clk1，此時鐘與clk相位相差180°，然後對這兩個時鐘的上升沿計數，計數到4，計數器初始值為0，那麼就代表2.5個clk時鐘周期。
且看下圖：
從圖中可以看出，clk與clk1的上升沿都進行計數，計數到4，clk_div5翻轉一次，這樣就實作了5分頻電路。
描述這個波形圖的代碼為：
{ signal: [
{ name: "clk", wave: "P........", period: 2 },
{ name: "clk1", wave: "n........", period:2 },
{ name: "cnt", wave: "==================", data: "0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1 2" },
{},
{ name: "clk_div5", wave: "0....1....0....1.." },
]}
這張圖的精髓在于調節周期和相位，見下圖：
不做過多解釋，應該能看懂。在源代碼的基礎上該就是了。
如果占空比為3:2呢？波形圖如何畫？
同樣很簡單，就是clk的三個周期翻轉一次，然後再過兩個周期翻轉一次 ，再過三個周期翻轉一次，依次循環即可：
描述代碼為：
{signal: [
{name: 'clk', wave:'P...........|'},
{name: 'cnt', wave:'============|',data:['0','1','2','0','1','0','1','2','0','1','0','1']},
{name: 'clk_div5', wave:'0..1.0..1.0.|'},
]}
這個案例就是模10計數器了，見原博文：模6計數器以及模10計數器（Verilog HDL語言設計）（Modelsim仿真與ISE綜合），這個波形就好畫的多了，權當練手：
每個時鐘上升沿到來時，計數一次，計數到9後計數器清零。
直接給圖：
代碼：
{signal: [
{name: 'clk', wave:'p...........|'},
{name: 'cnt', wave:'============|',data:['複位0','1','2','3','4','5','6','7','8','9','0','1']},
]}
所謂用到學到，暫時先學習這些，當用到其他功能時，再繼續研究呗，反正此刻已經滿足了畫基本的波形圖的需求了。
最後貼出，教程：Hitchhiker's Guide to the WaveDrom
Hitchhiker's Guide to the WaveDrom (Part 2)
最後再次貼出線上編輯界面：