概述
WaveDrom Digital timing diagram 语法用于显示数字时间图表。该语法不是标准的 commonmark, 目前只有小书匠提供了对该语法的支持。
WaveDrom draws your Timing Diagram or Waveform from simple textual description.
It comes with description language, rendering engine and the editor.
使用
元数据标识: grammar_wavedrom
想要使用该语法,需要在设置>扩展语法 里把WaveDrom Digital timing diagram 语法选项打开。或者在每篇文章的元数据里通过 grammar_wavedrom 进行控制。系统默认关闭WaveDrom Digital timing diagram 语法语法功能
更详细的语法使用,可以参考这里 https://wavedrom.com/
示例
- 1``` wavedrom!
- 2{ "signal" : [
- 3 { "name": "clk", "wave": "P......" },
- 4 { "name": "bus", "wave": "x.==.=x", "data": ["head", "body", "tail", "data"] },
- 5 { "name": "wire", "wave": "0.1..0." }
- 6]}
- 7```
效果
WaveDrom
WaveDrom 是一个 javascript 应用。 WaveJSON 是一种描述数字时间图(Digital Timing Diagrams)的语言。 通过 WaveDrom 可以直接在浏览器内显示数字时间图表。元素 "信号(signal)" 是一个包含了 WaveLanes 的数组。 每个 WaveLane 有两个必选字段: "name" 和 "wave"。
步骤 1. 信号 (The Signal)
Following code will create 1-bit signal named "Alfa" that changes its state over time.
下面的代码将创建一个名为 "Alfa" 的 1-bit 信号,并随着时间显示状态变化
- 1``` wavedrom!
- 2{ signal: [{ name: "Alfa", wave: "01.zx=ud.23.45" }] }
- 3```
在 “wave” 字段内,每个字符表示一个单独时间点,符号"." 继承了前一个符号的状态。
Step 2. Adding Clock
Digital clock is a special type of signal. It changes twice per time period and can have positive or negative polarity. It also can have an optional marker on the working edge. The clock's blocks can be mixed with other signal states to create the clock gating effects. Here is the code:
- 1``` wavedrom!
- 2{ signal: [
- 3 { name: "pclk", wave: 'p.......' },
- 4 { name: "Pclk", wave: 'P.......' },
- 5 { name: "nclk", wave: 'n.......' },
- 6 { name: "Nclk", wave: 'N.......' },
- 7 {},
- 8 { name: 'clk0', wave: 'phnlPHNL' },
- 9 { name: 'clk1', wave: 'xhlhLHl.' },
- 10 { name: 'clk2', wave: 'hpHplnLn' },
- 11 { name: 'clk3', wave: 'nhNhplPl' },
- 12 { name: 'clk4', wave: 'xlh.L.Hx' },
- 13]}
- 14```
and the rendered diagram:
Step 3. Putting all together
Typical timing diagram would have the clock and signals (wires). Multi-bit signals will try to grab the labels from "data"
array.
- 1``` wavedrom!
- 2{ signal: [
- 3 { name: "clk", wave: "P......" },
- 4 { name: "bus", wave: "x.==.=x", data: ["head", "body", "tail", "data"] },
- 5 { name: "wire", wave: "0.1..0." }
- 6]}
- 7```
Step 4. Spacers and Gaps
- 1``` wavedrom!
- 2{ signal: [
- 3 { name: "clk", wave: "p.....|..." },
- 4 { name: "Data", wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
- 5 { name: "Request", wave: "0.1..0|1.0" },
- 6 {},
- 7 { name: "Acknowledge", wave: "1.....|01." }
- 8]}
- 9```
Step 5. The groups
WaveLanes can be united in named groups that are represented in form of arrays. ['group name', {...}, {...}, ...]
The first entry of array is the group's name. The groups can be nested.
- 1``` wavedrom!
- 2{ signal: [
- 3 { name: 'clk', wave: 'p..Pp..P'},
- 4 ['Master',
- 5 ['ctrl',
- 6 {name: 'write', wave: '01.0....'},
- 7 {name: 'read', wave: '0...1..0'}
- 8 ],
- 9 { name: 'addr', wave: 'x3.x4..x', data: 'A1 A2'},
- 10 { name: 'wdata', wave: 'x3.x....', data: 'D1' },
- 11 ],
- 12 {},
- 13 ['Slave',
- 14 ['ctrl',
- 15 {name: 'ack', wave: 'x01x0.1x'},
- 16 ],
- 17 { name: 'rdata', wave: 'x.....4x', data: 'Q2'},
- 18 ]
- 19]}
- 20```
Step 6. Period and Phase
"period"
and "phase"
parameters can be used to adjust each WaveLane.
DDR Read transaction
- 1```wavedrom!
- 2{ signal: [
- 3 { name: "CK", wave: "P.......", period: 2 },
- 4 { name: "CMD", wave: "x.3x=x4x=x=x=x=x", data: "RAS NOP CAS NOP NOP NOP NOP", phase: 0.5 },
- 5 { name: "ADDR", wave: "x.=x..=x........", data: "ROW COL", phase: 0.5 },
- 6 { name: "DQS", wave: "z.......0.1010z." },
- 7 { name: "DQ", wave: "z.........5555z.", data: "D0 D1 D2 D3" }
- 8]}
- 9```
Step 7.The config{} property
The config:{...}
property controls different aspects of rendering.
hscale
config:{hscale:#}
property controls the horizontal scale of the diagram. User can put any integer number greater than 0.
- 1```wavedrom!
- 2{ signal: [
- 3 { name: "clk", wave: "p...." },
- 4 { name: "Data", wave: "x345x", data: ["head", "body", "tail"] },
- 5 { name: "Request", wave: "01..0" }
- 6 ],
- 7 config: { hscale: 1 }
- 8}
- 9```
hscale = 1 (default)
hscale = 2
hscale = 3
skin
config:{skin:'...'}
property can be used to select the WaveDrom skin. The property works only inside the first timing diagram on the page. WaveDrom Editor includes two standard skins: 'default'
and 'narrow'
head/foot
head:{...}
and foot:{...}
properties define the content of the area above and below the timing diagram.
tick
-adds timeline labels aligned to vertical markers.
tock
-adds timeline labels between the vertical markers.
text
-adds title / caption text.
- 1``` wavedrom!
- 2{signal: [
- 3 {name:'clk', wave: 'p....' },
- 4 {name:'Data', wave: 'x345x', data: 'a b c' },
- 5 {name:'Request', wave: '01..0' }
- 6],
- 7 head:{
- 8 text:'WaveDrom example',
- 9 tick:0,
- 10 },
- 11 foot:{
- 12 text:'Figure 100',
- 13 tock:9
- 14 },
- 15}
- 16```
head
/ foot
text has all properties of SVG text. Standard SVG tspan
attributes can be used to modify default properties of text. JsonML markup language used to represent SVG text content. Several predefined styles can be used and intermixed:
h1
h2
h3
h4
h5
h6
-- predefined font sizes.
muted
warning
error
info
success
-- font color styles.
Other SVG tspan
attributes can be used in freestyle as shown below.
- 1``` wavedrom!
- 2{signal: [
- 3 {name:'clk', wave: 'p.....PPPPp....' },
- 4 {name:'dat', wave: 'x....2345x.....', data: 'a b c d' },
- 5 {name:'req', wave: '0....1...0.....' }
- 6],
- 7head: {text:
- 8 ['tspan',
- 9 ['tspan', {class:'error h1'}, 'error '],
- 10 ['tspan', {class:'warning h2'}, 'warning '],
- 11 ['tspan', {class:'info h3'}, 'info '],
- 12 ['tspan', {class:'success h4'}, 'success '],
- 13 ['tspan', {class:'muted h5'}, 'muted '],
- 14 ['tspan', {class:'h6'}, 'h6 '],
- 15 'default ',
- 16 ['tspan', {fill:'pink', 'font-weight':'bold', 'font-style':'italic'}, 'pink-bold-italic']
- 17 ]
- 18},
- 19foot: {text:
- 20 ['tspan', 'E=mc',
- 21 ['tspan', {dy:'-5'}, '2'],
- 22 ['tspan', {dy: '5'}, '. '],
- 23 ['tspan', {'font-size':'25'}, 'B '],
- 24 ['tspan', {'text-decoration':'overline'},'over '],
- 25 ['tspan', {'text-decoration':'underline'},'under '],
- 26 ['tspan', {'baseline-shift':'sub'}, 'sub '],
- 27 ['tspan', {'baseline-shift':'super'}, 'super ']
- 28 ],tock:-5
- 29}
- 30}
- 31```
Step 8. Arrows
Splines
~ -~
<~> <-~>
~> -~> ~->
- 1``` wavedrom!
- 2{ signal: [
- 3 { name: 'A', wave: '01........0....', node: '.a........j' },
- 4 { name: 'B', wave: '0.1.......0.1..', node: '..b.......i' },
- 5 { name: 'C', wave: '0..1....0...1..', node: '...c....h..' },
- 6 { name: 'D', wave: '0...1..0.....1.', node: '....d..g...' },
- 7 { name: 'E', wave: '0....10.......1', node: '.....ef....' }
- 8 ],
- 9 edge: [
- 10 'a~b t1', 'c-~a t2', 'c-~>d time 3', 'd~-e',
- 11 'e~>f', 'f->g', 'g-~>h', 'h~>i some text', 'h~->j'
- 12 ]
- 13}
- 14```
Sharp lines
- -| -|-
<-> <-|> <-|->
-> -|> -|-> |->
- 1``` wavedrom!
- 2{ signal: [
- 3 { name: 'A', wave: '01..0..', node: '.a..e..' },
- 4 { name: 'B', wave: '0.1..0.', node: '..b..d.', phase:0.5 },
- 5 { name: 'C', wave: '0..1..0', node: '...c..f' },
- 6 { node: '...g..h' }
- 7 ],
- 8 edge: [
- 9 'b-|a t1', 'a-|c t2', 'b-|-c t3', 'c-|->e t4', 'e-|>f more text',
- 10 'e|->d t6', 'c-g', 'f-h', 'g<->h 3 ms'
- 11 ]
- 12}
- 13```