Wavedrom
Product Information
Use Cases
Public chat
Support Plans
There are currently no OSS plans available
If you are a provider or contributor to the repository, you can start adding your OSS plan.
Add an OSS planContact us if you are looking for a plan for this open source.
We will help you get in touch with professional providers.
Product Details
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.
HTML pages
There are three steps to insert WaveDrom diagrams directly into your page:
1) Put the following line into your HTML page <header> or <body>:
From a CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/wavedrom.min.js" type="text/javascript"></script>2) Set the onload event for the HTML body.
<body onload="WaveDrom.ProcessAll()">3) 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.4.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.4.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.4.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.
