Introduction
WaveDrom is a Free and Open Source online digital timing diagram (waveform) rendering engine that uses javascript, HTML5 and SVG to convert a WaveJSON input text description into SVG vector graphics.
WaveJSON is an application of the JSON format. The purpose of WaveJSON is to provide a compact exchange format for digital timing diagrams utilized by digital HW / IC engineers.
The engine is using WaveDromSkin skin mechanism to render a complete picture.
Server
svg.wavedrom.com
<img src="https://svg.wavedrom.com/{WAVEDROM SOURCE}/>
<img src="https://svg.wavedrom.com/{signal:[{name:'clk',wave:'p......'},{name:'bus',wave:'x.34.5x',data:'head body tail'},{name:'wire',wave:'0.1..0.'}]}"/>
Web usage
WaveDrom timing diagrams can be embedded into the web pages, blogs, and wikis to be rendered by the most of modern browsers:
4+
10+
5.1+
12+
11
HTML pages
There are three steps to insert WaveDrom diagrams directly into your page:
- Put the 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>
or from a CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/2.3.2/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/2.3.2/wavedrom.min.js" type="text/javascript"></script>
- Set the
onloadevent for the HTML body.
<body onload="WaveDrom.ProcessAll()">
- Insert WaveJSON source inside HTML
<body>wrapped with the<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>
The script will find all <script type="WaveDrom"> instances and insert a timing diagram at that point.
impress.js
(http://wavedrom.com/impress.html)
Blogs & Wikis
ObservableHQ examples: (https://observablehq.com/collection/@drom/wavedrom)
Blogger integration: (http://wavedrom.blogspot.com/2011/08/wavedrom-digital-timing-diagram-in-your.html)
MediaWiki integration: (https://github.com/Martoni/mediawiki_wavedrom)
Editor
WaveDromEditor
is an online real-time editor of digital timing diagrams based on the WaveDrom engine and WaveJSON format.
Standalone WaveDromEditor
Windows
- Download latest
wavedrom-editor-v2.3.2-win-{ia32, x64}.ziprelease from here: releases - Unzip it into a working directory.
- Run the editor:
wavedrom-editor.exe
Linux
- Download the latest
wavedrom-editor-v2.3.2-linux-{ia32, x64}.tar.gzrelease from here: releases - unzip-untar the package:
tar -xvzf wavedrom-editor-v2.3.2-linux-x64.tar.gz - Run the editor:
./WaveDromEditor/linux64/wavedrom-editor
OS X
- Download the latest
wavedrom-editor-v2.3.2-osx-x64.ziprelease from here: releases - Unzip
- Run
Community
Please use the WaveDrom user group for discussions, questions, ideas, or whatever.
Contributing
License
See LICENSE.