Colin Marquardt edited this page Aug 7, 2017 · 4 revisions


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:

  1. 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>
  1. Set onload event for HTML body.
<body onload="WaveDrom.ProcessAll()">
  1. 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 will find all <script type="WaveDrom"> instances and insert timing diagram at that point.

jsbin jsfiddle

Presentation engines



Blogs & Wikis

Blogger integration: (http://wavedrom.blogspot.com/2011/08/wavedrom-digital-timing-diagram-in-your.html)

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.