Sawen_Blog

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

Start#

Install waveform render in Vscode or search for wavedrom on GitHub to install it. Since Vscode is my commonly used editor, I chose to learn how 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 represents a square wave starting at the rising edge
• n represents a square wave starting at the falling edge
• l represents low level
• h represents 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 represents an unknown state

• = represents 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
  
  The period and phase variables are used to adjust the 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 completing the timing drawing, you can also embellish the image. "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 adding a line of text

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

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