南京观海微电子----时序图绘制工具

Wavedrom 是一款功能强大且简单易用的文本转图表工具，被广泛应用于生成时序图、波形图等交互式波形。其特点在于使用简单的文本语法，使得开发人员能够以可视化的方式表示数字信号和时间序列数据。Wavedrom 的优势在于其高度灵活性和可扩展性，使用户能够快速绘制复杂的波形和图表，并轻松与其他文档和代码进行整合。

Wavedrom 的基本语法相对简单，以 JSON 对象或简洁的文本描述波形和时序信息。开发人员只需编写简短的描述，即可生成直观的波形图。通过使用不同的标记和元素，用户可以定义时序图中的信号波形、时钟周期、状态转换等内容。Wavedrom 支持自定义样式和布局，用户可以根据需求美化波形图，增加标签和注释以增强可读性。

时序图是 Wavedrom 最常见的用途之一，通过 Wavedrom 绘制的时序图可以清晰地展示数字信号和数据的传输过程。例如，在硬件设计中，时序图可以用于描述寄存器读写、信号传输和时钟脉冲的情况，从而帮助开发人员更好地理解和分析系统的工作状态。

值得一提的是，Wavedrom 不仅可以独立使用，还可以与 Markdown 等文档格式无缝整合。通过将 Wavedrom 图表代码嵌入文档中，开发人员可以直接在文档中呈现交互式的波形图，提升文档的可读性和交互性。

总体来说，Wavedrom 是一个强大而简便的文本转图表工具，适用于各种应用场景，如硬件设计、软件开发、文档编写等。其简单的语法和可视化的输出，为开发人员提供了一个高效、直观的工具，帮助他们更好地表达和展示数字信号和时间序列数据。

用法和示例

WaveDrom 是一个基于 JavaScript 的应用程序。WaveJSON 是一种描述数字时序图的格式。WaveDrom 可以直接在浏览器中渲染这些图表。"signal"元素是 WaveLane 的数组。每个 WaveLane 都有两个必填字段："name"和"wave"。

WaveDrom 是一个强大的工具，可用于可视化数字信号和时序数据。通过使用 WaveJSON 格式来描述信号波形，用户可以轻松地定义时序图的各个部分，包括信号波形的名称、周期和状态。WaveDrom 支持多个 WaveLane，可以同时显示多个信号波形，从而实现更复杂的时序图表。

"wave"字段是 WaveLane 的关键部分，用于定义信号波形。它由一系列字符组成，包括数字 0 和 1，代表数字信号的高和低电平，以及"."，代表未定义或无效状态。此外，WaveDrom 还支持其他特殊字符，如"p"代表时钟周期，"n"代表一个时钟周期内的半个周期，"|"用于分隔不同的时钟周期。

通过将这些 WaveLane 组合成一个"signal"数组，并为每个 WaveLane 指定名称和波形描述，用户可以创建详细且直观的数字时序图。WaveDrom 渲染引擎会将这些描述解析并在浏览器中实时绘制出时序图形。

总的来说，WaveDrom 提供了一种简单但强大的方式，通过 WaveJSON 格式和 WaveLane 的组织，使用户能够在浏览器中生成各种数字时序图。它在硬件设计、嵌入式系统开发、通信协议分析等领域中有着广泛的应用，帮助开发人员更好地理解和分析数字信号的行为和传输过程。

信号

从一个简单的例子开始。下面的代码将创建一个名为"Alfa"的 1 位信号，并随时间改变其状态。

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

在"wave"字符串中，每个字符代表一个时间周期。符号"."将前一个状态延续一个周期。现在，让我们看一下它的图示：

"Alfa" 1位信号

时钟

数字时钟是一种特殊类型的信号。它在每个时间周期内变化两次，可以具有正极性或负极性。此外，它还可以在工作边沿上带有可选的标记。时钟的各个块可以与其他信号状态混合，以创建时钟门控效果。下面是代码和生成的图示：

{?"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"数组中获取相应的标签。

下面是一个例子，展示了一个包含时钟信号、多位信号和单位信号的典型时序图：

{?"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"表示未定义的状态，"="表示稳定的高电平或低电平，"."表示未稳定状态。"data"数组包含多位信号的标签，分别是："head"、"body"、"tail"和"data"。

• 单位信号"wire"用"0.1..0."表示，表示在时间周期内信号从低电平切换到高电平再切换回低电平。

渲染后的时序图如下：

典型时序信号

空白和间隙

在时序图中，我们有时需要添加间距和空白，以便更好地组织信号和使时序图更易于阅读。下面是一个带有间距和空白的时序图示例：

{?"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"、"="、"."组成，数据数组"data"提供了多位信号各个部分的标签："head"、"body"、"tail"和"data"。后面有一个间距"|"，然后是"=."，代表一个空白周期后紧跟着一个稳定高电平。

• "Request"信号由"0"、"1"、"."组成，代表低电平、高电平和未定义状态。后面有一个间距"|"，然后是"1.0"，代表一个高电平后紧跟着一个空白周期。

• 接着有一个空白行，表示两个信号之间的空白。

• 最后，"Acknowledge"信号由"1"、"."组成，后面有一个间距"|"，然后是"01."，代表一个高电平后紧跟着一个低电平和一个空白周期。

渲染后的时序图如下：

带间隙的时序图

在这个时序图中，我们可以看到信号之间的间距和空白，使得时序图更加整齐和易读。通过添加适当的间距和空白，我们可以更好地组织信号和时钟边沿，使时序图更具可视化效果。接下来，我们将继续探索 WaveDrom 的其他高级功能和实际应用，帮助您更好地运用这个强大的文本转图表工具。

分组

在时序图中，我们可以将 WaveLane 组合成具有名称的分组，分组表示为数组形式。['分组名称', {...}, {...}, ...] 数组的第一个条目是分组的名称。分组之间还可以嵌套。

下面是一个包含分组的时序图示例：

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

在这个例子中，我们使用了分组来组织不同的信号，将它们放在名为"Master"和"Slave"的两个分组中。

• "clk"信号用"p..Pp..P"表示，代表正极性时钟边沿和负极性时钟边沿。

• "Master"分组包含了三个子信号，它们分别在名称为"ctrl"的子分组中，表示控制信号"write"和"read"，以及名称为"addr"的信号，"data"数组提供了信号的标签。

• 接着有一个空白行，表示两个分组之间的空白。

• "Slave"分组包含了两个子信号，都在名称为"ctrl"的子分组中，表示控制信号"ack"，以及名称为"rdata"的信号，"data"数组提供了信号的标签。

渲染后的时序图如下：

分组时序图

在这个时序图中，我们可以看到不同分组内的信号在不同时间周期内的状态。使用分组可以更好地组织和显示复杂的时序图，帮助我们更好地理解和分析数字信号之间的时序关系。通过 WaveDrom 的强大功能，我们可以轻松地在时序图中添加分组，使其更具可视化效果和清晰度。

周期和相位

在时序图中，我们可以使用"period"和"phase"参数来调整每个 WaveLane 的周期和相位。

下面是一个 DDR 读取事务的时序图示例：

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

在这个例子中，我们使用"period"参数来设置时钟信号"CK"的周期为 2 个时间周期。这意味着时钟信号每隔 2 个时间周期变化一次。

同时，我们使用"phase"参数来调整信号"CMD"和"ADDR"的相位。相位的值为 0.5，表示信号的波形在时间轴上整体向右偏移了 0.5 个时间周期。这样做可以让信号在时钟边沿之前或之后发生状态变化。

"CMD"信号表示了 DDR 读取事务的命令序列，"ADDR"信号表示了地址序列。"data"数组提供了每个部分的标签。

"DQS"信号和"DQ"信号分别表示数据校验和数据信号。其中，"DQS"信号在时钟边沿之前有一个延迟，"DQ"信号在时钟边沿之后有一个延迟。

渲染后的时序图如下：

DDR读时序

在这个时序图中，我们可以看到时钟信号"CK"每隔 2 个时间周期发生一次变化。"CMD"和"ADDR"信号的波形整体向右偏移了 0.5 个时间周期，以达到与时钟信号的相位差。"DQS"信号在时钟边沿之前有一个延迟，"DQ"信号在时钟边沿之后有一个延迟。

通过调整"period"和"phase"参数，我们可以更灵活地控制时序图中各个信号的周期和相位，从而更好地表达复杂的数字信号行为。WaveDrom 提供了丰富的功能，帮助我们创建详细和直观的数字时序图，用于硬件设计、嵌入式系统开发、通信协议分析等领域。

config{}属性

在时序图中，config{}属性用于控制渲染的不同方面。

hscale

config:{hscale:#}属性用于调整时序图的水平缩放比例。用户可以设置任何大于 0 的整数值。

下面是一个示例，展示了如何使用 config{hscale:#}属性来调整时序图的水平缩放比例：

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

在这个例子中，我们使用 config{hscale:1}属性将水平缩放比例设置为 1。这意味着时序图将以原始比例进行渲染，每个时间周期占据一个单位宽度。

渲染后的时序图如下：

水平比例1

水平比例2

skin

在时序图中，我们可以使用 config:{skin:'...'}属性来选择WaveDrom 的皮肤样式[2]。该属性仅在页面上的第一个时序图中起作用。WaveDrom 编辑器包含两种标准皮肤：'default'和'narrow'。

head/foot

head:{...}和 foot:{...}属性用于定义时序图上方和下方的内容区域。可以在这些属性中添加文本或其他元素。

tick/tock

tick 属性可以添加与垂直标记对齐的时间线标签，而 tock 属性可以在垂直标记之间添加时间线标签。

text

text 属性用于添加标题或说明文本。

every

every 属性用于指定仅在每 N 个周期渲染一次标记和时间线标签。

下面是一个示例，展示了如何使用这些属性来定义一个时序图：

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

在这个例子中，我们添加了头部（head）和底部（foot）的文本内容。头部文本设置为"WaveDrom example"，并使用 tick 属性指定不添加时间线标签。每隔 2 个周期渲染一次标记和时间线标签。底部文本设置为"Figure 100"，并使用 tock 属性在垂直标记之间添加时间线标签。

渲染后的时序图如下：

属性示例

在 WaveDrom 中，head 和 foot 属性用于定义时序图上方和下方的文本内容，这些文本内容支持 SVG text 的所有属性。可以使用 JsonML 标记语言来表示 SVG 文本内容，并且可以使用一些预定义的样式来设置文本的字体大小和颜色。除此之外，还可以使用其他 SVG tspan 属性来自由地定制文本的样式。

下面是一个示例，展示了如何使用不同的样式来设置时序图头部和底部的文本内容：

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

在这个例子中，我们使用 JsonML 标记语言来表示头部和底部的文本内容，并为每个文本段落设置了不同的样式。例如，我们使用了类名"h1"、"h2"、"h3"等来设置不同的字体大小。使用类名"error"、"warning"、"info"、"success"、"muted"等来设置不同的字体颜色样式。我们还可以使用其他 SVG tspan 属性来设置文本的斜体、粗体、填充颜色等。

渲染后的时序图如下：

head/foot文本属性示例

箭头

曲线

在 WaveDrom 中，我们可以使用箭头和曲线来连接不同的信号，以表示它们之间的关联和数据传递。

以下是一些常用的箭头和曲线符号：

• ~：普通曲线

• -~：从左到右的曲线箭头

• <~>：双向曲线箭头

• <~>：双向曲线箭头

• ~>：从左到右的直线箭头

• -~>：从左到右的实心箭头

• ~->：从右到左的实心箭头

下面是一个示例，展示了如何使用箭头和曲线来连接不同的信号：

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

渲染后的时序图如下：

箭头和曲线

折线

在 WaveDrom 中，我们还可以使用尖锐的线条符号来表示不同信号之间的连接关系。这些尖锐的线条符号可以更直观地展示信号之间的交互和数据传递。

以下是一些常用的尖锐线条符号：

• -：直线连接

• -|：从左到右的尖锐连接

• |->：从右到左的尖锐连接

• <->：双向尖锐连接

• <-|>：从左到右的双向尖锐连接

• |-|：从左到右的尖锐连接（包含短横线）

下面是一个示例，展示了如何使用尖锐线条来连接不同的信号：

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

在这个例子中，我们有 6 个信号（A、B、C、D）和 4 个连接节点（e、g、h、I、J），它们之间通过尖锐线条连接起来。每个信号都有相应的波形图，而尖锐线条则通过edge属性来定义连接关系。

例如，b-|a t1表示从信号 B 到信号 A 的从左到右的尖锐连接，并在连接上方添加了文本标签"t1"。c-|->e t4表示从信号 C 到节点 e 的从左到右的尖锐连接，并在连接上方添加了文本标签"t4"。

渲染后的时序图如下：

箭头和折线

一些代码

在 WaveDrom 中，我们可以使用 JavaScript 代码来生成复杂的时序图。这些代码可以用来生成特定的信号和波形，以及自定义时序图的展示效果。

以下是一个示例代码，展示了如何使用 JavaScript 代码生成一个特定的时序图：

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

在这个例子中，我们使用了一个自执行函数来生成一个包含 5 个信号的时序图。每个信号的波形图都是根据格雷码（Gray code）生成的，其中 bits 参数表示信号的位数，ticks 参数表示时间周期数。代码使用循环来生成信号的波形图，并将生成的数据存储在 data 数组中。

最终的时序图包含 6 个信号，其中一个是用来表示二进制计数的信号(bin)，其波形图是一个等号序列。其他 5 个信号的波形图是根据格雷码生成的，分别对应 0 位、1 位、2 位、3 位和 4 位格雷码的波形。

渲染后的时序图如下：

js代码生成时序图