今天分享一個簡單強大的時序圖繪制工具——WaveDrom。

WaveDrom[1]

Digital Timing Diagram everywhere

WaveDrom draws your Timing Diagram or Waveform from simple textual description.It comes with description language, rendering engine and the editor.WaveDrom editor works in the browser or can be installed on your system.Rendering engine can be embeded into any webpage.

Wavedrom 是一款功能強大且簡單易用的文本轉(zhuǎn)圖表工具，被廣泛應(yīng)用于生成時序圖、波形圖等交互式波形。其特點在于使用簡單的文本語法，使得開發(fā)人員能夠以可視化的方式表示數(shù)字信號和時間序列數(shù)據(jù)。Wavedrom 的優(yōu)勢在于其高度靈活性和可擴展性，使用戶能夠快速繪制復(fù)雜的波形和圖表，并輕松與其他文檔和代碼進(jìn)行整合。

Wavedrom 的基本語法相對簡單，以 JSON 對象或簡潔的文本描述波形和時序信息。開發(fā)人員只需編寫簡短的描述，即可生成直觀的波形圖。通過使用不同的標(biāo)記和元素，用戶可以定義時序圖中的信號波形、時鐘周期、狀態(tài)轉(zhuǎn)換等內(nèi)容。Wavedrom 支持自定義樣式和布局，用戶可以根據(jù)需求美化波形圖，增加標(biāo)簽和注釋以增強可讀性。

時序圖是 Wavedrom 最常見的用途之一，通過 Wavedrom 繪制的時序圖可以清晰地展示數(shù)字信號和數(shù)據(jù)的傳輸過程。例如，在硬件設(shè)計中，時序圖可以用于描述寄存器讀寫、信號傳輸和時鐘脈沖的情況，從而幫助開發(fā)人員更好地理解和分析系統(tǒng)的工作狀態(tài)。

值得一提的是，Wavedrom 不僅可以獨立使用，還可以與 Markdown 等文檔格式無縫整合。通過將 Wavedrom 圖表代碼嵌入文檔中，開發(fā)人員可以直接在文檔中呈現(xiàn)交互式的波形圖，提升文檔的可讀性和交互性。

總體來說，Wavedrom 是一個強大而簡便的文本轉(zhuǎn)圖表工具，適用于各種應(yīng)用場景，如硬件設(shè)計、軟件開發(fā)、文檔編寫等。其簡單的語法和可視化的輸出，為開發(fā)人員提供了一個高效、直觀的工具，幫助他們更好地表達(dá)和展示數(shù)字信號和時間序列數(shù)據(jù)。

用法和示例

WaveDrom 是一個基于 JavaScript 的應(yīng)用程序。WaveJSON 是一種描述數(shù)字時序圖的格式。WaveDrom 可以直接在瀏覽器中渲染這些圖表。"signal"元素是 WaveLane 的數(shù)組。每個 WaveLane 都有兩個必填字段："name"和"wave"。

WaveDrom 是一個強大的工具，可用于可視化數(shù)字信號和時序數(shù)據(jù)。通過使用 WaveJSON 格式來描述信號波形，用戶可以輕松地定義時序圖的各個部分，包括信號波形的名稱、周期和狀態(tài)。WaveDrom 支持多個 WaveLane，可以同時顯示多個信號波形，從而實現(xiàn)更復(fù)雜的時序圖表。

"wave"字段是 WaveLane 的關(guān)鍵部分，用于定義信號波形。它由一系列字符組成，包括數(shù)字 0 和 1，代表數(shù)字信號的高和低電平，以及"."，代表未定義或無效狀態(tài)。此外，WaveDrom 還支持其他特殊字符，如"p"代表時鐘周期，"n"代表一個時鐘周期內(nèi)的半個周期，"|"用于分隔不同的時鐘周期。

通過將這些 WaveLane 組合成一個"signal"數(shù)組，并為每個 WaveLane 指定名稱和波形描述，用戶可以創(chuàng)建詳細(xì)且直觀的數(shù)字時序圖。WaveDrom 渲染引擎會將這些描述解析并在瀏覽器中實時繪制出時序圖形。

總的來說，WaveDrom 提供了一種簡單但強大的方式，通過 WaveJSON 格式和 WaveLane 的組織，使用戶能夠在瀏覽器中生成各種數(shù)字時序圖。它在硬件設(shè)計、嵌入式系統(tǒng)開發(fā)、通信協(xié)議分析等領(lǐng)域中有著廣泛的應(yīng)用，幫助開發(fā)人員更好地理解和分析數(shù)字信號的行為和傳輸過程。

信號

從一個簡單的例子開始。下面的代碼將創(chuàng)建一個名為"Alfa"的 1 位信號，并隨時間改變其狀態(tài)。

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

在"wave"字符串中，每個字符代表一個時間周期。符號"."將前一個狀態(tài)延續(xù)一個周期?，F(xiàn)在，讓我們看一下它的圖示：

"Alfa" 1位信號

時鐘

數(shù)字時鐘是一種特殊類型的信號。它在每個時間周期內(nèi)變化兩次，可以具有正極性或負(fù)極性。此外，它還可以在工作邊沿上帶有可選的標(biāo)記。時鐘的各個塊可以與其他信號狀態(tài)混合，以創(chuà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"},
]}

渲染后的時鐘圖示如下：

時鐘信號

合在一起

在典型的時序圖中，我們通常會包含時鐘信號和其他信號（線路）。對于多位信號，我們可以從"data"數(shù)組中獲取相應(yīng)的標(biāo)簽。

下面是一個例子，展示了一個包含時鐘信號、多位信號和單位信號的典型時序圖：

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

在這個例子中，我們有三個信號："clk"代表時鐘信號，"bus"代表多位信號，"wire"代表單位信號。

時鐘信號"clk"用"P"表示，代表正極性的時鐘邊沿。

多位信號"bus"用"x.==.=x"表示，其中"x"表示未定義的狀態(tài)，"="表示穩(wěn)定的高電平或低電平，"."表示未穩(wěn)定狀態(tài)。"data"數(shù)組包含多位信號的標(biāo)簽，分別是："head"、"body"、"tail"和"data"。

單位信號"wire"用"0.1..0."表示，表示在時間周期內(nèi)信號從低電平切換到高電平再切換回低電平。

渲染后的時序圖如下：

典型時序信號

空白和間隙

在時序圖中，我們有時需要添加間距和空白，以便更好地組織信號和使時序圖更易于閱讀。下面是一個帶有間距和空白的時序圖示例：

{"signal":[
{"name":"clk","wave":"p.....|..."},
{"name":"Data","wave":"x.345x|=.x","data":["head","body","tail","data"]},
{"name":"Request","wave":"0.1..0|1.0"},
{},
{"name":"Acknowledge","wave":"1.....|01."}
]}

在這個例子中，我們添加了一些間距和空白，以便更好地分隔不同的信號。

"clk"信號用"p"表示，代表正極性時鐘邊沿，后面有 3 個間距"."，然后是"|..."，代表 3 個空白周期。

"Data"信號由"x"、"="、"."組成，數(shù)據(jù)數(shù)組"data"提供了多位信號各個部分的標(biāo)簽："head"、"body"、"tail"和"data"。后面有一個間距"|"，然后是"=."，代表一個空白周期后緊跟著一個穩(wěn)定高電平。

"Request"信號由"0"、"1"、"."組成，代表低電平、高電平和未定義狀態(tài)。后面有一個間距"|"，然后是"1.0"，代表一個高電平后緊跟著一個空白周期。

接著有一個空白行，表示兩個信號之間的空白。

最后，"Acknowledge"信號由"1"、"."組成，后面有一個間距"|"，然后是"01."，代表一個高電平后緊跟著一個低電平和一個空白周期。

渲染后的時序圖如下：

帶間隙的時序圖

在這個時序圖中，我們可以看到信號之間的間距和空白，使得時序圖更加整齊和易讀。通過添加適當(dāng)?shù)拈g距和空白，我們可以更好地組織信號和時鐘邊沿，使時序圖更具可視化效果。接下來，我們將繼續(xù)探索 WaveDrom 的其他高級功能和實際應(yīng)用，幫助您更好地運用這個強大的文本轉(zhuǎn)圖表工具。

分組

在時序圖中，我們可以將 WaveLane 組合成具有名稱的分組，分組表示為數(shù)組形式。['分組名稱', {...}, {...}, ...] 數(shù)組的第一個條目是分組的名稱。分組之間還可以嵌套。

下面是一個包含分組的時序圖示例：

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

在這個例子中，我們使用了分組來組織不同的信號，將它們放在名為"Master"和"Slave"的兩個分組中。

"clk"信號用"p..Pp..P"表示，代表正極性時鐘邊沿和負(fù)極性時鐘邊沿。

"Master"分組包含了三個子信號，它們分別在名稱為"ctrl"的子分組中，表示控制信號"write"和"read"，以及名稱為"addr"的信號，"data"數(shù)組提供了信號的標(biāo)簽。

接著有一個空白行，表示兩個分組之間的空白。

"Slave"分組包含了兩個子信號，都在名稱為"ctrl"的子分組中，表示控制信號"ack"，以及名稱為"rdata"的信號，"data"數(shù)組提供了信號的標(biāo)簽。

渲染后的時序圖如下：

分組時序圖

在這個時序圖中，我們可以看到不同分組內(nèi)的信號在不同時間周期內(nèi)的狀態(tài)。使用分組可以更好地組織和顯示復(fù)雜的時序圖，幫助我們更好地理解和分析數(shù)字信號之間的時序關(guān)系。通過 WaveDrom 的強大功能，我們可以輕松地在時序圖中添加分組，使其更具可視化效果和清晰度。

周期和相位

在時序圖中，我們可以使用"period"和"phase"參數(shù)來調(diào)整每個 WaveLane 的周期和相位。

下面是一個 DDR 讀取事務(wù)的時序圖示例：

{"signal":[
{"name":"CK","wave":"P.......","period":2},
{"name":"CMD","wave":"x.3x=x4x=x=x=x=x","data":"RASNOPCASNOPNOPNOPNOP","phase":0.5},
{"name":"ADDR","wave":"x.=x..=x........","data":"ROWCOL","phase":0.5},
{"name":"DQS","wave":"z.......0.1010z."},
{"name":"DQ","wave":"z.........5555z.","data":"D0D1D2D3"}
]}

在這個例子中，我們使用"period"參數(shù)來設(shè)置時鐘信號"CK"的周期為 2 個時間周期。這意味著時鐘信號每隔 2 個時間周期變化一次。

同時，我們使用"phase"參數(shù)來調(diào)整信號"CMD"和"ADDR"的相位。相位的值為 0.5，表示信號的波形在時間軸上整體向右偏移了 0.5 個時間周期。這樣做可以讓信號在時鐘邊沿之前或之后發(fā)生狀態(tài)變化。

"CMD"信號表示了 DDR 讀取事務(wù)的命令序列，"ADDR"信號表示了地址序列。"data"數(shù)組提供了每個部分的標(biāo)簽。

"DQS"信號和"DQ"信號分別表示數(shù)據(jù)校驗和數(shù)據(jù)信號。其中，"DQS"信號在時鐘邊沿之前有一個延遲，"DQ"信號在時鐘邊沿之后有一個延遲。

渲染后的時序圖如下：

DDR讀時序

在這個時序圖中，我們可以看到時鐘信號"CK"每隔 2 個時間周期發(fā)生一次變化。"CMD"和"ADDR"信號的波形整體向右偏移了 0.5 個時間周期，以達(dá)到與時鐘信號的相位差。"DQS"信號在時鐘邊沿之前有一個延遲，"DQ"信號在時鐘邊沿之后有一個延遲。

通過調(diào)整"period"和"phase"參數(shù)，我們可以更靈活地控制時序圖中各個信號的周期和相位，從而更好地表達(dá)復(fù)雜的數(shù)字信號行為。WaveDrom 提供了豐富的功能，幫助我們創(chuàng)建詳細(xì)和直觀的數(shù)字時序圖，用于硬件設(shè)計、嵌入式系統(tǒng)開發(fā)、通信協(xié)議分析等領(lǐng)域。

config{}屬性

在時序圖中，config{}屬性用于控制渲染的不同方面。

hscale

config:{hscale:#}屬性用于調(diào)整時序圖的水平縮放比例。用戶可以設(shè)置任何大于 0 的整數(shù)值。

下面是一個示例，展示了如何使用 config{hscale:#}屬性來調(diào)整時序圖的水平縮放比例：

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

在這個例子中，我們使用 config{hscale:1}屬性將水平縮放比例設(shè)置為 1。這意味著時序圖將以原始比例進(jìn)行渲染，每個時間周期占據(jù)一個單位寬度。

渲染后的時序圖如下：

水平比例1 水平比例2

skin

在時序圖中，我們可以使用 config:{skin:'...'}屬性來選擇WaveDrom 的皮膚樣式[2]。該屬性僅在頁面上的第一個時序圖中起作用。WaveDrom 編輯器包含兩種標(biāo)準(zhǔn)皮膚：'default'和'narrow'。

head/foot

head:{...}和 foot:{...}屬性用于定義時序圖上方和下方的內(nèi)容區(qū)域。可以在這些屬性中添加文本或其他元素。

tick/tock

tick 屬性可以添加與垂直標(biāo)記對齊的時間線標(biāo)簽，而 tock 屬性可以在垂直標(biāo)記之間添加時間線標(biāo)簽。

text

text 屬性用于添加標(biāo)題或說明文本。

every

every 屬性用于指定僅在每 N 個周期渲染一次標(biāo)記和時間線標(biāo)簽。

下面是一個示例，展示了如何使用這些屬性來定義一個時序圖：

{"signal":[
{"name":"clk","wave":"p...."},
{"name":"Data","wave":"x345x","data":"abc"},
{"name":"Request","wave":"01..0"}
],
"head":{
"text":"WaveDromexample",
"tick":0,
"every":2
},
"foot":{
"text":"Figure100",
"tock":9
}
}

在這個例子中，我們添加了頭部（head）和底部（foot）的文本內(nèi)容。頭部文本設(shè)置為"WaveDrom example"，并使用 tick 屬性指定不添加時間線標(biāo)簽。每隔 2 個周期渲染一次標(biāo)記和時間線標(biāo)簽。底部文本設(shè)置為"Figure 100"，并使用 tock 屬性在垂直標(biāo)記之間添加時間線標(biāo)簽。

渲染后的時序圖如下：

屬性示例

在 WaveDrom 中，head 和 foot 屬性用于定義時序圖上方和下方的文本內(nèi)容，這些文本內(nèi)容支持 SVG text 的所有屬性。可以使用 JsonML 標(biāo)記語言來表示 SVG 文本內(nèi)容，并且可以使用一些預(yù)定義的樣式來設(shè)置文本的字體大小和顏色。除此之外，還可以使用其他 SVG tspan 屬性來自由地定制文本的樣式。

下面是一個示例，展示了如何使用不同的樣式來設(shè)置時序圖頭部和底部的文本內(nèi)容：

{"signal":[
{"name":"clk","wave":"p.....PPPPp...."},
{"name":"dat","wave":"x....2345x.....","data":"abcd"},
{"name":"req","wave":"0....1...0....."}
],
"head":{"text":
["tspan",
["tspan",{"class":"errorh1"},"error"],
["tspan",{"class":"warningh2"},"warning"],
["tspan",{"class":"infoh3"},"info"],
["tspan",{"class":"successh4"},"success"],
["tspan",{"class":"mutedh5"},"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
}
}

在這個例子中，我們使用 JsonML 標(biāo)記語言來表示頭部和底部的文本內(nèi)容，并為每個文本段落設(shè)置了不同的樣式。例如，我們使用了類名"h1"、"h2"、"h3"等來設(shè)置不同的字體大小。使用類名"error"、"warning"、"info"、"success"、"muted"等來設(shè)置不同的字體顏色樣式。我們還可以使用其他 SVG tspan 屬性來設(shè)置文本的斜體、粗體、填充顏色等。

渲染后的時序圖如下：

head/foot文本屬性示例

箭頭

曲線

在 WaveDrom 中，我們可以使用箭頭和曲線來連接不同的信號，以表示它們之間的關(guān)聯(lián)和數(shù)據(jù)傳遞。

以下是一些常用的箭頭和曲線符號：

~：普通曲線

-~：從左到右的曲線箭頭

<~>：雙向曲線箭頭

<~>：雙向曲線箭頭

~>：從左到右的直線箭頭

-~>：從左到右的實心箭頭

~->：從右到左的實心箭頭

下面是一個示例，展示了如何使用箭頭和曲線來連接不同的信號：

{"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~bt1","c-~at2","c-~>dtime3","d~-e",
"e~>f","f->g","g-~>h","h~>isometext","h~->j"
]
}

渲染后的時序圖如下：

箭頭和曲線

折線

在 WaveDrom 中，我們還可以使用尖銳的線條符號來表示不同信號之間的連接關(guān)系。這些尖銳的線條符號可以更直觀地展示信號之間的交互和數(shù)據(jù)傳遞。

以下是一些常用的尖銳線條符號：

-：直線連接

-|：從左到右的尖銳連接

|->：從右到左的尖銳連接

<->：雙向尖銳連接

<-|>：從左到右的雙向尖銳連接

|-|：從左到右的尖銳連接（包含短橫線）

下面是一個示例，展示了如何使用尖銳線條來連接不同的信號：

{"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-|at1","a-|ct2","b-|-ct3","c-|->et4","e-|>fmoretext",
"e|->dt6","c-g","f-h","g<->h3ms","I+J5ms"
]
}

在這個例子中，我們有 6 個信號（A、B、C、D）和 4 個連接節(jié)點（e、g、h、I、J），它們之間通過尖銳線條連接起來。每個信號都有相應(yīng)的波形圖，而尖銳線條則通過edge屬性來定義連接關(guān)系。

例如，b-|a t1表示從信號 B 到信號 A 的從左到右的尖銳連接，并在連接上方添加了文本標(biāo)簽"t1"。c-|->e t4表示從信號 C 到節(jié)點 e 的從左到右的尖銳連接，并在連接上方添加了文本標(biāo)簽"t4"。

渲染后的時序圖如下：

箭頭和折線

一些代碼

在 WaveDrom 中，我們可以使用 JavaScript 代碼來生成復(fù)雜的時序圖。這些代碼可以用來生成特定的信號和波形，以及自定義時序圖的展示效果。

以下是一個示例代碼，展示了如何使用 JavaScript 代碼生成一個特定的時序圖：

(function(bits,ticks){
vari,t,gray,state,data=[],arr=[];
for(i=0;i>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)

在這個例子中，我們使用了一個自執(zhí)行函數(shù)來生成一個包含 5 個信號的時序圖。每個信號的波形圖都是根據(jù)格雷碼（Gray code）生成的，其中 bits 參數(shù)表示信號的位數(shù)，ticks 參數(shù)表示時間周期數(shù)。代碼使用循環(huán)來生成信號的波形圖，并將生成的數(shù)據(jù)存儲在 data 數(shù)組中。

最終的時序圖包含 6 個信號，其中一個是用來表示二進(jìn)制計數(shù)的信號(bin)，其波形圖是一個等號序列。其他 5 個信號的波形圖是根據(jù)格雷碼生成的，分別對應(yīng) 0 位、1 位、2 位、3 位和 4 位格雷碼的波形。

渲染后的時序圖如下：

js代碼生成時序圖

審核編輯：湯梓紅