Timing Diagram Generator

How does it work?

Enter your timing diagram commands in the textarea below

Available commands:

Title

- Takes just the title as its argument.

Comment

- You can add comment lines using this.

Background

- You can leave this out for transparent background or assign a color.

Start

- Sets the start of the first grid line and all the (clock)signals.

Width

- Sets the width of the image.

Grid

- Accepts the width of the grid and the line color, only 1 grid per diagram.

Clock

- A clock has a name and starts high or low (default) and the half period is given.

Signal

- Like a clock but the signal change points are added as whole integers.

Shift

- Shifts the clock signal this amount. Resets after use to default no shift.

Color

- Accepted color for svg file used for the color of the line. Stays active.

Vline

- Accepts a name as a label, and a horizontal offset for a vertical line from the top to the current line. Does not advance a line.

Skip-line

- No arguments. Skips a line after (several) Vlines.

No capital letters or lower case letters required.

In case an error occurs, it will be displayed.

No errors means an image is generated

Example Timing diagram

Example Code

title Timing Diagram Example
comment Place your explanatory comments after this command
background white
start 500
width 2000
grid 100 lightgrey
clock "Clock 1" low 100
color navy
clock "Clock 2" high 100
shift 50
clock "Clock 3" low 100
color green
clock "Clock 4" low 200
color blue
signal "Signal 1" low 230 310 440 510 550 900 
signal "Signal 2" low 230 350 460 550 580 600 750 820 
color red
vline "A" 440
vline "B" 770
skip-line
color blue
signal "Signal 3" low 230 310 350 440 460 510 550 580 600 750 820 900 
vline "C" 850

This is the image that is generated by this example code: