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

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

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

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

總體來說，Wavedrom 是一個(gè)強(qiáng)大而簡(jiǎn)便的文本轉(zhuǎn)圖表工具，適用于各種應(yīng)用場(chǎng)景，如硬件設(shè)計(jì)、軟件開發(fā)、文檔編寫等。其簡(jiǎn)單的語法和可視化的輸出，為開發(fā)人員提供了一個(gè)高效、直觀的工具，幫助他們更好地表達(dá)和展示數(shù)字信號(hào)和時(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ù)字信號(hào)和時(shí)序數(shù)據(jù)。通過使用 WaveJSON 格式來描述信號(hào)波形，用戶可以輕松地定義時(shí)序圖的各個(gè)部分，包括信號(hào)波形的名稱、周期和狀態(tài)。WaveDrom 支持多個(gè) WaveLane，可以同時(shí)顯示多個(gè)信號(hào)波形，從而實(shí)現(xiàn)更復(fù)雜的時(shí)序圖表。

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

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

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

信號(hào)

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

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

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

"Alfa" 1位信號(hào)

時(shí)鐘

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

合在一起

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

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

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

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

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

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

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

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

典型時(shí)序信號(hào)

空白和間隙

在時(shí)序圖中，我們有時(shí)需要添加間距和空白，以便更好地組織信號(hào)和使時(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è)例子中，我們添加了一些間距和空白，以便更好地分隔不同的信號(hào)。

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

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

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

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

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

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

帶間隙的時(shí)序圖

在這個(gè)時(shí)序圖中，我們可以看到信號(hào)之間的間距和空白，使得時(shí)序圖更加整齊和易讀。通過添加適當(dāng)?shù)拈g距和空白，我們可以更好地組織信號(hào)和時(shí)鐘邊沿，使時(shí)序圖更具可視化效果。接下來，我們將繼續(xù)探索 WaveDrom 的其他高級(jí)功能和實(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":?"A1?A2"?},{?"name":?"wdata",?"wave":?"x3.x....",?"data":?"D1"?},],{},["Slave",["ctrl",{?"name":?"ack",?"wave":?"x01x0.1x"?},],{?"name":?"rdata",?"wave":?"x.....4x",?"data":?"Q2"?},]
]}

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

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

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

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

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

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

分組時(shí)序圖

在這個(gè)時(shí)序圖中，我們可以看到不同分組內(nèi)的信號(hào)在不同時(shí)間周期內(nèi)的狀態(tài)。使用分組可以更好地組織和顯示復(fù)雜的時(shí)序圖，幫助我們更好地理解和分析數(shù)字信號(hào)之間的時(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":?"RAS?NOP?CAS?NOP?NOP?NOP?NOP",?"phase":?0.5?},{?"name":?"ADDR",?"wave":?"x.=x..=x........",?"data":?"ROW?COL",?"phase":?0.5?},{?"name":?"DQS",?"wave":?"z.......0.1010z."?},{?"name":?"DQ",?"wave":?"z.........5555z.",?"data":?"D0?D1?D2?D3"?}
]}

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

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

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

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

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

DDR讀時(shí)序

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

通過調(diào)整"period"和"phase"參數(shù)，我們可以更靈活地控制時(shí)序圖中各個(gè)信號(hào)的周期和相位，從而更好地表達(dá)復(fù)雜的數(shù)字信號(hào)行為。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)記對(duì)齊的時(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":?"a?b?c"?},{?"name":?"Request",?"wave":?"01..0"?}
],
"head":?{"text":?"WaveDrom?example","tick":?0,"every":?2
},
"foot":?{"text":?"Figure?100","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":?"a?b?c?d"?},{?"name":?"req",?"wave":?"0....1...0....."?}
],
"head":?{?"text":["tspan",["tspan",?{?"class":?"error?h1"?},?"error?"],["tspan",?{?"class":?"warning?h2"?},?"warning?"],["tspan",?{?"class":?"info?h3"?},?"info?"],["tspan",?{?"class":?"success?h4"?},?"success?"],["tspan",?{?"class":?"muted?h5"?},?"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 中，我們可以使用箭頭和曲線來連接不同的信號(hào)，以表示它們之間的關(guān)聯(lián)和數(shù)據(jù)傳遞。

以下是一些常用的箭頭和曲線符號(hào)：

• ~：普通曲線

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

• <~>：雙向曲線箭頭

• <~>：雙向曲線箭頭

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

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

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

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

{?"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~b?t1",?"c-~a?t2",?"c-~>d?time?3",?"d~-e","e~>f",?"f->g",?"g-~>h",?"h~>i?some?text",?"h~->j"
]
}

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

箭頭和曲線

折線

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

以下是一些常用的尖銳線條符號(hào)：

• -：直線連接

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

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

• <->：雙向尖銳連接

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

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

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

{?"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-|a?t1",?"a-|c?t2",?"b-|-c?t3",?"c-|->e?t4",?"e-|>f?more?text","e|->d?t6",?"c-g",?"f-h",?"g<->h?3?ms",?"I+J?5?ms"
]
}

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

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

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

箭頭和折線

一些代碼

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

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

(function?(bits,?ticks)?{var?i,?t,?gray,?state,?data?=?[],?arr?=?[];for?(i?=?0;?i?<?bits;?i++)?{arr.push({name:?i?+?'',?wave:?''});state?=?1;for?(t?=?0;?t?<?ticks;?t++)?{data.push(t?+?'');gray?=?(((t?>>?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è)信號(hào)的時(shí)序圖。每個(gè)信號(hào)的波形圖都是根據(jù)格雷碼（Gray code）生成的，其中 bits 參數(shù)表示信號(hào)的位數(shù)，ticks 參數(shù)表示時(shí)間周期數(shù)。代碼使用循環(huán)來生成信號(hào)的波形圖，并將生成的數(shù)據(jù)存儲(chǔ)在 data 數(shù)組中。

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

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

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