28:null 29:["$","title",null,{"children":"Hitchhiker's Guide to the WaveDrom | Aliaksei Chapyzhenka | Observable"}] 2e:[] 2c:{"id":"a75ef34bc9ccd5ca","slug":"wavedrom","title":"Hitchhiker's Guide to the WaveDrom","thumbnail":"af39153b86cfa3c30041216aa6a5bd8a1ce31c768532031466d156dde9b14df6","access_level":"public","create_time":"$D2018-08-17T15:47:59.602Z","update_time":"$D2026-07-09T00:16:27.674Z","view_time":null,"first_public_time":"$D2018-09-26T07:42:23.051Z","has_unpublished_edits":null,"fork":false,"stars":21,"starred":false,"owner":{"type":"team","id":"7b1c5b66fd9285b7","login":"drom","name":"Aliaksei Chapyzhenka","avatar_url":"https://avatars-next.observableusercontent.com/f76b026367381023f99af919f112679e18ac3edad1d4905354ca8bf207f0f651","tier":"starter_2024"},"version":286,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"feb36c5199c05e3b","login":"drom","name":"Aliaksei Chapyzhenka","avatar_url":"https://avatars-next.observableusercontent.com/f76b026367381023f99af919f112679e18ac3edad1d4905354ca8bf207f0f651","tier":null}],"members":[{"type":"individual","id":"feb36c5199c05e3b","login":"drom","name":"Aliaksei Chapyzhenka","avatar_url":"https://avatars-next.observableusercontent.com/f76b026367381023f99af919f112679e18ac3edad1d4905354ca8bf207f0f651","tier":null,"role":"editor"},{"type":"team","id":"7b1c5b66fd9285b7","login":"drom","name":"Aliaksei Chapyzhenka","avatar_url":"https://avatars-next.observableusercontent.com/f76b026367381023f99af919f112679e18ac3edad1d4905354ca8bf207f0f651","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":{"id":"902c26c1f79769ee","slug":"wavedrom","title":"WaveDrom","owner":{"id":"7b1c5b66fd9285b7","login":"drom","name":"Aliaksei Chapyzhenka"}},"type":"notebook","body":{"title":"Hitchhiker's Guide to the WaveDrom","cells":[{"id":0,"value":"md`\n# Hitchhiker's Guide to the WaveDrom\n\n[WaveDrom](https://wavedrom.com) is a JavaScript application.\nWaveJSON is a format that describes Digital Timing Diagrams.\nWaveDrom renders the diagrams directly inside the browser.\nElement \\`\"signal\"\\` is an array of WaveLanes.\nEach WaveLane has two mandatory fields: \\`\"name\"\\` and \\`\"wave\"\\`.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`\n## Step 1. The Signal\n\nLets start with a quick example.\nFollowing code will create 1-bit signal named \\`\"Alfa\"\\` that changes its state over time.\n\n\\`\\`\\`js\n{ signal: [{ name: 'Alfa', wave: '01.zx=ud.23.45' }] }\n\\`\\`\\`\n\nEvery character in the \\`\"wave\"\\` string represents a single time period.\nSymbol \\`\".\"\\` extends previous state for one more period.\nHere is how it looks:\n\n${wd(\n{ signal: [{ name: 'Alfa', wave: '01.zx=ud.23.45' }] }\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`\n## Step 2. Adding Clock\n\nDigital clock is a special type of signal.\nIt changes twice per time period and can have positive or negative polarity.\nIt also can have an optional marker on the working edge.\nThe clock's blocks can be mixed with other signal states to create the clock gating effects.\nHere is the code:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"wd({ signal: [\n { name: 'pclk', wave: 'p.......' },\n { name: 'Pclk', wave: 'P.......' },\n { name: 'nclk', wave: 'n.......' },\n { name: 'Nclk', wave: 'N.......' },\n {},\n { name: 'clk0', wave: 'phnlPHNL' },\n { name: 'clk1', wave: 'xhlhLHl.' },\n { name: 'clk2', wave: 'hpHplnLn' },\n { name: 'clk3', wave: 'nhNhplPl' },\n { name: 'clk4', wave: 'xlh.L.Hx' },\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`\n## Step 3. Putting all together\n\nTypical timing diagram would have the clock and signals (wires). Multi-bit signals will try to grab the labels from \"data\" array.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"wd({ signal: [\n { name: \"clk\", wave: \"P......\" },\n { name: \"bus\", wave: \"x.==.=x\", data: [\"head\", \"body\", \"tail\", \"data\"] },\n { name: \"wire\", wave: \"0.1..0.\" }\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`## Step 4. Spacers and Gaps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"wd({ signal: [\n { name: \"clk\", wave: \"p.....|...\" },\n { name: \"Data\", wave: \"x.345x|=.x\", data: [\"head\", \"body\", \"tail\", \"data\"]},\n { name: \"Request\", wave: \"0.1..0|1.0\" },\n {},\n { name: \"Acknowledge\", wave: \"1.....|01.\" }\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`## Step 5. The groups\n\nWaveLanes can be united in named groups that are represented in form of arrays.\n\n\\`\\`\\`js\n['group name', {...}, {...}, ...]\n\\`\\`\\`\n\nThe first entry of array is the group's name.\n\nThe groups can be nested.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"wd({ signal: [\n { name: 'clk', wave: 'p..Pp..P'},\n ['Master',\n ['ctrl',\n {name: 'write', wave: '01.0....'},\n {name: 'read', wave: '0...1..0'}\n ],\n { name: 'addr', wave: 'x3.x4..x', data: 'A1 A2'},\n { name: 'wdata', wave: 'x3.x....', data: 'D1' },\n ],\n {},\n ['Slave',\n ['ctrl',\n {name: 'ack', wave: 'x01x0.1x'},\n ],\n { name: 'rdata', wave: 'x.....4x', data: 'Q2'},\n ]\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`\n## Step 6. Period and Phase\n\n\\`\"period\"\\` and \\`\"phase\"\\` parameters can be used to adjust each WaveLane.\n\n### DDR Read transaction\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"wd({ signal: [\n { name: \"CK\", wave: \"P.......\", period: 2 },\n { name: \"CMD\", wave: \"x.3x=x4x=x=x=x=x\", data: \"RAS NOP CAS NOP NOP NOP NOP\", phase: 0.5 },\n { name: \"ADDR\", wave: \"x.=x..=x........\", data: \"\\u0278 COL\", phase: 0.5 },\n { name: \"DQS\", wave: \"z.......0.1010z.\" },\n { name: \"DQ\", wave: \"z.........5555z.\", data: \" D0 D1 D2 D3 \" }\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`\n## Step 7.The config{} property\n\nThe \\`config: {...}\\` property controls different aspects of rendering.\n\n### hscale\n\n\\`config: {hscale: #}\\` property controls the horizontal scale of the diagram. User can put any integer number greater than 0.\n\n### hscale = 1 (default)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"wd({ signal: [\n { name: \"clk\", wave: \"p....\" },\n { name: \"Data\", wave: \"x345x\", data: [\"head\", \"body\", \"tail\"] },\n { name: \"Request\", wave: \"01..0\" }\n ],\n config: { hscale: 1 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`### hscale = 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"wd({ \"signal\" : [\n { \"name\": \"clk\", \"wave\": \"p....\" },\n { \"name\": \"Data\", \"wave\": \"x345x\", \"data\": [\"head\", \"body\", \"tail\"] },\n { \"name\": \"Request\", \"wave\": \"01..0\" }\n],\n \"config\" : { \"hscale\" : 2 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`### hscale = 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"wd({ \"signal\" : [\n { \"name\": \"clk\", \"wave\": \"p....\" },\n { \"name\": \"Data\", \"wave\": \"x345x\", \"data\": [\"head\", \"body\", \"tail\"]},\n { \"name\": \"Request\", \"wave\": \"01..0\" }\n],\n \"config\" : { \"hscale\" : 3 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`\n### skin\n\n\\`config: {skin: '...'}\\` property can be used to select the (WaveDrom skin).\nThe property works only inside the first timing diagram on the page.\n[WaveDrom Editor](https://wavedrom.com/editor.html) includes two standard skins: \\`'default'\\` and \\`'narrow'\\`\n\n### head/foot\n\n\\`head: {...}\\` and \\`foot: {...}\\` properties define the content of the area above and below the timing diagram.\n\n**tick**\n- adds timeline labels aligned to vertical markers.\n\n**tock**\n- adds timeline labels between the vertical markers.\n\n**text**\n- adds title / caption text.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"wd({signal: [\n {name:'clk', wave: 'p....' },\n {name:'Data', wave: 'x345x', data: 'a b c' },\n {name:'Request', wave: '01..0' }\n],\n head:{\n text:'WaveDrom example',\n tick:0,\n },\n foot:{\n text:'Figure 100',\n tock:9\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`\n

\nhead/\nfoot text has all properties of SVG text. Standard SVG\ntspan 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:\n\n

\n\\`h1, h2, h3, h4, h5, h6\\` -- predefined font sizes.\n\n

\n\\`muted, warning, error, info, success\\` -- font color styles.\n\nOther SVG \\`tspan\\` attributes can be used in freestyle as shown below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"wd({signal: [\n {name:'clk', wave: 'p.....PPPPp....' },\n {name:'dat', wave: 'x....2345x.....', data: 'a b c d' },\n {name:'req', wave: '0....1...0.....' }\n],\nhead: {text:\n ['tspan',\n ['tspan', {class:'error h1'}, 'error '],\n ['tspan', {class:'warning h2'}, 'warning '],\n ['tspan', {class:'info h3'}, 'info '],\n ['tspan', {class:'success h4'}, 'success '],\n ['tspan', {class:'muted h5'}, 'muted '],\n ['tspan', {class:'h6'}, 'h6 '],\n 'default ',\n ['tspan', {fill:'pink', 'font-weight':'bold', 'font-style':'italic'}, 'pink-bold-italic']\n ]\n},\nfoot: {text:\n ['tspan', 'E=mc',\n ['tspan', {dy:'-5'}, '2'],\n ['tspan', {dy: '5'}, '. '],\n ['tspan', {'font-size':'25'}, 'B '],\n ['tspan', {'text-decoration':'overline'},'over '],\n ['tspan', {'text-decoration':'underline'},'under '],\n ['tspan', {'baseline-shift':'sub'}, 'sub '],\n ['tspan', {'baseline-shift':'super'}, 'super ']\n ],tock:-5\n}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`\n

Step 8. Arrows

\n\n

Splines

\n\n

\n ~    -~\n<~>  <-~>\n ~>   -~>  ~->\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"wd({ signal: [\n { name: 'A', wave: '01........0....', node: '.a........j' },\n { name: 'B', wave: '0.1.......0.1..', node: '..b.......i' },\n { name: 'C', wave: '0..1....0...1..', node: '...c....h..' },\n { name: 'D', wave: '0...1..0.....1.', node: '....d..g...' },\n { name: 'E', wave: '0....10.......1', node: '.....ef....' }\n ],\n edge: [\n 'a~b t1', 'c-~a t2', 'c-~>d time 3', 'd~-e',\n 'e~>f', 'f->g', 'g-~>h', 'h~>i some text', 'h~->j'\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`\n

Sharp lines

\n\n

\n -   -|   -|-\n<-> <-|> <-|->\n ->  -|>  -|->  |->\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"wd({ signal: [\n { name: '', wave: '01..0..', node: '.a..e..' },\n { name: 'B', wave: '0.1..0.', node: '..b..d.', phase:0.5 },\n { name: 'C', wave: '0..1..0', node: '...c..f' },\n { node: '...g..h' }\n ],\n edge: [\n 'b-|a <t1', 'a-|c t2', 'b-|-c t3', 'c-|->e t4', 'e-|>f more text',\n 'e|->d t6', 'c-g', 'f-h', 'g<->h 3 ms'\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`\n## Step 9. Some code\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"wd((function (bits, ticks) {\n var i, t, gray, state, data = [], arr = [];\n for (i = 0; i < bits; i++) {\n arr.push({name: i + '', wave: ''});\n state = 1;\n for (t = 0; t < ticks; t++) {\n data.push(t + '');\n gray = (((t >> 1) ^ t) >> i) & 1;\n arr[i].wave += (gray === state) ? '.' : gray + '';\n state = gray;\n }\n }\n arr.unshift('gray');\n return {signal: [\n {name: 'bin', wave: '='.repeat(ticks), data: data}, arr\n ]};\n})(5, 16))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"wd = (() => {\n let i = 0;\n return obj => html`${wavedrom.onml.stringify(wavedrom.renderAny(i++, obj, wavedrom.waveSkin))}`\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"wavedrom = require('wavedrom@3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"