Skip to content
🌊 Digital timing diagram rendering engine
Branch: master
Clone or download
Latest commit a6ea87f Feb 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github fix links Feb 24, 2019
bin
commandline make all line endings coherent (LF) Jun 8, 2018
css tabs -> spaces Jun 8, 2018
doc make all line endings coherent (LF) Jun 8, 2018
lib
skins catch module.exports error Jun 8, 2018
src
test
unpacked
vue export skins and add vue.js example component Jun 8, 2018
.gitignore ignore more Sep 26, 2018
.travis.yml CI on node 11 : bumped dependencies Nov 4, 2018
Gruntfile.js renamed result files to wavedrom.js and wavedrom.min.js Mar 1, 2016
LICENSE ⬆️ license years Feb 24, 2019
README.md readme fix Feb 25, 2019
bower.json
package.json 1.9.2 Feb 25, 2019
wavedrom.js
wavedrom.min.js
wavedrom.unpkg.js ⬆️ bit-field Feb 25, 2019

README.md

Build Status Dependency Status NPM version Analytics PayPal donate button

EDITOR | TUTORIAL

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.

Screenshot

Alt text

Web usage

WaveDrom timing diagrams can be embedded into the web pages, blogs, and wikis to be rendered by the most of modern browsers:

alt text 4+ alt text 10+ alt text 5.1+ alt text 12+ alt text 11

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>:
<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/1.9.2/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.9.2/wavedrom.min.js" type="text/javascript"></script>
  1. Set the onload event for the HTML body.
<body onload="WaveDrom.ProcessAll()">
  1. 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

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

  1. Download latest wavedrom-editor-v1.9.2-win-{ia32|x64}.zip release from here: releases
  2. Unzip it into a working directory.
  3. Run the editor: wavedrom-editor.exe

Linux

  1. Download the latest wavedrom-editor-v1.9.2-linux-{ia32|x64}.tar.gz release from here: releases
  2. unzip-untar the package: tar -xvzf wavedrom-editor-v1.9.2-linux-x64.tar.gz
  3. Run the editor: ./WaveDromEditor/linux64/wavedrom-editor

OS X

  1. Download the latest wavedrom-editor-v1.9.2-osx-x64.zip release from here: releases
  2. Unzip
  3. Run

Community

Please use the WaveDrom user group for discussions, questions, ideas, or whatever.

Contributing

Contributing

License

See LICENSE.

You can’t perform that action at this time.