waveform-render-vscode

Render waveforms with WaveDrom inside VSCode.

This VSCode extension is available on the VSCode Extension Marketplace.

Usage

📄 Open a .JSON file containing a WaveDrom waveform, like

{ signal: [
  { name: "clk",         wave: "p.....|..." },
  { name: "Data",        wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
  { name: "Request",     wave: "0.1..0|1.0" },
  {},
  { name: "Acknowledge", wave: "1.....|01." }
]}

➡️ click the wave button at the top-right corner

or

🎹 Press "Ctrl+K followed by Ctrl+D", or "Ctrl+Shift+P followed by Waveform Render: Draw" to draw the waveform in your editor

or

🔃 Press "Ctrl+K followed by Ctrl+L", or "Ctrl+Shift+P followed by Waveform Render: Toggle Live Preview" to make the waveform update as you type

🌈 and you will get a new tab with a nice waveform rendered inside your text editor

💾 Saving the waveform

• You can save the rendered waveform as PNG or SVG by right-clicking the waveform and selecting your preferred format.
• Or click the 📋copy to clipboard button in twe waveform pannel to copy the image to your clipboard.
• Or use VSCode commands to save as PNG/SVG:
  • Waveform Render: Copy Save as PNG (waveformRender.saveAsPng)
  • Waveform Render: Copy Save as SVG (waveformRender.saveAsSvg)

Syntax

You can find the complete WaveDrom syntax in the WaveDrom schema docs.