Sawen_Blog

At the beginning, timing diagrams were drawn using Visio, but the line width was too difficult to standardize, looking quite ugly, so I learned to use waveform syntax to draw timing diagrams with code.

Start#

Install waveform render in Vscode or search for wavedrom on GitHub to install. Since vscode is my commonly used editor, I chose to learn to use waveform by installing the plugin in vscode.
Create a json file in vscode with the content:

{

    "signal":[

        {"name":"clk","wave":"p....."},

        {"name":"data","wave":"010101"}

    ]

}

After selecting the following command in the command palette, you can view the rendering result:

Syntax#

Clock Signal#

• p indicates a square wave starting at the rising edge
• n indicates a square wave starting at the falling edge
• l indicates low level
• h indicates high level
• Uppercase will draw arrows at the edges of the square wave
  
  The timing diagram rendered from the code is:
  

Data Signal#

• 0 and 1

• x indicates an unknown state

• = indicates valid data, which can also be written as 2~9, displayed in different colors, and can use the data variable with a text label
  

• You can use | to indicate the omission of a segment of the signal
  
  period and phase variables are used to adjust timing

• The value of period should be a number n, indicating horizontal scaling up or down proportionally

• The value of phase should be a number n, indicating horizontal position adjustment, with the unit being one clock cycle:

  • If positive, it indicates moving left by n clock cycles
  • If negative, it indicates moving right by n clock cycles
    
    Multiple signals can be grouped using the ['group name', {...}, {...}, ...] syntax, and nesting is supported.
    After the timing diagram is completed, the image can also be modified. "config": { "hscale": n } indicates scaling the image horizontally by n times. "head":{ } and "foot":{ } indicate adding some content at the top and bottom of the timing diagram, respectively:

• The text variable should be set to a string, indicating the addition of a line of text

• The tick variable should be set to an integer, indicating the display of sequence numbers at the starting point of the clock cycle, starting from n

• The tock variable should be set to an integer, indicating the display of sequence numbers at the midpoint of the clock cycle, starting from n