Drawing (electronic) timing diagrams

Posted December 1st, 2013 by dale

[Update: 2015-10-09]
Found an interesting, Java-based standalone tool (that I haven't tried yet) at:

[Updated 2015-01-08]
- The project has moved to: http://wavedrom.com
- There is alive -on-line- editor that let's you experiment

I've periodically needed relatively simple timing diagrams for documentation of e.g. for triggering schemes for synchronizing sonars or the BGM3 gravity machine interface.

There are very nice (and not inexpensive) software tools out there that I've looked at but never purchased.

Recently I ran into WaveDrom on Google (http://code.google.com/p/wavedrom/) which is free and quite usable. It allows you to save a rendered SVG and has various plugins for html version of the rendered timing diagrams.

Let's try:

{ "signal" : [
{ "name": "clk", "wave": "p......" },
{ "name": "bus", "wave": "x.==.=x", "data": ["head", "body", "tail"] },
{ "name": "wire", "wave": "0.1..0." },

The image doesn't render in this blog, but there is a link at the bottom.

Perhaps it's time to migrate to yet another blogging tool (YABT) ;-)

In the mean time, look at the authors blog for a working example:

Oh, scandalous - this site doesn't (yet) know how to handle ".svg" files.... so I converted it to a GIF for now.