代码拉取完成，页面将自动刷新
<html>
<head>
<meta charset="UTF-8">
<title>Hitchhiker's Guide to the WaveDrom</title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<script type="text/javascript" src="skins/default.js"></script>
<!--script type="text/javascript" src="skins/narrow.js"></script-->
<script type="text/javascript" src="wavedrom.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto|Droid+Sans+Mono|Varela+Round' rel='stylesheet'>
<script type="text/javascript" src="scripts/shCore.min.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<link href="scripts/shCore.css" rel="stylesheet" type="text/css" />
<link href="scripts/shThemeDefault.css" rel="stylesheet" type="text/css" />
<link href="tutorial.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">
<h1>Hitchhiker's Guide to the WaveDrom</h1>
<a href="https://wavedrom.com">WaveDrom</a> is a JavaScript application.
WaveJSON is a format that describes Digital Timing Diagrams.
WaveDrom renders the diagrams directly inside the browser.
Element <span class="fixed">"signal"</span> is an array of WaveLanes.
Each WaveLane has two mandatory fields: <span class="fixed">"name"</span>
and <span class="fixed">"wave"</span>.
<h2 id="the-signal">Step 1. The Signal</h2>
Lets start with a quick example.
Following code will create 1-bit signal named <span class="fixed">"Alfa"</span>
that changes its state over time.
<pre class="brush: js">
{ signal: [{ name: "Alfa", wave: "01.zx=ud.23.456789" }] }
</pre>
Every character in the <span class="fixed">"wave"</span> string represents a single time period.
Symbol <span class="fixed">"."</span> extends previous state for one more period.
Here is how it looks:
<script type="WaveDrom">
{ signal: [{ name: "Alfa", wave: "01.zx=ud.23.456789" }] }
</script>
<a href="https://wavedrom.com/editor.html?%7B%20%22signal%22%20%3A%20%5B%7B%20%22name%22%3A%20%22Alfa%22%2C%20%22wave%22%3A%20%2201.zx%3Dud.23.456789%22%20%7D%5D%20%7D%0A">Edit Me >></a>
<h2 id="adding-clock">Step 2. Adding Clock</h2>
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:
<pre class="brush: js">
{ 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' },
]}
</pre>
and the rendered diagram:
<script type="WaveDrom">
{ 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' },
]}
</script>
<a href="https://wavedrom.com/editor.html?{%20signal%3A%20[%0A%20%20{%20name%3A%20%22pclk%22%2C%20wave%3A%20%27p.......%27%20}%2C%0A%20%20{%20name%3A%20%22Pclk%22%2C%20wave%3A%20%27P.......%27%20}%2C%0A%20%20{%20name%3A%20%22nclk%22%2C%20wave%3A%20%27n.......%27%20}%2C%0A%20%20{%20name%3A%20%22Nclk%22%2C%20wave%3A%20%27N.......%27%20}%2C%0A%20%20{}%2C%0A%20%20{%20name%3A%20%27clk0%27%2C%20wave%3A%20%27phnlPHNL%27%20}%2C%0A%20%20{%20name%3A%20%27clk1%27%2C%20wave%3A%20%27xhlhLHl.%27%20}%2C%0A%20%20{%20name%3A%20%27clk2%27%2C%20wave%3A%20%27hpHplnLn%27%20}%2C%0A%20%20{%20name%3A%20%27clk3%27%2C%20wave%3A%20%27nhNhplPl%27%20}%2C%0A%20%20{%20name%3A%20%27clk4%27%2C%20wave%3A%20%27xlh.L.Hx%27%20}%2C%0A]}">Edit Me >></a>
<h2 id="putting-all-together">Step 3. Putting all together</h2>
Typical timing diagram would have the clock and signals (wires).
Multi-bit signals will try to grab the labels from <span class="fixed">"data"</span> array.
<pre class="brush: js">
{ signal: [
{ name: "clk", wave: "P......" },
{ name: "bus", wave: "x.==.=x", data: ["head", "body", "tail", "data"] },
{ name: "wire", wave: "0.1..0." }
]}
</pre>
<script type="WaveDrom">
{ signal: [
{ name: "clk", wave: "P......" },
{ name: "bus", wave: "x.==.=x", data: ["head", "body", "tail", "data"] },
{ name: "wire", wave: "0.1..0." }
]}
</script>
<a href="https://wavedrom.com/editor.html?%7B%20%22signal%22%20%3A%20%5B%0A%20%20%7B%20%22name%22%3A%20%22clk%22%2C%20%20%22wave%22%3A%20%22P......%22%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22bus%22%2C%20%20%22wave%22%3A%20%22x.%3D%3D.%3Dx%22%2C%20%22data%22%3A%20%5B%22head%22%2C%20%22body%22%2C%20%22tail%22%2C%20%22data%22%5D%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22wire%22%2C%20%22wave%22%3A%20%220.1..0.%22%20%7D%0A%5D%7D%0A">Edit Me >></a>
<h2 id="spacers-and-gaps">Step 4. Spacers and Gaps</h2>
<pre class="brush: js">
{ 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." }
]}
</pre>
<script type="WaveDrom">
{ 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." }
]}
</script>
<a href="https://wavedrom.com/editor.html?%7B%20%22signal%22%20%3A%20%5B%0A%20%20%7B%20%22name%22%3A%20%22clk%22%2C%20%20%20%20%20%20%20%20%20%22wave%22%3A%20%22p.....%7C...%22%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22Data%22%2C%20%20%20%20%20%20%20%20%22wave%22%3A%20%22x.345x%7C%3D.x%22%2C%20%22data%22%3A%20%5B%22head%22%2C%20%22body%22%2C%20%22tail%22%2C%20%22data%22%5D%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22Request%22%2C%20%20%20%20%20%22wave%22%3A%20%220.1..0%7C1.0%22%20%7D%2C%0A%20%20%7B%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22Acknowledge%22%2C%20%22wave%22%3A%20%221.....%7C01.%22%20%7D%0A%5D%7D%0A">Edit Me >></a>
<h2 id="the-groups">Step 5. The groups</h2>
WaveLanes can be united in named groups that are represented in form of arrays.
<span class="fixed">['group name', {...}, {...}, ...]</span>
The first entry of array is the group's name.
The groups can be nested.
<pre class="brush: js">
{ 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'},
]
]}
</pre>
<script type="WaveDrom">
{ 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'},
]
]}
</script>
<a href="https://wavedrom.com/editor.html?%7Bsignal%3A%20%5B%0A%20%20%7B%20%20%20%20name%3A%20'clk'%2C%20%20%20wave%3A%20'p..Pp..P'%7D%2C%0A%20%20%5B'Master'%2C%0A%20%20%20%20%5B'ctrl'%2C%0A%20%20%20%20%20%20%7Bname%3A%20'write'%2C%20wave%3A%20'01.0....'%7D%2C%0A%20%20%20%20%20%20%7Bname%3A%20'read'%2C%20%20wave%3A%20'0...1..0'%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%7B%20%20name%3A%20'addr'%2C%20%20wave%3A%20'x3.x4..x'%2C%20data%3A%20'A1%20A2'%7D%2C%0A%20%20%20%20%7B%20%20name%3A%20'wdata'%2C%20wave%3A%20'x3.x....'%2C%20data%3A%20'D1'%20%20%20%7D%2C%0A%20%20%5D%2C%0A%20%20%7B%7D%2C%0A%20%20%5B'Slave'%2C%0A%20%20%20%20%5B'ctrl'%2C%0A%20%20%20%20%20%20%7Bname%3A%20'ack'%2C%20%20%20wave%3A%20'x01x0.1x'%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20%7B%20%20name%3A%20'rdata'%2C%20wave%3A%20'x.....4x'%2C%20data%3A%20'Q2'%7D%2C%0A%20%20%5D%0A%5D%7D">Edit Me >></a>
<h2 id="period-and-phase">Step 6. Period and Phase</h2>
<span class="fixed">"period"</span> and <span class="fixed">"phase"</span> parameters can be used to adjust each WaveLane.
<h3>DDR Read transaction</h3>
<pre class="brush: js">
{ 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" }
]}
</pre>
<script type="WaveDrom">
{ 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" }
]}
</script>
<a href="https://wavedrom.com/editor.html?%7B%20%22signal%22%20%3A%20%5B%0A%20%20%7B%20%22name%22%3A%20%22CK%22%2C%20%20%22wave%22%3A%20%22P.......%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22period%22%3A2%20%20%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22CMD%22%2C%20%22wave%22%3A%20%22x.3x%3Dx4x%3Dx%3Dx%3Dx%3Dx%22%2C%20%22data%22%20%3A%20%22RAS%20NOP%20CAS%20NOP%20NOP%20NOP%20NOP%22%2C%20%22phase%22%20%3A0.5%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22ADDR%22%2C%22wave%22%3A%20%22x.%3Dx..%3Dx........%22%2C%20%22data%22%20%3A%20%22ROW%20COL%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22phase%22%20%3A0.5%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22DQS%22%2C%20%22wave%22%3A%20%22z.......0.1010z.%22%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22DQ%22%2C%20%20%22wave%22%3A%20%22z.........5555z.%22%2C%20%22data%22%20%3A%20%22D0%20D1%20D2%20D3%22%20%7D%0A%5D%7D%0A">Edit Me >></a>
<h2>Step 7.The config{} property</h2>
The <span class="fixed">config:{...}</span> property controls different aspects of rendering.
<h3>hscale</h3>
<span class="fixed">config:{hscale:#}</span> property controls the horizontal scale of the diagram. User can put any integer number greater than 0.
<pre class="brush: js">
{ signal: [
{ name: "clk", wave: "p...." },
{ name: "Data", wave: "x345x", data: ["head", "body", "tail"] },
{ name: "Request", wave: "01..0" }
],
config: { hscale: 1 }
}
</pre>
<h3>hscale = 1 (default)</h3>
<script type="WaveDrom">
{ signal: [
{ name: "clk", wave: "p...." },
{ name: "Data", wave: "x345x", data: ["head", "body", "tail"] },
{ name: "Request", wave: "01..0" }
],
config: { hscale: 1 }
}
</script>
<a href="https://wavedrom.com/editor.html?%7B%20%22signal%22%20%3A%20%5B%0A%20%20%7B%20%22name%22%3A%20%22clk%22%2C%20%20%20%20%20%20%20%20%20%22wave%22%3A%20%22p....%22%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22Data%22%2C%20%20%20%20%20%20%20%20%22wave%22%3A%20%22x345x%22%2C%20%22data%22%3A%20%5B%22head%22%2C%20%22body%22%2C%20%22tail%22%5D%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22Request%22%2C%20%20%20%20%20%22wave%22%3A%20%2201..0%22%20%7D%0A%5D%2C%0A%20%20%22config%22%20%3A%20%7B%20%22hscale%22%20%3A%201%20%7D%0A%7D%0A">Edit Me >></a>
<h3>hscale = 2</h3>
<script type="WaveDrom">
{ "signal" : [
{ "name": "clk", "wave": "p...." },
{ "name": "Data", "wave": "x345x", "data": ["head", "body", "tail"] },
{ "name": "Request", "wave": "01..0" }
],
"config" : { "hscale" : 2 }
}
</script>
<a href="https://wavedrom.com/editor.html?%7B%20%22signal%22%20%3A%20%5B%0A%20%20%7B%20%22name%22%3A%20%22clk%22%2C%20%20%20%20%20%20%20%20%20%22wave%22%3A%20%22p....%22%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22Data%22%2C%20%20%20%20%20%20%20%20%22wave%22%3A%20%22x345x%22%2C%20%22data%22%3A%20%5B%22head%22%2C%20%22body%22%2C%20%22tail%22%5D%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22Request%22%2C%20%20%20%20%20%22wave%22%3A%20%2201..0%22%20%7D%0A%5D%2C%0A%20%20%22config%22%20%3A%20%7B%20%22hscale%22%20%3A%202%20%7D%0A%7D%0A">Edit Me >></a>
<h3>hscale = 3</h3>
<script type="WaveDrom">
{ "signal" : [
{ "name": "clk", "wave": "p...." },
{ "name": "Data", "wave": "x345x", "data": ["head", "body", "tail"] },
{ "name": "Request", "wave": "01..0" }
],
"config" : { "hscale" : 3 }
}
</script>
<a href="https://wavedrom.com/editor.html?%7B%20%22signal%22%20%3A%20%5B%0A%20%20%7B%20%22name%22%3A%20%22clk%22%2C%20%20%20%20%20%20%20%20%20%22wave%22%3A%20%22p....%22%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22Data%22%2C%20%20%20%20%20%20%20%20%22wave%22%3A%20%22x345x%22%2C%20%22data%22%3A%20%5B%22head%22%2C%20%22body%22%2C%20%22tail%22%5D%20%7D%2C%0A%20%20%7B%20%22name%22%3A%20%22Request%22%2C%20%20%20%20%20%22wave%22%3A%20%2201..0%22%20%7D%0A%5D%2C%0A%20%20%22config%22%20%3A%20%7B%20%22hscale%22%20%3A%203%20%7D%0A%7D%0A">Edit Me >></a>
<h3>skin</h3>
<span class="fixed">config:{skin:'...'}</span> property can be used to select the <a href="https://github.com/wavedrom/wavedrom/tree/trunk/unpacked">WaveDrom skin</a>.
The property works only inside the first timing diagram on the page.
<a href="https://wavedrom.com/editor.html">WaveDrom Editor<a> includes two standard skins: <span class="fixed">'default'</span> and <span class="fixed">'narrow'</span>
<h3>head/foot</h3>
<span class="fixed">head:{...}</span> and <span class="fixed">foot:{...}</span> properties define the content of the area above and below the timing diagram.
<h4>tick</h4>
-adds timeline labels aligned to vertical markers.
<h4>tock</h4>
-adds timeline labels between the vertical markers.
<h4>text</h4>
-adds title / caption text.
<h4>every</h4>
-render ticks and tocks only once every N cycle
<pre class="brush: js">
{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
},
}
</pre>
<script type="WaveDrom">
{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
},
}
</script>
<a href="https://wavedrom.com/editor.html?%7Bsignal%3A%20%5B%0A%20%20%7Bname%3A%27clk%27%2C%20%20%20%20%20%20%20%20%20wave%3A%20%27p....%27%20%7D%2C%0A%20%20%7Bname%3A%27Data%27%2C%20%20%20%20%20%20%20%20wave%3A%20%27x345x%27%2C%20data%3A%20%27a%20b%20c%27%20%7D%2C%0A%20%20%7Bname%3A%27Request%27%2C%20%20%20%20%20wave%3A%20%2701..0%27%20%7D%0A%5D%2C%0A%20head%3A%7B%0A%20%20%20text%3A%27WaveDrom%20example%27%2C%0A%20%20%20tick%3A0%2C%0A%20%20%20every%3A2%0A%20%7D%2C%0A%20foot%3A%7B%0A%20%20%20text%3A%27Figure%20100%27%2C%0A%20%20%20tock%3A9%0A%20%7D%2C%0A%7D">Edit Me >></a>
<p>
<span class="fixed">head</span>/
<span class="fixed">foot</span> text has all properties of SVG text. Standard SVG
<span class="fixed">tspan</span> attributes can be used to modify default properties of text. <a href="http://www.jsonml.org">JsonML</a> markup language used to represent SVG text content. Several predefined styles can be used and intermixed:
<p>
<span class="fixed">h1</span>
<span class="fixed">h2</span>
<span class="fixed">h3</span>
<span class="fixed">h4</span>
<span class="fixed">h5</span>
<span class="fixed">h6</span> -- predefined font sizes.
<p>
<span class="fixed">muted</span>
<span class="fixed">warning</span>
<span class="fixed">error</span>
<span class="fixed">info</span>
<span class="fixed">success</span> -- font color styles.
<p>
Other SVG <span class="fixed">tspan</span> attributes can be used in freestyle as shown below.
<pre class="brush: js">
{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
}
}
</pre>
<script type="WaveDrom">
{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
}
}
</script>
<a href="https://wavedrom.com/editor.html?%7Bsignal%3A%20%5B%0A%20%20%7Bname%3A'clk'%2C%20wave%3A%20'p.....PPPPp....'%20%7D%2C%0A%20%20%7Bname%3A'dat'%2C%20wave%3A%20'x....2345x.....'%2C%20data%3A%20'a%20b%20c%20d'%20%7D%2C%0A%20%20%7Bname%3A'req'%2C%20wave%3A%20'0....1...0.....'%20%7D%0A%5D%2C%0Ahead%3A%20%7Btext%3A%0A%20%20%5B'tspan'%2C%0A%20%20%20%20%5B'tspan'%2C%20%7Bclass%3A'error%20h1'%7D%2C%20'error%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7Bclass%3A'warning%20h2'%7D%2C%20'warning%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7Bclass%3A'info%20h3'%7D%2C%20'info%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7Bclass%3A'success%20h4'%7D%2C%20'success%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7Bclass%3A'muted%20h5'%7D%2C%20'muted%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7Bclass%3A'h6'%7D%2C%20'h6%20'%5D%2C%0A%20%20%20%20'default%20'%2C%0A%20%20%20%20%5B'tspan'%2C%20%7Bfill%3A'pink'%2C%20'font-weight'%3A'bold'%2C%20'font-style'%3A'italic'%7D%2C%20'pink-bold-italic'%5D%0A%20%20%5D%0A%7D%2C%0Afoot%3A%20%7Btext%3A%0A%20%20%5B'tspan'%2C%20'E%3Dmc'%2C%0A%20%20%20%20%5B'tspan'%2C%20%7Bdy%3A'-5'%7D%2C%20'2'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7Bdy%3A%20'5'%7D%2C%20'.%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7B'font-size'%3A'25'%7D%2C%20'B%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7B'text-decoration'%3A'overline'%7D%2C'over%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7B'text-decoration'%3A'underline'%7D%2C'under%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7B'baseline-shift'%3A'sub'%7D%2C%20'sub%20'%5D%2C%0A%20%20%20%20%5B'tspan'%2C%20%7B'baseline-shift'%3A'super'%7D%2C%20'super%20'%5D%0A%20%20%5D%2Ctock%3A-5%0A%7D%0A%7D%0A">Edit Me >></a>
<h2 id="arrows">Step 8. Arrows</h2>
<h3>Splines</h3>
<pre>
~ -~
<~> <-~>
~> -~> ~->
</pre>
<pre class="brush: js">
{ 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'
]
}
</pre>
<script type="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'
]
}
</script>
<a href="https://wavedrom.com/editor.html?%7B%20signal%3A%20%5B%0A%20%20%7B%20name%3A%20'A'%2C%20wave%3A%20'01........0....'%2C%20%20node%3A%20'.a........j'%20%7D%2C%0A%20%20%7B%20name%3A%20'B'%2C%20wave%3A%20'0.1.......0.1..'%2C%20%20node%3A%20'..b.......i'%20%7D%2C%0A%20%20%7B%20name%3A%20'C'%2C%20wave%3A%20'0..1....0...1..'%2C%20%20node%3A%20'...c....h..'%20%7D%2C%0A%20%20%7B%20name%3A%20'D'%2C%20wave%3A%20'0...1..0.....1.'%2C%20%20node%3A%20'....d..g...'%20%7D%2C%0A%20%20%7B%20name%3A%20'E'%2C%20wave%3A%20'0....10.......1'%2C%20%20node%3A%20'.....ef....'%20%7D%0A%5D%2C%0Aedge%3A%20%5B'a~b%20t1'%2C%20'c-~a%20t2'%2C%20'c-~%3Ed%20time%203'%2C%20'd~-e'%2C%20'e~%3Ef'%2C%20'f-%3Eg'%2C%20'g-~%3Eh'%2C%20'h~%3Ei%20some%20text'%2C%20'h~-%3Ej'%5D%0A%7D%0A">Edit Me >></a>
<h3>Sharp lines</h3>
<pre>
- -| -|-
<-> <-|> <-|->
-> -|> -|-> |->
+
</pre>
<pre class="brush: js">
{ 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'
]
}
</pre>
<script type="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'
]
}
</script>
<a href="https://wavedrom.com/editor.html?%7B%20signal%3A%20%5B%0A%20%20%7B%20name%3A%20%27A%27%2C%20wave%3A%20%2701..0..%27%2C%20%20node%3A%20%27.a..e..%27%20%7D%2C%0A%20%20%7B%20name%3A%20%27B%27%2C%20wave%3A%20%270.1..0.%27%2C%20%20node%3A%20%27..b..d.%27%2C%20phase%3A0.5%20%7D%2C%0A%20%20%7B%20name%3A%20%27C%27%2C%20wave%3A%20%270..1..0%27%2C%20%20node%3A%20%27...c..f%27%20%7D%2C%0A%20%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20node%3A%20%27...g..h%27%20%7D%2C%0A%20%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20node%3A%20%27...I..J%27%2C%20%20phase%3A0.5%20%7D%2C%0A%20%20%7B%20name%3A%20%27D%27%2C%20wave%3A%20%270..1..0%27%2C%20%20phase%3A0.5%20%7D%0A%20%20%5D%2C%0A%20%20edge%3A%20%5B%0A%20%20%20%20%27b-%7Ca%20t1%27%2C%20%27a-%7Cc%20t2%27%2C%20%27b-%7C-c%20t3%27%2C%20%27c-%7C-%3Ee%20t4%27%2C%20%27e-%7C%3Ef%20more%20text%27%2C%0A%20%20%20%20%27e%7C-%3Ed%20t6%27%2C%20%27c-g%27%2C%20%27f-h%27%2C%20%27g%3C-%3Eh%203%20ms%27%2C%20%27I%2BJ%205%20ms%27%0A%20%20%5D%0A%7D">Edit Me >></a>
<h2 id="some-code">Step 9. Some code</h2>
<pre class="brush: js" type="WaveDrom">
(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)
</pre>
<script type="WaveDrom">
(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)
</script>
</div>
<a href="https://github.com/drom/wavedrom"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<script>(function(){ window.addEventListener("load", WaveDrom.ProcessAll, false); })();</script>
<script>SyntaxHighlighter.all()</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-21660728-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-21660728-3');
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手