Timing waveforms drawing tools

Every now and then there are situations where you need to draw timing diagram. I have drawn those sometimes with different tools, but none of them have been ideal (text description, hand drawings, ASCII art etc..).

So what are the existing solutions worth to check out? There are font-based solutions that let you “type” the timing diagrams. We found Xwave is a TrueType™ font that has electrical waveform gliphs. Timing Diagram Font is another font created for same purpose. Latex users can use tikz-timing, which makes sketching out your timing diagrams as much fun as laying out a very complex table in Latex (that is: not fun at all).

After reading Timing waveforms posting at Hackaday I ended up testing Wavedrom. It looked quite promising for drawing digital circuit timing diagrams. Give the online editor demo a try. You can easily make simple drawings without looking at any manual or tutorial.


WaveDrom is a JavaScript application. WaveDrom renders the diagrams directly inside the browser using SVG technology. You can start experimenting with Hitchhiker’s Guide to the WaveDrom and online editor. WaveDrom looks like an excellent tool for creating simple waveforms (although has some challenges on file access).

Clearly, some good thought has been put into the waveform description language, WaveJSON; it’s mostly readable and makes the essentials quick and easy. WaveJSON is a format that describes Digital Timing Diagrams with WaveJSON grammar rules.

What if you already have data on some other format that you want to convert to WaveJSON format to use with WaveJSON?

Any way to generate WaveJSON code? discussion offers this example script for converting sampled data into WaveJSON code.  It looks super easy, and worked when I tested it. Just put this code inside WaveDrom Editor:

var e, tmp, res ={signal:[]};
for(e in o){
={wave:, data:};
.name = e;
[e].forEach(function(el, i, arr){
if(i >0&& el === arr[i-1]){
.wave +=‘.’;
if(el >1){
.wave +=‘=’;
.data += el +‘ ‘;
.wave += el;
return res;
You can change this code to adjust to specific format of your data. The potential input data formats that you might want to use are Comma-separated_values,



Be the first to post a comment.

Leave a Comment

Your email address will not be published. Required fields are marked *