Introduction
WaveDrom timing diagrams can be embedded into the web pages, blogs, wiki pages.
HTML pages
There are 3 steps to insert WaveDrom diagrams directly into your page:
- Put following line into your HTML page
<header> or <body>:
<script src="http://wavedrom.com/skins/default.js" type="text/javascript"></script>
<script src="http://wavedrom.com/wavedrom.min.js" type="text/javascript"></script>
- Set
onload event for HTML body.
<body onload="WaveDrom.ProcessAll()">
- Insert Put WaveJSON source inside HTML
<body> wrapped with <script> tag:
<script type="WaveDrom">
{ signal : [
{ name: "clk", wave: "p......" },
{ name: "bus", wave: "x.34.5x", data: "head body tail" },
{ name: "wire", wave: "0.1..0." },
]}
</script>
Script will find all <script type="WaveDrom"> instances and insert timing diagram at that point.
jsbin jsfiddle
Presentation engines
impress.js
(http://wavedrom.com/impress.html)
Blogs & Wikis
Blogger integration: (http://wavedrom.blogspot.com/2011/08/wavedrom-digital-timing-diagram-in-your.html)