Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wavedrom/wavedrom
:ocean: Digital timing diagram rendering engine
https://github.com/wavedrom/wavedrom
diagram hacktoberfest svg
Last synced: 3 months ago
JSON representation
:ocean: Digital timing diagram rendering engine
- Host: GitHub
- URL: https://github.com/wavedrom/wavedrom
- Owner: wavedrom
- License: mit
- Created: 2014-05-05T02:34:06.000Z (about 10 years ago)
- Default Branch: trunk
- Last Pushed: 2024-02-22T18:16:40.000Z (4 months ago)
- Last Synced: 2024-03-19T22:17:38.564Z (3 months ago)
- Topics: diagram, hacktoberfest, svg
- Language: JavaScript
- Homepage: https://wavedrom.com
- Size: 1.29 MB
- Stars: 2,712
- Watchers: 89
- Forks: 345
- Open Issues: 160
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-opensource-hardware - wavedrom
- awesome-hwd-tools - wavedrom/wavedrom - Timing Diagrams in Java Script (Semi Custom Design/ FPGAs / Wave Viewers)
- awesome-stars - wavedrom - :ocean: Digital timing diagram rendering engine (JavaScript)
- awesome-pcb - wavedrom
- awesome-github-repos - wavedrom/wavedrom - :ocean: Digital timing diagram rendering engine (JavaScript)
- awesome-stars - wavedrom/wavedrom - :ocean: Digital timing diagram rendering engine (JavaScript)
- awesome-stars - wavedrom/wavedrom - :ocean: Digital timing diagram rendering engine (JavaScript)
- awesome-starred - wavedrom/wavedrom - :ocean: Digital timing diagram rendering engine (hacktoberfest)
- awesome-stars - wavedrom/wavedrom - :ocean: Digital timing diagram rendering engine (JavaScript)
- awesome-canvas - wavedrom - 🌊 Digital timing diagram rendering engine.   (Libraries / Waveforms animation)
- awesome-stars - wavedrom
- awesome-canvas - wavedrom - 🌊 Digital timing diagram rendering engine.   (Libraries / Waveforms animation)
- awesome-frontend - wavedrom - 🌊 Digital timing diagram rendering engine.  (Repository / Animation)
README
[](https://github.com/wavedrom/wavedrom/actions/workflows/linux.yml)
[](https://github.com/wavedrom/wavedrom/actions/workflows/macos.yml)
[](https://github.com/wavedrom/wavedrom/actions/workflows/windows.yml)
[](https://www.npmjs.org/package/wavedrom)
[](https://coveralls.io/github/wavedrom/wavedrom?branch=trunk)
[EDITOR](http://wavedrom.com/editor.html) | [TUTORIAL](http://wavedrom.com/tutorial.html)
## Introduction
**WaveDrom** is a Free and Open Source online digital timing diagram (waveform) rendering engine that uses javascript, HTML5 and SVG to convert a [WaveJSON](https://github.com/wavedrom/schema/blob/master/WaveJSON.md) input text description into SVG vector graphics.
WaveJSON is an application of the [JSON](http://json.org/) 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](unpacked/README.md) skin mechanism to render a complete picture.
## Server
svg.wavedrom.com
```
```
```md
```
```md
```
```
```
## Web usage
**WaveDrom** timing diagrams can be embedded into the web pages, blogs, and wikis to be rendered by the most of modern browsers.
### HTML pages
There are three steps to insert **WaveDrom** diagrams directly into your page:
1) Put the following line into your HTML page `````` or ``````:
From a CDN:
```html
```
2) Set the ``onload`` event for the HTML body.
```html
```
3) Insert [WaveJSON](https://github.com/wavedrom/schema/blob/master/WaveJSON.md) source inside HTML ```` wrapped with the ```` tag:
```html
<script type="WaveDrom">
{ signal : [
{ name: "clk", wave: "p......" },
{ name: "bus", wave: "x.34.5x", data: "head body tail" },
{ name: "wire", wave: "0.1..0." },
]}
```
The script will find all ```` instances and insert a timing diagram at that point.
* [jsbin](http://jsbin.com/uderuw/17)
* [jsfiddle](http://jsfiddle.net/H7nBn/25)
### impress.js
(http://wavedrom.com/impress.html)
### Blogs & Wikis
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)
## Editor
[WaveDromEditor](http://wavedrom.com/editor.html)
is an online real-time editor of digital timing diagrams based on the **WaveDrom** engine and **WaveJSON** format.
## Standalone WaveDromEditor
### Windows
1. Download latest `wavedrom-editor-v2.4.2-win-{ia32|x64}.zip` release from here: [releases](https://github.com/wavedrom/wavedrom.github.io/releases)
2. Unzip it into a working directory.
3. Run the editor: `wavedrom-editor.exe`
### Linux
1. Download the latest `wavedrom-editor-v2.4.2-linux-{ia32|x64}.tar.gz` release from here: [releases](https://github.com/wavedrom/wavedrom.github.io/releases)
2. unzip-untar the package: `tar -xvzf wavedrom-editor-v2.3.2-linux-x64.tar.gz`
3. Run the editor: `./WaveDromEditor/linux64/wavedrom-editor`
## OS X
1. Download the latest `wavedrom-editor-v2.4.2-osx-x64.zip` release from here: [releases](https://github.com/wavedrom/wavedrom.github.io/releases)
2. Unzip
3. Run
## Community
Please use the [WaveDrom user group](http://groups.google.com/group/wavedrom) for discussions, questions, ideas, or whatever.
## Contributing
[Contributing](./.github/CONTRIBUTING.md)
## License
See [LICENSE](https://github.com/wavedrom/wavedrom/blob/trunk/LICENSE).