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

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

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

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

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

用法和示例

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

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

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

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

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

信號

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

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

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

"Alfa" 1位信號

時(shí)鐘

數(shù)字時(shí)鐘是一種特殊類型的信號。它在每個(gè)時(shí)間周期內(nèi)變化兩次，可以具有正極性或負(fù)極性。此外，它還可以在工作邊沿上帶有可選的標(biāo)記。時(shí)鐘的各個(gè)塊可以與其他信號狀態(tài)混合，以創(chuàng)建時(shí)鐘門控效果。下面是代碼和生成的圖示：

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

渲染后的時(shí)鐘圖示如下：

時(shí)鐘信號

合在一起

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

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

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

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

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

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

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

渲染后的時(shí)序圖如下：

典型時(shí)序信號

空白和間隙

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

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

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

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

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

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

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

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

渲染后的時(shí)序圖如下：

帶間隙的時(shí)序圖

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

分組

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

下面是一個(gè)包含分組的時(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"},
]
]}

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

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

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

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

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

渲染后的時(shí)序圖如下：

分組時(shí)序圖

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

周期和相位

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

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

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

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

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

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

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

渲染后的時(shí)序圖如下：

DDR讀時(shí)序

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

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

config{}屬性

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

hscale

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

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

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

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

渲染后的時(shí)序圖如下：

水平比例1 水平比例2

skin

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

head/foot

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

tick/tock

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

text

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

every

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

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

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

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

渲染后的時(shí)序圖如下：

屬性示例

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

下面是一個(gè)示例，展示了如何使用不同的樣式來設(shè)置時(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
}
}

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

渲染后的時(shí)序圖如下：

head/foot文本屬性示例

箭頭

曲線

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

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

~：普通曲線

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

<~>：雙向曲線箭頭

<~>：雙向曲線箭頭

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

-~>：從左到右的實(shí)心箭頭

~->：從右到左的實(shí)心箭頭

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

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

渲染后的時(shí)序圖如下：

箭頭和曲線

折線

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

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

-：直線連接

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

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

<->：雙向尖銳連接

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

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

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

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

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

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

渲染后的時(shí)序圖如下：

箭頭和折線

一些代碼

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

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

(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)

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

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

渲染后的時(shí)序圖如下：

js代碼生成時(shí)序圖

審核編輯：湯梓紅