Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wavedrom/wavedrom

:ocean: Digital timing diagram rendering engine
https://github.com/wavedrom/wavedrom

diagram hacktoberfest svg

Last synced: about 19 hours 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 (over 10 years ago)
Default Branch: trunk
Last Pushed: 2024-04-02T02:49:15.000Z (8 months ago)
Last Synced: 2024-10-29T15:01:55.517Z (about 1 month ago)
Topics: diagram, hacktoberfest, svg
Language: JavaScript
Homepage: https://wavedrom.com
Size: 1.29 MB
Stars: 2,987
Watchers: 90
Forks: 365
Open Issues: 174
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

awesome-canvas - wavedrom - 🌊 Digital timing diagram rendering engine. ![](https://img.shields.io/github/stars/wavedrom/wavedrom?style=social) ![](https://img.shields.io/github/forks/wavedrom/wavedrom?style=social) (Libraries / Waveforms animation)
awesome-github-repos - wavedrom/wavedrom - :ocean: Digital timing diagram rendering engine (JavaScript)
awesome-starred - wavedrom/wavedrom - :ocean: Digital timing diagram rendering engine (hacktoberfest)
awesome-opensource-hardware - wavedrom
awesome-hwd-tools - wavedrom/wavedrom - Timing Diagrams in Java Script (Semi Custom Design/ FPGAs / Wave Viewers)
awesome-frontend - wavedrom - 🌊 Digital timing diagram rendering engine. ![](https://img.shields.io/github/stars/wavedrom/wavedrom?style=social) (Repository / Animation)

README

        [![Linux](https://github.com/wavedrom/wavedrom/actions/workflows/linux.yml/badge.svg)](https://github.com/wavedrom/wavedrom/actions/workflows/linux.yml)

[![MacOS](https://github.com/wavedrom/wavedrom/actions/workflows/macos.yml/badge.svg)](https://github.com/wavedrom/wavedrom/actions/workflows/macos.yml)

[![Windows](https://github.com/wavedrom/wavedrom/actions/workflows/windows.yml/badge.svg)](https://github.com/wavedrom/wavedrom/actions/workflows/windows.yml)

[![NPM version](https://img.shields.io/npm/v/wavedrom.svg)](https://www.npmjs.org/package/wavedrom)



[![Coverage Status](https://coveralls.io/repos/github/wavedrom/wavedrom/badge.svg?branch=trunk)](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

```

![Alt](https://svg.wavedrom.com/github/////.json5)

```

```md

![signal step4](https://svg.wavedrom.com/github/wavedrom/wavedrom/trunk/test/signal-step4.json5)

```

![signal step4](https://svg.wavedrom.com/github/wavedrom/wavedrom/trunk/test/signal-step4.json5)

```md

![reg vl](https://svg.wavedrom.com/github/wavedrom/wavedrom/trunk/test/reg-vl.json5)

```

![reg vl](https://svg.wavedrom.com/github/wavedrom/wavedrom/trunk/test/reg-vl.json5)

```



```



## 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).