WaveDrom is a Free and Open Source online digital timing diagram (waveform) rendering engine that uses javascript, HTML5 and SVG to convert a WaveJSON input text description into SVG vector graphics.
WaveJSON is an application of the JSON format. The purpose of WaveJSON is to provide a compact exchange format for digital timing diagrams utilized by digital HW / IC engineers.
The engine is using WaveDromSkin skin mechanism to render a complete picture.
svg.wavedrom.com
<img src="https://svg.wavedrom.com/{WAVEDROM SOURCE}/>
<img src="https://svg.wavedrom.com/{signal:[{name:'clk',wave:'p......'},{name:'bus',wave:'x.34.5x',data:'head body tail'},{name:'wire',wave:'0.1..0.'}]}"/>
WaveDrom can be used from the command line to generate SVG files from JSON5 source.
npx wavedrom --input source.json5 > output.svg
npm install -g wavedrom
wavedrom --input source.json5 --indent 2 > output.svg
-i, --input <path>: (Required) Path to the WaveJSON source file.-t, --indent <number>: Text indent in the output SVG.-h, --help: Show help message.To export a waveform to PNG, you can use the @resvg/resvg-js-cli tool:
npx wavedrom -i source.json5 | npx @resvg/resvg-js-cli - output.png
WaveDrom timing diagrams can be embedded into the web pages, blogs, and wikis to be rendered by the most of modern browsers.
There are three steps to insert WaveDrom diagrams directly into your page:
<header> or <body>:From a CDN (jsDelivr):
<script src="https://cdn.jsdelivr.net/npm/wavedrom@3/wavedrom.min.js" type="text/javascript"></script>
or (unpkg):
<script src="https://unpkg.com/wavedrom@3/wavedrom.min.js" type="text/javascript"></script>
onload event for the HTML body.<body onload="WaveDrom.ProcessAll()">
<body> wrapped with the <script> tag:<script type="WaveDrom">
{ signal : [
{ name: "clk", wave: "p......" },
{ name: "bus", wave: "x.34.5x", data: "head body tail" },
{ name: "wire", wave: "0.1..0." },
]}
</script>
The script will find all <script type="WaveDrom"> instances and insert a timing diagram at that point.
(http://wavedrom.com/impress.html)
ObservableHQ examples: (https://observablehq.com/collection/@drom/wavedrom)
Blogger integration: (http://wavedrom.blogspot.com/2011/08/wavedrom-digital-timing-diagram-in-your.html)
MediaWiki integration: (https://github.com/Martoni/mediawiki_wavedrom)
WaveDromEditor is an online real-time editor of digital timing diagrams based on the WaveDrom engine and WaveJSON format.
wavedrom-editor-v2.4.2-win-{ia32|x64}.zip release from here: releaseswavedrom-editor.exewavedrom-editor-v2.4.2-linux-{ia32|x64}.tar.gz release from here: releasestar -xvzf wavedrom-editor-v2.3.2-linux-x64.tar.gz./WaveDromEditor/linux64/wavedrom-editorwavedrom-editor-v2.4.2-osx-x64.zip release from here: releasesPlease use the WaveDrom user group for discussions, questions, ideas, or whatever.
See LICENSE.
FAQs
Digital timing diagram in your browser
The npm package wavedrom receives a total of 3,828 weekly downloads. As such, wavedrom popularity was classified as popular.
We found that wavedrom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.